/* ═══════════════════════════════════════════════════════
   RUNA ENTERTAINMENT — SHARED DESIGN TOKENS v2
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {
  --ease: cubic-bezier(0.16,1,0.3,1);
  --clay:      #d97757;
  --clay-deep: #c4613e;
  --tt: background-color 0.28s ease, color 0.28s ease,
        border-color 0.28s ease, box-shadow 0.28s ease;
}

/* ── LIGHT (Anthropic.com) ── */
[data-theme="light"] {
  --bg:         #faf9f5;
  --bg-nav:     rgba(250,249,245,0.92);
  --bg-card:    #f0eee6;
  --bg-card2:   #e8e6dc;
  --bg-oat:     #e3dacc;
  --border:     #d1cfc5;
  --border-mid: #a8a69d;
  --text:       #141413;
  --text-mid:   #3d3d3a;
  --text-muted: #6b6a63;
  --text-faint: #a8a69d;
  --inv-bg:     #141413;
  --inv-text:   #f0eee6;
  --inv-muted:  rgba(240,238,230,0.62);
}

/* ── DARK (Claude interface) ── */
[data-theme="dark"] {
  --bg:         #1a1a18;
  --bg-nav:     rgba(26,26,24,0.94);
  --bg-card:    #222220;
  --bg-card2:   #2a2a28;
  --bg-oat:     #323230;
  --border:     #2e2e2c;
  --border-mid: #3e3e3a;
  --text:       #f0eee6;
  --text-mid:   #c8c6be;
  --text-muted: #8a8880;
  --text-faint: #5a5956;
  --inv-bg:     #f0eee6;
  --inv-text:   #141413;
  --inv-muted:  rgba(20,20,19,0.6);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:var(--tt);
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--bg-nav);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:var(--tt),box-shadow 0.3s ease;
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  padding:0 36px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-logo{
  font-family:'DM Serif Display',serif;
  font-size:1.1rem;letter-spacing:-0.01em;
  color:var(--text);text-decoration:none;
  white-space:nowrap;flex-shrink:0;
}
.nav-logo .dot{color:var(--clay)}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{
  font-size:0.84rem;font-weight:500;
  color:var(--text-muted);text-decoration:none;
  transition:color 0.2s;
}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Theme pill */
.theme-pill{
  display:flex;align-items:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:100px;padding:3px;gap:2px;
  transition:var(--tt);
}
.theme-opt{
  border:none;background:none;cursor:pointer;
  border-radius:100px;padding:4px 11px;
  font-family:'DM Sans',sans-serif;
  font-size:0.72rem;font-weight:600;letter-spacing:0.04em;
  color:var(--text-faint);
  display:flex;align-items:center;gap:4px;
  transition:background 0.22s,color 0.22s;
}
.theme-opt svg{
  width:11px;height:11px;flex-shrink:0;
  stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
[data-theme="light"] .theme-opt.is-light,
[data-theme="dark"]  .theme-opt.is-dark{background:var(--text);color:var(--bg)}

/* Nav user avatar (shown when logged in) */
.nav-avatar{
  width:32px !important;height:32px !important;
  border-radius:50% !important;
  object-fit:cover !important;cursor:pointer;
  border:2px solid var(--border);
  flex-shrink:0;
  transition:border-color 0.2s;
  display:block;
}
.nav-avatar:hover{border-color:var(--clay)}

/* Nav auth buttons */
.nav-btn-ghost{
  font-size:0.82rem;font-weight:500;
  color:var(--text);background:transparent;
  border:1.5px solid var(--border);border-radius:100px;
  padding:7px 18px;cursor:pointer;text-decoration:none;
  transition:border-color 0.2s,background 0.2s;white-space:nowrap;
}
.nav-btn-ghost:hover{border-color:var(--border-mid);background:var(--bg-card)}
.nav-btn-solid{
  font-size:0.82rem;font-weight:500;
  color:var(--bg);background:var(--text);
  border:none;border-radius:100px;
  padding:8px 20px;cursor:pointer;text-decoration:none;
  transition:opacity 0.2s;white-space:nowrap;
}
.nav-btn-solid:hover{opacity:0.75}

/* ── BUTTONS ── */
.btn-solid{
  font-family:'DM Sans',sans-serif;font-size:0.9rem;font-weight:500;
  color:var(--bg);background:var(--text);
  border:none;border-radius:100px;
  padding:13px 28px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:opacity 0.2s;line-height:1;
}
.btn-solid:hover{opacity:0.75}
.btn-outline{
  font-family:'DM Sans',sans-serif;font-size:0.9rem;font-weight:500;
  color:var(--text);background:transparent;
  border:1.5px solid var(--border);border-radius:100px;
  padding:13px 28px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color 0.2s,background 0.2s;line-height:1;
}
.btn-outline:hover{border-color:var(--border-mid);background:var(--bg-card)}

/* ── MISC ── */
.hr{width:100%;height:1px;background:var(--border);transition:var(--tt)}
.eyebrow{
  font-size:0.7rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--clay);margin-bottom:18px;
}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:56px 36px 40px;transition:var(--tt)}
.footer-inner{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.footer-brand{font-family:'DM Serif Display',serif;font-size:1.05rem;color:var(--text);margin-bottom:8px}
.footer-brand .dot{color:var(--clay)}
.footer-tag{font-size:0.82rem;font-weight:300;color:var(--text-muted);max-width:190px;line-height:1.6}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col-label{
  font-size:0.67rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:2px;
}
.footer-col a{font-size:0.84rem;color:var(--text-muted);text-decoration:none;transition:color 0.2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{
  max-width:1200px;margin:40px auto 0;
  padding-top:22px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.footer-copy{font-size:0.77rem;color:var(--text-faint)}
.footer-copy a{color:var(--text-faint) !important;text-decoration:none}
.footer-copy a:hover{color:var(--text-muted) !important}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:28px;right:28px;z-index:9999;
  background:var(--text);color:var(--bg);
  font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:500;
  padding:12px 20px;border-radius:10px;
  box-shadow:0 4px 24px rgba(0,0,0,0.18);
  opacity:0;transform:translateY(8px);
  transition:opacity 0.3s,transform 0.3s;
  pointer-events:none;max-width:320px;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:#c0392b;color:#fff}
.toast.success{background:#1a8c2a;color:#fff}

/* ── RESPONSIVE ── */
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:600px){
  .nav-inner{padding:0 20px}
  .theme-pill{display:none}
}

/* ── Hide native browser password reveal icon (all browsers) ── */
input[type="password"]::-ms-reveal { display:none !important; width:0 !important; }
input[type="password"]::-ms-clear { display:none !important; }
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button { display:none !important; visibility:hidden !important; pointer-events:none !important; }
/* Chrome specific - hide the native eye */
input[type="password"] { -webkit-text-security: disc; }

/* ── Scroll margin for anchor targets (accounts for fixed nav) ── */
[id] { scroll-margin-top: 84px; }

/* ── pwd-toggle: always use theme text color, never hard black ── */
.pwd-toggle { color: var(--text-faint) !important; }
.pwd-toggle:hover { color: var(--text-muted) !important; }