@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=JetBrains+Mono:wght@500;700&display=swap');

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #F7F7F8;
}
#root {
  height: 100%;
  overflow: hidden;
}
button, input {
  font: inherit;
}
a { color: inherit; }

/* ============================================================
   DESIGN TOKENS
   Palette: paper white + ink indigo + hanko seal red + bamboo
   green + soft gold, evoking Japanese stationery / practice
   sheets rather than a generic SaaS look.
   Type: Shippori Mincho (calligraphic display, kanji), Zen Kaku
   Gothic New (UI body), JetBrains Mono (numeric stats).
   ============================================================ */
.kj-root {
  --c-paper: #F7F7F8;
  --c-surface: #FFFFFF;
  --c-ink: #18181F;
  --c-ink-soft: #6B6B76;
  --c-indigo: #4338CA;
  --c-indigo-2: #6D28D9;
  --c-seal: #E11D48;
  --c-bamboo: #15803D;
  --c-gold: #D97706;
  --c-line: #E7E7EC;
  --grad-primary: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-indigo-2) 100%);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--c-ink);
}
.kj-root * { box-sizing: border-box; }
.f-display { font-family: 'Shippori Mincho', serif; }
.f-mono { font-family: 'JetBrains Mono', monospace; }
.kj-scroll::-webkit-scrollbar { width: 0; height: 0; }
.kj-scroll { overflow-x: hidden; }

ruby { ruby-position: over; }
.kj-root rt { font-size: 0.62em; color: var(--c-ink-soft); font-family: 'Zen Kaku Gothic New', sans-serif; }

/* ============================================================
   APP SHELL (full-viewport PWA layout, no phone-frame mockup)
   ============================================================ */
.kj-app-shell {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  background: var(--c-paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 640px) {
  body {
    background:
      radial-gradient(circle at 15% 10%, rgba(67,56,202,0.07), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(225,29,72,0.05), transparent 45%),
      #EDEDF0;
    overflow: auto;
  }
  .kj-app-shell {
    margin: 16px auto;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(24,24,31,0.16), 0 2px 8px rgba(24,24,31,0.06);
    border: 1px solid var(--c-line);
  }
}

.kj-app-body {
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* Direct flex children that host their own internal scroll (e.g. the
   Home screen, which sits directly in the shell with no TopBar/body
   wrapper) need min-height: 0 too, or a flex column parent will let
   them grow to their content size instead of scrolling internally. */
.kj-app-shell > .kj-scroll {
  flex: 1;
  min-height: 0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes kj-stamp { 0% { transform: scale(2.2) rotate(-18deg); opacity: 0; } 60% { transform: scale(0.92) rotate(-4deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.kj-stamp-anim { animation: kj-stamp 0.45s ease-out; }

@keyframes kj-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.kj-fade-up { animation: kj-fade-up 0.25s ease-out; }

.kj-flip-outer { perspective: 1200px; }
.kj-flip-inner { position: relative; transition: transform 0.45s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.kj-flip-inner.is-flipped { transform: rotateY(180deg); }
.kj-flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.kj-flip-back { transform: rotateY(180deg); }

/* ============================================================
   MODERN POLISH
   Soft elevation, smooth hover/press feedback, and refined nav
   chrome layered on top of the existing inline styles.
   ============================================================ */
.kj-app-shell button {
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.kj-app-shell button:active:not(:disabled) {
  transform: scale(0.96);
}
.kj-app-shell button:focus-visible {
  outline: 2px solid var(--c-indigo);
  outline-offset: 2px;
}
.kj-app-shell button:disabled {
  cursor: default;
}

.kj-card, .kj-kanji-grid-card {
  box-shadow: 0 1px 2px rgba(28,35,51,0.04);
}
@media (hover: hover) {
  .kj-card:hover, .kj-kanji-grid-card:hover {
    box-shadow: 0 8px 20px rgba(28,35,51,0.10);
    transform: translateY(-2px);
    border-color: #D8D3C2 !important;
  }
}
.kj-card:active, .kj-kanji-grid-card:active {
  box-shadow: 0 1px 2px rgba(28,35,51,0.05) !important;
  transform: translateY(0) scale(0.98) !important;
}

/* Fallback elevation for surface-toned buttons/cards that don't
   carry an explicit className (covers the many one-off cards
   throughout detail screens, setup screens, and overlays). */
.kj-app-shell button[style*="var(--c-surface)"]:not(.kj-card):not(.kj-kanji-grid-card):not(.kj-icon-btn) {
  box-shadow: 0 1px 2px rgba(28,35,51,0.04);
}
@media (hover: hover) {
  .kj-app-shell button[style*="var(--c-surface)"]:hover:not(:disabled) {
    filter: brightness(0.985);
  }
  .kj-app-shell button[style*="var(--grad-primary)"]:hover:not(:disabled) {
    filter: brightness(1.08);
  }
}
.kj-app-shell button[style*="var(--grad-primary)"]:active:not(:disabled) {
  filter: brightness(0.92);
}

.kj-chip:active:not(:disabled) { transform: scale(0.94); }

.kj-star-btn { border-radius: 999px; }
@media (hover: hover) {
  .kj-star-btn:hover { background: rgba(194,143,44,0.12) !important; }
}

.kj-icon-btn:active { transform: scale(0.92); }
@media (hover: hover) {
  .kj-icon-btn:hover { background: #EFEFF2 !important; }
}

.kj-topbar {
  box-shadow: 0 1px 0 rgba(28,35,51,0.06);
  backdrop-filter: blur(6px);
}

.kj-bottomnav {
  box-shadow: 0 -2px 12px rgba(28,35,51,0.08);
}
.kj-nav-btn:active { transform: scale(0.94); }

::selection { background: rgba(43,58,103,0.18); }

.kj-search {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kj-search:focus-within {
  border-color: var(--c-indigo) !important;
  box-shadow: 0 0 0 3px rgba(43,58,103,0.12);
}
.kj-search input::placeholder {
  color: var(--c-ink-soft);
  opacity: 0.75;
}