/**
 * base.css — ŘΨØŬ v2.1.0
 * Reset, typography, utility, animation, scrollbar
 */

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  {
  font-family : var(--font-sans);
  font-size   : var(--font-size-base);
  background  : var(--bg-base);
  color       : var(--txt-primary);
  line-height : 1.6;
  min-height  : 100vh;
  overflow-x  : hidden;
  -webkit-font-smoothing: antialiased;
}
img   { display: block; max-width: 100%; }
a     { text-decoration: none; color: inherit; }
button{ cursor: pointer; border: none; background: none; font-family: var(--font-sans); color: inherit; }
input,select,textarea { font-family: var(--font-sans); }

/* Bootstrap dark theme — sync body colors to our design tokens */
[data-bs-theme="dark"] {
  --bs-body-bg         : var(--bg-base);
  --bs-body-color      : var(--txt-primary);
  --bs-secondary-color : var(--txt-secondary);
  --bs-border-color    : var(--bdr-subtle);
  --bs-link-color      : var(--clr-accent);
  --bs-link-hover-color: var(--clr-accent-vivid);
  color-scheme         : dark;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-raised); }
::-webkit-scrollbar-thumb { background: var(--bdr-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-accent-dim); }

/* ── Animations ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; }                             to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.96); }       to { opacity:1; transform:none; } }
@keyframes slideInL { from { transform:translateX(-100%); }           to { transform:none; } }
@keyframes slideInR { from { transform:translateX(100%); }            to { transform:none; } }
@keyframes slideInU { from { transform:translateY(100%); }            to { transform:none; } }
@keyframes pulse    { 0%,100%{opacity:.35;transform:scale(.8);}  50%{opacity:1;transform:scale(1.15);} }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes shimmer  { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes toastIn  { from{opacity:0;transform:translateX(24px);} to{opacity:1;transform:none;} }
@keyframes toastOut { from{opacity:1;} to{opacity:0;transform:translateX(24px);} }

/* ── Utility classes ── */
.fade-up  { animation: fadeUp  var(--dur-slow) var(--ease) both; }
.fade-in  { animation: fadeIn  var(--dur-base) var(--ease) both; }
.scale-in { animation: scaleIn var(--dur-base) var(--ease) both; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.text-accent   { color: var(--clr-accent); }
.text-muted    { color: var(--txt-secondary); }
.text-dim      { color: var(--txt-tertiary); }
.text-truncate { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Skeleton shimmer ── */
.skeleton { background: linear-gradient(90deg, var(--bg-float) 25%, var(--bg-raised) 50%, var(--bg-float) 75%); background-size:200%; animation: shimmer 1.6s ease-in-out infinite; border-radius: var(--r-sm); }

/* ── Scrollable track (horizontal scroll, hide bar) ── */
.scroll-x { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.scroll-x::-webkit-scrollbar { display:none; }

/* ── Badge base ── */
.badge-ryou {
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--font-size-xs); font-weight:700;
  padding:3px 9px; border-radius:var(--r-sm);
  line-height:1.4;
}
.badge-accent   { background:var(--clr-accent-subtle); color:var(--clr-accent); border:1px solid var(--clr-accent-border); }
.badge-success  { background:rgba(34,197,94,.12);  color:var(--clr-success); border:1px solid rgba(34,197,94,.25); }
.badge-warning  { background:rgba(245,158,11,.12); color:var(--clr-warning); border:1px solid rgba(245,158,11,.25); }
.badge-danger   { background:rgba(239,68,68,.12);  color:var(--clr-danger);  border:1px solid rgba(239,68,68,.25); }
.badge-ghost    { background:var(--bg-float); color:var(--txt-secondary); border:1px solid var(--bdr-subtle); }

/* ── Button base ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:10px 20px; border-radius:var(--r-pill);
  font-size:var(--font-size-sm); font-weight:600; white-space:nowrap;
  transition:all var(--dur-base) var(--ease); cursor:pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--clr-accent); color: var(--txt-inverse); border-color: var(--clr-accent);
}
.btn-primary:hover { background: var(--clr-accent-vivid); transform:translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-primary:active { transform:translateY(0); }

.btn-outline {
  background: transparent; color: var(--txt-primary); border-color: var(--bdr-strong);
}
.btn-outline:hover { background: var(--clr-accent-subtle); border-color: var(--clr-accent); color: var(--clr-accent); }

.btn-ghost {
  background: var(--bg-float); color: var(--txt-secondary); border-color: var(--bdr-subtle);
}
.btn-ghost:hover { color: var(--clr-accent); border-color: var(--bdr-mid); background: var(--clr-accent-subtle); }

.btn-danger  { background: var(--clr-danger); color: #fff; border-color: var(--clr-danger); }
.btn-sm      { padding: 6px 14px; font-size: var(--font-size-xs); }
.btn-lg      { padding: 13px 28px; font-size: var(--font-size-md); }
.btn-icon    { padding: 8px; border-radius: var(--r-md); width:36px; height:36px; }
.btn:disabled, .btn[disabled] { opacity:.4; pointer-events:none; cursor:not-allowed; }

/* ── Input ── */
.input-ryou {
  width:100%; padding:9px 14px; border-radius:var(--r-md);
  background:var(--bg-float); border:1px solid var(--bdr-subtle);
  color:var(--txt-primary); font-size:var(--font-size-sm);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline:none;
}
.input-ryou::placeholder { color: var(--txt-tertiary); }
.input-ryou:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-glow); }

/* ── Card ── */
.card-ryou {
  background: var(--srf-01); border: 1px solid var(--bdr-subtle);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base), box-shadow var(--dur-base);
}
.card-ryou:hover { transform:translateY(-4px); border-color:var(--bdr-strong); box-shadow:0 8px 32px rgba(34,211,238,.12); }

/* ── Divider ── */
.divider { height:1px; background:var(--bdr-subtle); }

/* ── Section header ── */
.section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.section-hd h2 { font-size:var(--font-size-lg); font-weight:700; }
.section-hd .count { font-size:var(--font-size-sm); color:var(--txt-secondary); margin-left:6px; font-weight:400; }

/* ── Poster ratio ── */
.poster-wrap { position:relative; overflow:hidden; }
.poster-2-3  { aspect-ratio:2/3; }
.poster-16-9 { aspect-ratio:16/9; }
.poster-wrap img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── Overlay ── */
.overlay-dark { position:absolute; inset:0; background:rgba(0,0,0,.5); transition:opacity var(--dur-base); }

/* ── Toast ── */
#toast-area { position:fixed; bottom:24px; right:20px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--r-md);
  background:var(--srf-02); border:1px solid var(--bdr-strong);
  box-shadow:var(--shadow-lg); pointer-events:all;
  font-size:var(--font-size-sm); max-width:320px;
  animation:toastIn .25s var(--ease) both;
}
.toast-item.out { animation:toastOut .2s var(--ease) both; }
.toast-item.success { border-color:rgba(34,197,94,.35); }
.toast-item.error   { border-color:rgba(239,68,68,.35); }
.toast-icon { flex-shrink:0; font-size:16px; }

/* ── Backdrop ── */
.backdrop {
  position:fixed; inset:0; z-index:var(--z-overlay);
  background:rgba(0,0,0,.7); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base);
}
.backdrop.show { opacity:1; pointer-events:all; }

/* Version number — mono font, tight tracking, used everywhere */
.ver {
  font-family   : var(--font-mono);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}