/* ─── pinock.io/japan — washi paper + sumi-ink theme ─────────────────────
   Loaded after style.css on japan.html. Override palette without touching base.
*/

:root {
  --japan-bg-paper:    #f4ead4;   /* washi cream */
  --japan-bg-deep:     #ede0c4;   /* slightly darker washi */
  --japan-ink:         #1a1814;   /* sumi black */
  --japan-ink-soft:    #5a4f42;   /* faded ink */
  --japan-accent:      #c1272d;   /* hi-no-maru red */
  --japan-accent-soft: rgba(193, 39, 45, 0.18);
  --japan-card:        rgba(255, 252, 242, 0.85);
  --japan-border:      rgba(26, 24, 20, 0.18);
  --japan-border-hot:  rgba(193, 39, 45, 0.55);
  --japan-text:        #1a1814;
  --japan-text-dim:    #6b5e4f;
}

body.japan-theme {
  /* Washi paper feel — base cream + subtle noise via radial gradient */
  background:
    radial-gradient(circle at 25% 18%, rgba(193, 39, 45, 0.04), transparent 36%),
    radial-gradient(circle at 78% 70%, rgba(120, 90, 60, 0.05), transparent 42%),
    var(--japan-bg-paper);
  color: var(--japan-text);
  min-height: 100vh;
}

/* ─── Topbar ─── */
body.japan-theme .topbar {
  background: linear-gradient(180deg,
    rgba(255, 252, 242, 0.96) 0%,
    rgba(244, 234, 212, 0.84) 100%);
  border-bottom: 1px solid var(--japan-border);
  backdrop-filter: blur(8px);
}
body.japan-theme .logo { color: var(--japan-ink); }
body.japan-theme .logo .dim {
  color: var(--japan-accent);
  font-weight: 400;
  margin-left: 2px;
}

/* ─── Search ─── */
body.japan-theme .search input {
  background: rgba(255, 252, 242, 0.85);
  border: 1px solid var(--japan-border);
  color: var(--japan-ink);
}
body.japan-theme .search input::placeholder { color: var(--japan-text-dim); }
body.japan-theme .search input:focus {
  border-color: var(--japan-accent);
  box-shadow: 0 0 0 3px var(--japan-accent-soft);
  outline: none;
}
body.japan-theme .search button {
  background: var(--japan-accent);
  color: white;
}

/* ─── Sort tabs (Latest / Liked) ─── */
body.japan-theme .sort-tabs {
  background: rgba(255, 252, 242, 0.85);
  border: 1px solid var(--japan-border);
}
body.japan-theme .sort-tab {
  color: var(--japan-text-dim);
  background: transparent;
}
body.japan-theme .sort-tab:hover {
  color: var(--japan-ink);
}
body.japan-theme .sort-tab.active {
  color: white;
  background: var(--japan-accent);
}

/* ─── Action buttons ─── */
body.japan-theme .ghost {
  color: var(--japan-text-dim);
  border: 1px solid var(--japan-border);
  background: transparent;
}
body.japan-theme .ghost:hover {
  color: var(--japan-ink);
  background: rgba(193, 39, 45, 0.06);
}

/* ─── Grid cards ─── */
body.japan-theme .grid > * {
  background: var(--japan-card);
  border: 1px solid var(--japan-border);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
body.japan-theme .grid > *:hover {
  transform: translateY(-2px);
  border-color: var(--japan-border-hot);
  box-shadow: 0 8px 24px rgba(26, 24, 20, 0.12);
}

/* ─── Modal ─── */
body.japan-theme .modal-content {
  background: var(--japan-bg-paper);
  border: 1px solid var(--japan-border);
  color: var(--japan-ink);
}
body.japan-theme .modal-content h2 { color: var(--japan-ink); }
body.japan-theme .caption { color: var(--japan-text-dim); }
body.japan-theme .action {
  background: rgba(255, 252, 242, 0.85);
  border: 1px solid var(--japan-border);
  color: var(--japan-ink);
}
body.japan-theme .action:hover {
  background: rgba(193, 39, 45, 0.08);
  border-color: var(--japan-border-hot);
}
body.japan-theme .action.primary {
  background: var(--japan-accent);
  border: 0;
  color: white;
  box-shadow: 0 3px 10px rgba(193, 39, 45, 0.3);
}

/* ─── Footer ─── */
body.japan-theme .foot {
  color: var(--japan-text-dim);
  border-top: 1px solid var(--japan-border);
}
body.japan-theme .foot a { color: var(--japan-accent); }

/* ─── Top-strip Hall of Fame ─── */
body.japan-theme .top-strip {
  background: linear-gradient(90deg,
    rgba(244, 234, 212, 0) 0%,
    rgba(193, 39, 45, 0.04) 50%,
    rgba(244, 234, 212, 0) 100%);
  border-bottom: 1px solid var(--japan-border);
}
body.japan-theme .top-arrow {
  background: rgba(255, 252, 242, 0.9);
  color: var(--japan-ink);
  border: 1px solid var(--japan-border);
}

/* ─── Status / load more ─── */
body.japan-theme .status { color: var(--japan-text-dim); }
body.japan-theme .load-more-btn {
  background: rgba(193, 39, 45, 0.1);
  border: 1px solid var(--japan-border);
  color: var(--japan-ink);
}
body.japan-theme .load-more-btn:hover {
  background: rgba(193, 39, 45, 0.18);
  border-color: var(--japan-border-hot);
}

/* ─── Tab-nav: red glow on active under cosmic-style press ─── */
body.japan-theme .tab-link.active img {
  filter: drop-shadow(0 0 8px rgba(193, 39, 45, 0.5))
          drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
          brightness(0.96);
}
body.japan-theme .tab-link:hover img {
  filter: drop-shadow(0 0 6px rgba(193, 39, 45, 0.4))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}