/* wordart shared chrome — PHOSPHOR rebuild.
   Single dark phosphor identity matching kamicrafts.com/open.
   Mint #5df2a6 on near-black #0a0f0d, mono font everywhere,
   4-6px radii, 1px mint .22 borders, soft glow on actives.

   The old site chrome (wa-top header, wa-bottom footer, theme-switcher
   pill, kami-breadcrumb) is removed from the listing-page markup.
   Defensive `display:none` rules remain for those classes so any
   leftover instance from effect subpages does not leak old chrome. */

@import url('theme-tokens.css');

*,*::before,*::after{box-sizing:border-box;}

:root{
  --kami-bg:#0a0f0d;
  --kami-surface:#0f1714;
  --kami-surface-2:#0c1311;
  --kami-ink:#5df2a6;
  --kami-ink-dim:#2f9e6a;
  --kami-ink-faint:#1f6b49;
  --kami-border:rgba(93,242,166,.22);
  --kami-border-strong:rgba(93,242,166,.38);
  --kami-accent:#5df2a6;
  --kami-accent-ink:#07140d;
  --kami-accent-soft:rgba(93,242,166,.12);
  --kami-glow:0 0 1px rgba(93,242,166,.55);
  --kami-glow-strong:0 0 8px rgba(93,242,166,.35);
  --kami-font:'SF Mono','Menlo','JetBrains Mono',ui-monospace,monospace;
  --kami-radius:4px;
  --kami-radius-lg:6px;
}

html,body{
  margin:0; padding:0;
  background:var(--kami-bg);
  color:var(--kami-ink);
  font-family:var(--kami-font);
  font-size:13px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Effect subpages run on a fixed-height stage; keep their old layout. */
body.wa-effect{
  height:100dvh;
  overflow:hidden;
  background:#000;
}

::selection{ background:var(--kami-accent); color:var(--kami-accent-ink); }

/* ---------- KILLED OLD CHROME ----------
   These classes belong to the old multi-theme top/bottom bar and the
   floating theme switcher + breadcrumb. The markup is removed from
   index.html; these rules just neutralise any stragglers from effect
   subpages so they don't visually leak before being rewritten. */
.wa-top,
.wa-bottom,
.kami-header,
.kami-breadcrumb,
.kami-breadcrumb-fixed,
.kami-shortcut-hint,
.kami-footer,
.theme-switcher-container,
.theme-switcher-pill,
.theme-switcher-picker,
.theme-switcher-option,
.theme-switcher-option-icon,
body > .theme-switcher-container{
  display:none !important;
}

/* ---------- STAGE (effect canvas surface) ----------
   Used by individual effect pages. Listing page is not affected. */
.wa-stage{
  position:fixed !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  overflow:hidden;
  background:var(--kami-bg);
  z-index:0;
}
.wa-stage canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}
@media (min-width:641px){
  .wa-stage{ right:320px !important; }
}

/* ---------- ACTIONS CLUSTER (export / record / toggle / help) ----------
   Fixed top-right since the old header is gone. Floats above the stage
   on effect subpages. */
.wa-actions{
  position:fixed;
  top:12px; right:12px;
  display:flex; gap:6px; align-items:center;
  padding:5px;
  background:var(--kami-surface);
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius-lg);
  box-shadow:var(--kami-glow);
  z-index:50;
}
.wa-actions button{
  font-family:var(--kami-font); font-size:11px;
  background:transparent;
  color:var(--kami-ink);
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius);
  padding:4px 10px; cursor:pointer;
  height:26px; box-sizing:border-box;
  letter-spacing:.02em;
  transition:background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.wa-actions button:hover{
  background:var(--kami-accent-soft);
  border-color:var(--kami-border-strong);
  color:var(--kami-accent);
  box-shadow:var(--kami-glow);
}
.wa-actions button:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--kami-bg), 0 0 0 4px var(--kami-accent);
}
.wa-actions button[disabled]{ opacity:.4; cursor:wait; }
.wa-actions button svg{ display:block; }
.wa-actions button#export-png,
.wa-actions button#export-mp4{
  height:26px; box-sizing:border-box;
  padding:5px 9px;
  display:inline-flex; align-items:center; justify-content:center;
}
.wa-actions button.recording{
  border-color:#ff6b6b;
  color:#ff6b6b;
  background:rgba(255,107,107,.08);
  opacity:1; cursor:wait;
  padding-left:18px;
  position:relative;
}
.wa-actions button.recording::before{
  content:""; position:absolute;
  left:8px; top:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:#ff6b6b;
  transform:translateY(-50%);
  animation:wa-pulse 1s ease-in-out infinite;
}

/* ---------- MODE BUTTONS (Animate / Cursor) ---------- */
.wa-mode-btn{
  font-family:var(--kami-font); font-size:11px;
  background:transparent;
  color:var(--kami-ink);
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius);
  padding:4px 10px; cursor:pointer;
  height:26px; box-sizing:border-box;
  letter-spacing:.02em;
  transition:background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.wa-mode-btn:hover{
  background:var(--kami-accent-soft);
  border-color:var(--kami-border-strong);
  color:var(--kami-accent);
  box-shadow:var(--kami-glow);
}
.wa-mode-btn.active{
  background:var(--kami-accent);
  color:var(--kami-accent-ink);
  border-color:var(--kami-accent);
  box-shadow:var(--kami-glow-strong);
}

/* ---------- PANEL TOGGLE (desktop) ---------- */
@media (min-width:641px){
  body.panel-hidden .wg{ display:none; }
  body.panel-hidden .wa-stage{ right:0 !important; }
}

/* ---------- EFFECT NAV (compact mode chevron + name pill) ----------
   Floats top-left on effect subpages. The old wa-top wrapper is gone;
   .effect-nav.compact stands alone via position:fixed. */
.effect-nav{ display:none; }
.effect-nav.compact{
  position:fixed;
  top:12px; left:12px;
  display:flex; align-items:center; gap:6px;
  padding:5px;
  background:var(--kami-surface);
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius-lg);
  box-shadow:var(--kami-glow);
  font-family:var(--kami-font); font-size:11px;
  z-index:50;
  max-width:calc(100vw - 24px);
}
.effect-nav.compact .effect-nav-home{
  color:var(--kami-ink-dim);
  text-decoration:none;
  padding:0 4px;
  font-family:var(--kami-font); font-size:11px;
  letter-spacing:.02em;
  transition:color 120ms ease;
}
.effect-nav.compact .effect-nav-home:hover{ color:var(--kami-accent); }
.effect-nav.compact .effect-nav-sep{
  color:var(--kami-ink-faint);
  user-select:none;
  font-family:var(--kami-font); font-size:11px;
}

/* Fused switcher — prev / current / next as one segmented pill */
.effect-switcher{
  display:flex; align-items:stretch;
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius);
  overflow:hidden;
  flex:0 0 auto;
  height:26px;
  background:transparent;
  box-sizing:border-box;
}
.effect-switcher .effect-nav-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; padding:0; margin:0;
  height:100%; min-height:0; box-sizing:border-box;
  border:none; border-radius:0;
  color:var(--kami-ink-dim);
  text-decoration:none;
  font-family:var(--kami-font); font-size:13px;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
  transition:color 120ms ease, background 120ms ease;
}
.effect-switcher .effect-nav-arrow:first-child{ border-right:1px solid var(--kami-border); }
.effect-switcher .effect-nav-arrow:last-child{ border-left:1px solid var(--kami-border); }
.effect-switcher .effect-nav-arrow:hover{
  color:var(--kami-accent);
  background:var(--kami-accent-soft);
}
.effect-switcher .effect-nav-current{
  min-width:140px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
  border:none; border-radius:0;
  padding:4px 10px;
  font-family:var(--kami-font); font-size:11px;
  color:var(--kami-ink);
  letter-spacing:.02em;
  cursor:pointer;
  transition:background 120ms ease, color 120ms ease;
}
.effect-switcher .effect-nav-current:hover{
  background:var(--kami-accent-soft);
  color:var(--kami-accent);
}
.effect-switcher .effect-nav-name{ font-weight:500; }
.effect-switcher .effect-nav-chev{ display:none; }
@media (max-width:640px){
  .effect-switcher .effect-nav-current{ min-width:100px; }
}

/* ---------- NAV OVERLAY (⌘K / / / chevron-click) ---------- */
.pix-nav-overlay{
  position:fixed; inset:0;
  display:none;
  z-index:900;
  font-family:var(--kami-font);
}
.pix-nav-overlay.visible{ display:block; }
.pix-nav-overlay-bg{
  position:absolute; inset:0;
  background:rgba(10,15,13,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pix-nav-overlay-panel{
  position:absolute;
  top:80px; left:50%; transform:translateX(-50%);
  width:min(640px, calc(100vw - 32px));
  max-height:min(72vh, 640px);
  display:flex; flex-direction:column;
  background:var(--kami-surface);
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.55), var(--kami-glow);
  overflow:hidden;
  color:var(--kami-ink);
}
.pix-nav-overlay-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--kami-border);
}
.pix-nav-overlay-icon{
  font-family:var(--kami-font); font-size:13px;
  color:var(--kami-ink-dim);
}
.pix-nav-overlay-head input{
  flex:1; height:28px;
  background:transparent; border:0; outline:0;
  font-family:var(--kami-font); font-size:13px;
  color:var(--kami-ink);
  letter-spacing:.01em;
}
.pix-nav-overlay-head input::placeholder{ color:var(--kami-ink-faint); }
.pix-nav-overlay-close{
  background:transparent;
  color:var(--kami-ink-dim);
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius);
  padding:3px 8px;
  font-family:var(--kami-font); font-size:10px;
  letter-spacing:.05em; cursor:pointer;
  transition:color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.pix-nav-overlay-close:hover{
  color:var(--kami-accent);
  border-color:var(--kami-border-strong);
  background:var(--kami-accent-soft);
}

.pix-nav-overlay-body{
  flex:1; overflow-y:auto;
  padding:6px 14px 8px;
}
.pix-nav-overlay-body::-webkit-scrollbar{ width:8px; }
.pix-nav-overlay-body::-webkit-scrollbar-track{ background:transparent; }
.pix-nav-overlay-body::-webkit-scrollbar-thumb{
  background:var(--kami-border);
  border-radius:4px;
}
.pix-nav-overlay-body::-webkit-scrollbar-thumb:hover{ background:var(--kami-border-strong); }

.pix-nav-group{
  padding:8px 0 6px;
  border-bottom:1px dashed var(--kami-border);
}
.pix-nav-group:last-child{ border-bottom:0; }
.pix-nav-group-title{
  font-family:var(--kami-font); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--kami-ink-faint);
  margin-bottom:6px;
}
.pix-nav-group-items{
  display:flex; flex-wrap:wrap; gap:6px;
}
.pix-nav-item{
  display:inline-block;
  padding:5px 10px;
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius);
  color:var(--kami-ink-dim);
  text-decoration:none;
  font-family:var(--kami-font); font-size:11px;
  letter-spacing:.01em;
  transition:color 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.pix-nav-item:hover, .pix-nav-item:focus{
  color:var(--kami-accent); outline:0;
  border-color:var(--kami-border-strong);
  background:var(--kami-accent-soft);
  box-shadow:var(--kami-glow);
}
.pix-nav-item.active{
  color:var(--kami-accent-ink);
  background:var(--kami-accent);
  border-color:var(--kami-accent);
  box-shadow:var(--kami-glow-strong);
}
.pix-nav-overlay-foot{
  display:flex; gap:18px;
  padding:8px 14px;
  border-top:1px solid var(--kami-border);
  font-family:var(--kami-font); font-size:10px;
  color:var(--kami-ink-faint);
}
.pix-nav-overlay-foot kbd{
  display:inline-block;
  padding:1px 5px; margin:0 2px;
  border:1px solid var(--kami-border); border-radius:3px;
  background:var(--kami-surface-2);
  color:var(--kami-ink-dim);
  font-family:var(--kami-font); font-size:9.5px;
}
@media (max-width:640px){
  .pix-nav-overlay-panel{
    top:auto; bottom:0; left:0; transform:none;
    width:100%; max-height:80vh;
    border-radius:var(--kami-radius-lg) var(--kami-radius-lg) 0 0;
  }
}

/* ---------- SPLASH OVERLAY ---------- */
.wa-splash{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:
    radial-gradient(140% 100% at 50% -10%, #11201b 0%, rgba(10,15,13,.94) 60%),
    rgba(10,15,13,.88);
  color:var(--kami-ink);
  font-family:var(--kami-font);
  z-index:1000;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  cursor:pointer;
}
.wa-splash.visible{ display:flex; }
.wa-splash-inner{
  max-width:580px;
  padding:36px;
  text-align:center;
  background:var(--kami-surface);
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.55), var(--kami-glow);
  pointer-events:none;
}
.wa-splash-title{
  font-family:var(--kami-font);
  font-size:30px; font-weight:500;
  letter-spacing:.02em;
  color:var(--kami-accent);
  margin-bottom:8px;
  text-shadow:var(--kami-glow);
}
.wa-splash-tag{
  font-size:12px;
  color:var(--kami-ink-dim);
  margin-bottom:32px;
  font-family:var(--kami-font);
  letter-spacing:.04em;
}
.wa-splash-grid{
  display:grid; grid-template-columns:auto 1fr;
  gap:10px 24px;
  text-align:left;
  margin-bottom:32px;
  font-family:var(--kami-font);
  font-size:12px;
  line-height:1.5;
  color:var(--kami-ink);
}
.wa-splash-grid > span:nth-child(odd){ justify-self:end; color:var(--kami-ink-dim); }
.wa-splash-grid > span:nth-child(even){ color:var(--kami-ink); }
.wa-splash-grid kbd{
  display:inline-block;
  padding:2px 6px;
  margin:0 1px;
  background:var(--kami-surface-2);
  border:1px solid var(--kami-border);
  border-radius:3px;
  color:var(--kami-ink);
  font-family:var(--kami-font);
  font-size:11px;
  min-width:18px; text-align:center;
}
.wa-splash-tap{
  font-size:10px;
  color:var(--kami-ink-faint);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:var(--kami-font);
}

/* ---------- RECORDING OVERLAY ---------- */
.wa-rec{
  position:fixed;
  left:50%; bottom:24px;
  transform:translateX(-50%);
  z-index:80;
  background:var(--kami-surface);
  color:var(--kami-ink);
  padding:8px 14px;
  border:1px solid var(--kami-border);
  border-radius:var(--kami-radius);
  box-shadow:var(--kami-glow);
  font-family:var(--kami-font); font-size:11px;
  display:none; align-items:center; gap:10px;
}
.wa-rec.visible{ display:flex; }
.wa-rec .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#ff6b6b;
  animation:wa-pulse 1s ease-in-out infinite;
}
.wa-rec .track{
  width:120px; height:4px;
  background:var(--kami-surface-2);
  border:1px solid var(--kami-border);
  border-radius:2px;
  overflow:hidden;
}
.wa-rec .bar{
  width:0%; height:100%;
  background:var(--kami-accent);
  transition:width .25s linear;
}
@keyframes wa-pulse{
  0%, 100% { opacity:1; }
  50%      { opacity:.35; }
}

/* ---------- MOBILE (<= 640px) ---------- */
@media (max-width:640px){
  .wa-actions{
    top:8px; right:8px;
    padding:4px;
    gap:4px;
  }
  .wa-actions button{
    padding:0 10px;
    height:32px;
    min-width:32px;
    font-size:11px;
    letter-spacing:0;
  }
  .effect-nav.compact{
    top:8px; left:8px;
    padding:4px;
    max-width:calc(100vw - 16px);
  }
  .effect-nav.compact .effect-nav-home,
  .effect-nav.compact .effect-nav-sep{ display:none; }

  /* Splash: shrink title, stack the kbd grid single column */
  .wa-splash-inner{ padding:22px 18px; max-width:calc(100% - 24px); }
  .wa-splash-title{ font-size:24px; margin-bottom:6px; }
  .wa-splash-tag{ font-size:11px; margin-bottom:22px; }
  .wa-splash-grid{
    grid-template-columns:1fr;
    gap:14px 0;
    margin-bottom:22px;
    font-size:11px;
    text-align:center;
  }
  .wa-splash-grid > span:nth-child(odd){ justify-self:center; }
  .wa-splash-grid > span:nth-child(even){ margin-top:-8px; }

  /* Hide help button on mobile (stays desktop-only) */
  .wa-actions button#help-btn{ display:none; }
}