/* ============================================================
   KAZE 風 — "Anti-Design" style kit
   Flat high-saturation primaries only. 4-8px solid borders.
   Hard offset shadows. Zero radius. Zero gradients. Zero polish.
   Layout intentionally breaks. Interactions are aggressive.
   Dark by default (semantic vars; light mode is a future one-var swap).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@500;700&family=VT323&display=swap');

:root {
  /* the entire palette — nothing else is allowed */
  --red: #FF0000;
  --blue: #0000FF;
  --yellow: #FFFF00;
  --magenta: #FF00FF;
  --green: #00FF00;
  --cyan: #00FFFF;
  --black: #000000;
  --white: #FFFFFF;

  /* semantic surface vars — dark mode is the default.
     Swap this block for a light palette and the whole site follows. */
  --bg: #0B0B0B;          /* page background (near-black) */
  --surface: #171717;     /* neutral card/box surfaces */
  --fg: #F0F0F0;          /* default text on dark surfaces */
  --ink: #000000;         /* text/borders ON bright primary surfaces */
  --border: #E8E8E8;      /* border ink visible on dark surfaces */
  --text-dim: #9C9C9C;    /* muted text (e.g. "not logged in") */
  --accent-2: var(--magenta); /* warning/message accent */

  /* fonts (banned list: Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans) */
  --font-display: 'Anton', 'Arial Black', sans-serif;
  --font-body: 'Space Grotesk', 'Arial', sans-serif;
  --font-term: 'VT323', monospace;

  /* near-zero, linear-only motion */
  --t-snap: 0.08s linear;
  --t-hard: 0.15s linear;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 700;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--black); color: var(--yellow); }

/* blocky scrollbar */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--bg); border-top: 3px solid var(--border); }
::-webkit-scrollbar-thumb {
  background: var(--yellow);
  border: 3px solid var(--black);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--magenta); }

a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 3px; }
a:hover { background: var(--yellow); color: var(--black); }

/* ================= app shell ================= */

.app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 150px;
  position: relative;
}

main > div {
  animation: screen-slam 0.12s linear both;
}

@keyframes screen-slam {
  from { opacity: 0; transform: translateX(-30px) rotate(-2deg); }
  to   { opacity: 1; transform: none; }
}

/* ================= topbar ================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 14px;
  background: var(--bg);
  border-bottom: 6px solid var(--border);
}

.brand {
  position: relative;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 6px 14px 8px;
  border: 4px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  transform: rotate(-2deg);
  cursor: pointer;
  user-select: none;
  letter-spacing: 1px;
}

.nav-btn {
  background: var(--surface);
  border: 4px solid var(--border);
  color: var(--fg);
  padding: 8px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 5px 5px 0 var(--black);
  transition: all var(--t-snap);
}
.nav-btn:nth-of-type(1) { transform: rotate(-1deg); }
.nav-btn:nth-of-type(2) { transform: rotate(1.2deg); }
.nav-btn:nth-of-type(3) { transform: rotate(-0.6deg); }
.nav-btn:hover {
  background: var(--magenta);
  color: var(--black);
  border-width: 6px;
  box-shadow: 9px 9px 0 var(--black);
  transform: translate(-2px, -2px) rotate(0deg);
}
.nav-btn:active {
  box-shadow: none;
  transform: translate(5px, 5px);
}
.nav-btn.active {
  background: var(--black);
  color: var(--yellow);
  border-color: var(--black);
  box-shadow: 7px 7px 0 var(--red);
  transform: rotate(0.5deg);
}
.nav-btn.active:hover { background: var(--black); color: var(--white); border-width: 4px; }

.topbar-spacer { flex: 1; }

.user-chip {
  font-family: var(--font-term);
  font-size: 19px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--green);
  border: 4px solid var(--black);
  padding: 2px 10px;
  transform: rotate(1deg);
  box-shadow: 4px 4px 0 var(--black);
}

/* ================= section titles ================= */

.section-title {
  font-family: var(--font-display);
  font-size: 34px;
  text-transform: uppercase;
  margin: 34px 0 20px;
  color: var(--ink);
  background: var(--yellow);
  border: 4px solid var(--black);
  box-shadow: 7px 7px 0 var(--black);
  padding: 6px 14px;
  width: fit-content;
  transform: rotate(-1deg);
  position: relative;
}
.section-title:nth-of-type(2n) { transform: rotate(1.2deg); background: var(--cyan); }

.section-title .hint {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: none;
  color: var(--fg);
  background: var(--surface);
  border: 3px solid var(--border);
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ================= cards ================= */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 30px 22px;
}

.media-card {
  position: relative;
  background: var(--surface);
  border: 4px solid var(--border);
  box-shadow: 8px 8px 0 var(--black);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all var(--t-snap);
  /* backwards fill: hold the "from" state during the delay, then let the
     static nth-child transforms take over (both would pin transform:none) */
  animation: card-slam 0.1s linear backwards;
}
/* alternating surfaces + deliberate misalignment; bright surfaces carry
   black ink, dark surfaces carry light ink */
.media-card:nth-child(1)  { background: var(--yellow); color: var(--ink); transform: rotate(-2deg); }
.media-card:nth-child(2)  { background: var(--cyan);   color: var(--ink); transform: rotate(1.5deg); }
.media-card:nth-child(3)  { background: var(--magenta); color: var(--ink); transform: rotate(-1.2deg); }
.media-card:nth-child(4)  { background: var(--green);   color: var(--ink); transform: rotate(2deg); }
.media-card:nth-child(5)  { background: var(--surface); color: var(--fg); transform: rotate(-1.5deg); }
.media-card:nth-child(6)  { background: var(--yellow);  color: var(--ink); transform: rotate(1deg); }
.media-card:nth-child(7)  { background: var(--cyan);    color: var(--ink); transform: rotate(-2deg); }
.media-card:nth-child(8)  { background: var(--magenta); color: var(--ink); transform: rotate(1.3deg); }
.media-card:nth-child(n+9){ background: var(--surface); color: var(--fg); transform: rotate(-1deg); }

@keyframes card-slam {
  from { opacity: 0; transform: translateY(-20px) rotate(-4deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.media-card:nth-child(1)  { animation-delay: 0.02s; }
.media-card:nth-child(2)  { animation-delay: 0.05s; }
.media-card:nth-child(3)  { animation-delay: 0.08s; }
.media-card:nth-child(4)  { animation-delay: 0.11s; }
.media-card:nth-child(5)  { animation-delay: 0.14s; }
.media-card:nth-child(6)  { animation-delay: 0.17s; }
.media-card:nth-child(7)  { animation-delay: 0.20s; }
.media-card:nth-child(8)  { animation-delay: 0.23s; }
.media-card:nth-child(n+9){ animation-delay: 0.26s; }

/* aggressive hover: collision + offset jump */
.media-card:hover {
  border-width: 7px;
  box-shadow: 13px 13px 0 var(--blue);
  transform: translate(-4px, -4px) rotate(0deg) scale(1.02);
  z-index: 2;
}
.media-card:active {
  box-shadow: none;
  transform: translate(8px, 8px) rotate(1deg);
}

.media-card .cover {
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--surface);
  display: block;
  border-bottom: 4px solid var(--border);
  filter: saturate(1.4);
  transition: all var(--t-snap);
}
.media-card:hover .cover {
  transform: translate(4px, 4px) scale(1.04);
  filter: none;
}

.media-card .cover.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  font-size: 12px;
  padding: 8px;
  text-align: center;
  font-family: var(--font-term);
}

.media-card .meta { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.media-card .title {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1.1;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
  transition: all var(--t-snap);
}
.media-card:hover .title {
  background: var(--black);
  color: var(--yellow);
  padding: 2px 4px;
  transform: rotate(-1deg);
}
.media-card .sub {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  font-family: var(--font-term);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.media-card .badge {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  border: 3px solid var(--black);
  padding: 2px 8px;
  align-self: flex-start;
  box-shadow: 3px 3px 0 var(--black);
}
.media-card .badge.green { background: var(--green); color: var(--black); }

/* ================= empty state ================= */

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink);
  border: 4px dashed var(--black);
  background: var(--yellow);
  box-shadow: 8px 8px 0 var(--black);
  transform: rotate(-1deg);
  max-width: 70ch;
  margin: 0 auto;
}
.empty-state::before {
  content: '!';
  display: block;
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--white);
  background: var(--red);
  border: 4px solid var(--black);
  width: 64px;
  height: 64px;
  line-height: 56px;
  margin: 0 auto 12px;
  box-shadow: 5px 5px 0 var(--black);
}
.empty-state p { margin: 8px 0; }

/* ================= search ================= */

.search-row {
  display: flex;
  gap: 14px;
  margin: 26px 0;
  align-items: stretch;
}

.search-input {
  flex: 1;
  background: var(--surface);
  border: 4px solid var(--border);
  color: var(--fg);
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-body);
  outline: none;
  caret-color: var(--red);
  box-shadow: 6px 6px 0 var(--black);
  transition: all var(--t-snap);
}
.search-input::placeholder { color: var(--text-dim); opacity: 1; }
/* focus is louder than default */
.search-input:focus {
  border-width: 6px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--blue);
  transform: translate(-2px, -2px);
}
.search-input:focus::placeholder { color: var(--ink); opacity: 0.55; }

.btn {
  position: relative;
  background: var(--black);
  color: var(--yellow);
  border: 4px solid var(--black);
  padding: 12px 26px;
  font-size: 16px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 7px 7px 0 var(--red);
  transition: all var(--t-snap);
}
.btn:hover {
  background: var(--red);
  color: var(--white);
  border-width: 6px;
  box-shadow: 11px 11px 0 var(--black);
  transform: translate(-3px, -3px) rotate(-1deg);
}
.btn:active {
  box-shadow: none;
  transform: translate(7px, 7px) rotate(1deg);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.ghost {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border);
  box-shadow: 5px 5px 0 var(--black);
}
.btn.ghost:hover {
  background: var(--cyan);
  color: var(--ink);
  border-width: 6px;
  box-shadow: 8px 8px 0 var(--black);
}
.btn.danger { background: var(--red); color: var(--white); box-shadow: 7px 7px 0 var(--black); }
.btn.danger:hover { background: var(--black); color: var(--red); }

/* ================= series detail ================= */

.detail-header {
  display: flex;
  gap: 28px;
  margin: 24px 0 32px;
  align-items: flex-start;
  position: relative;
}

.detail-cover {
  width: 190px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--surface);
  flex-shrink: 0;
  border: 5px solid var(--border);
  box-shadow: 10px 10px 0 var(--magenta);
  filter: saturate(1.4);
}

.detail-title {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ink);
  background: var(--yellow);
  border: 4px solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
  padding: 8px 14px 10px;
  transform: rotate(-1.5deg);
  width: fit-content;
  max-width: 100%;
}

.detail-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 16px; }
.tag {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg);
  background: var(--surface);
  border: 3px solid var(--border);
  padding: 3px 10px;
  box-shadow: 4px 4px 0 var(--black);
  transition: all var(--t-snap);
}
.tag:nth-child(4n)   { background: var(--cyan); color: var(--ink); }
.tag:nth-child(4n+1) { background: var(--magenta); color: var(--ink); }
.tag:nth-child(4n+2) { background: var(--green); color: var(--ink); }
.tag:hover {
  background: var(--black);
  color: var(--yellow);
  border-width: 5px;
  transform: translate(-2px, -2px) rotate(-2deg);
  box-shadow: 7px 7px 0 var(--red);
}

.detail-desc {
  color: var(--fg);
  font-size: 15px;
  line-height: 1.55;
  max-height: 170px;
  overflow-y: auto;
  white-space: pre-line;
  margin: 0;
  padding-right: 10px;
  max-width: 70ch;
}

/* ================= episode grid ================= */

.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 18px 14px;
}

.ep-btn {
  position: relative;
  background: var(--surface);
  border: 4px solid var(--border);
  color: var(--fg);
  padding: 12px 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 6px 6px 0 var(--black);
  transition: all var(--t-snap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ep-btn:nth-child(5n)   { background: var(--yellow); color: var(--ink); transform: rotate(1.5deg); }
.ep-btn:nth-child(5n+1) { background: var(--cyan);   color: var(--ink); transform: rotate(-1.5deg); }
.ep-btn:nth-child(5n+2) { background: var(--magenta); color: var(--ink); transform: rotate(1deg); }
.ep-btn:nth-child(5n+3) { background: var(--green);   color: var(--ink); transform: rotate(-1deg); }
.ep-btn:nth-child(5n+4) { background: var(--surface); color: var(--fg); transform: rotate(2deg); }
.ep-btn:hover {
  background: var(--black);
  color: var(--yellow);
  border-width: 7px;
  box-shadow: 10px 10px 0 var(--magenta);
  transform: translate(-3px, -3px) rotate(0deg);
}
.ep-btn:active {
  box-shadow: none;
  transform: translate(6px, 6px) rotate(2deg);
}

.ep-btn .ep-sub {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  font-family: var(--font-body);
  text-transform: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-btn:hover .ep-sub { color: var(--yellow); }
.ep-btn.has-progress {
  background: var(--green);
  border-width: 6px;
  box-shadow: 5px 5px 0 var(--black);
}

/* ================= settings ================= */

.settings-card {
  background: var(--surface);
  border: 4px solid var(--border);
  box-shadow: 9px 9px 0 var(--blue);
  padding: 22px;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 660px;
  border-top: 10px solid var(--border);
}
.settings-card:nth-of-type(2n) { box-shadow: 9px 9px 0 var(--magenta); }
.settings-card:nth-of-type(3n) { box-shadow: 9px 9px 0 var(--green); transform: rotate(0.5deg); }
.settings-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  border: 3px solid var(--black);
  padding: 4px 10px;
  width: fit-content;
  box-shadow: 4px 4px 0 var(--red);
}
.settings-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.settings-input {
  background: var(--surface);
  border: 4px solid var(--border);
  color: var(--fg);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  flex: 1;
  min-width: 220px;
  outline: none;
  caret-color: var(--magenta);
  box-shadow: 4px 4px 0 var(--black);
  transition: all var(--t-snap);
}
.settings-input:focus {
  border-width: 6px;
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--red);
  transform: translate(-2px, -2px);
}
select.settings-input { flex: 0 1 auto; }
.settings-note {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.5;
  margin: 0;
  max-width: 70ch;
}
.settings-note code {
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--black);
  padding: 0 6px;
  font-family: var(--font-term);
  font-size: 16px;
}

/* ================= player dock ================= */

.player-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: min(1060px, calc(100vw - 32px));
  background: var(--surface);
  border: 6px solid var(--border);
  box-shadow: 12px 12px 0 var(--black);
  padding: 14px 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: dock-in 0.12s linear;
}
@keyframes dock-in {
  from { transform: translate(-50%, 30px) rotate(2deg); opacity: 0; }
  to   { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
}

.player-dock .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.player-dock .file {
  font-family: var(--font-term);
  font-size: 19px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--black);
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 45vw;
}

.phase {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--black);
  padding: 2px 10px;
  box-shadow: 4px 4px 0 var(--black);
}
.phase.ok {
  color: var(--ink);
  background: var(--green);
}
.phase.err {
  color: var(--white);
  background: var(--red);
}

.player-dock .stats {
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--fg);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.bar {
  height: 14px;
  background: var(--bg);
  border: 3px solid var(--border);
  overflow: hidden;
  flex: 1;
  min-width: 140px;
}
.bar .fill {
  height: 100%;
  background: var(--magenta);
  transition: width var(--t-hard);
}
.bar .fill.torrent { background: var(--green); }

.player-slot { margin-top: 8px; }
.player-slot video {
  border: 5px solid var(--border);
  box-shadow: 9px 9px 0 var(--blue);
  animation: video-in 0.1s linear;
}
@keyframes video-in {
  from { opacity: 0; transform: scale(0.95) rotate(-1deg); }
  to   { opacity: 1; transform: none; }
}

/* ================= notice toast ================= */

.notice {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 80;
  background: var(--yellow);
  border: 5px solid var(--black);
  color: var(--ink);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  max-width: 380px;
  box-shadow: 9px 9px 0 var(--black);
  animation: notice-in 0.1s linear;
}
.notice.err {
  background: var(--red);
  color: var(--white);
  border-width: 6px;
  box-shadow: 9px 9px 0 var(--yellow);
  animation: notice-in 0.1s linear;
}
.notice .x { margin-left: 10px; cursor: pointer; font-weight: 700; }
.notice .x:hover { background: var(--black); color: var(--yellow); display: inline-block; transform: rotate(6deg); }
@keyframes notice-in {
  from { opacity: 0; transform: translateX(50px) rotate(3deg); }
  to   { opacity: 1; transform: none; }
}

/* ================= misc ================= */

.spinner {
  width: 34px;
  height: 34px;
  border: 5px solid var(--border);
  background: var(--surface);
  animation: spin 0.5s steps(8) infinite;
  margin: 44px auto;
  box-shadow: 6px 6px 0 var(--black);
}
.spinner::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: var(--yellow);
}
@keyframes spin { to { transform: rotate(360deg); } }

.back-link {
  display: inline-block;
  margin: 20px 0 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--fg);
  font-family: var(--font-display);
  text-transform: uppercase;
  background: var(--surface);
  border: 3px solid var(--border);
  padding: 4px 10px;
  box-shadow: 4px 4px 0 var(--black);
  transition: all var(--t-snap);
}
.back-link:hover {
  background: var(--cyan);
  color: var(--ink);
  border-width: 5px;
  box-shadow: 7px 7px 0 var(--black);
  transform: translate(-2px, -2px);
}

/* ================= reduced motion ================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}