@charset "UTF-8";

/* ============================
   Theme tokens
   ============================ */
:root{
  --bg:#222;
  --panel:#000;
  --ink:#ccc;
  --muted:#8a8a8a;
  --accent:#ca952e;   /* kakishibu */
  --link:#eee;     /* linkable kanji */
  --unlinked:#666;    /* no page */
  --hit:#f0b84e;      /* search hit */
  --gap:10px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  display:flex;
  justify-content:center;
  font-family:
    "Hiragino Kaku Gothic ProN","Meiryo","Yu Gothic",
    system-ui,-apple-system,sans-serif;
}

/* Constrain column */
.kfr-header,#kfr-grid,.kfr-footer{
  max-width:480px;
  width:100%;
  margin:0 auto;
}

/* ============================
   Header
   ============================ */
.kfr-header{
  position:fixed; inset:0 0 auto 0; height:50px;
  background:var(--panel);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; z-index:1000;
}
.kfr-title{ font-weight:600; font-size:16px; letter-spacing:.2px; }
.kfr-header input{
  width:56%; padding:6px 10px; font-size:15px;
  background:#222; color:var(--ink);
  border:1px solid #3a3a3a; border-radius:6px; outline:none;
}
.kfr-header input::placeholder{ color:#a0a0a0; }

/* Search box size */
#kfr-search {
  width: 120px;   /* shrink default width */
  padding: 4px 6px;
  font-size: 14px;
  border: 1px solid #999;
  border-radius: 4px;
}

/* ============================
   Footer
   ============================ */
.kfr-footer{
  position:fixed; inset:auto 0 0 0; height:46px;
  background:var(--panel);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:1000;
}
.kfr-footer a{ color:var(--ink); text-decoration:none; font-weight:600; }

/* ============================
   Scroll area
   ============================ */
#kfr-grid{
  height:calc(100vh - 96px);   /* header(50) + footer(46) */
  margin-top:50px;
  margin-bottom:46px;
  padding:8px 10px 10px;
  overflow-y:auto;
}

/* ============================
   Rows
   ============================ */
.kfr-row{
  display:grid;
  grid-template-columns:auto 1fr; /* row number | kanji grid */
  align-items:center;
  gap:var(--gap);
  padding:2px 0;
  border-radius:8px;
}
.kfr-row:hover{ background:rgba(255,255,255,.05); }

/* row highlighted by script (target row) */
.kfr-target-row{
  background:rgba(202,149,46,.08);
  outline:1px solid rgba(202,149,46,.35);
}

/* left row number (0000,0010,…) */
.kfr-row-number{
  width:44px;
  text-align:right;
  padding-right:8px;
  font:500 12px/1.2 system-ui,-apple-system,sans-serif;
  color:olive;
  opacity:.95;
  user-select:none;
  font-variant-numeric:tabular-nums;
  border-right:1px solid #333;
}

/* ============================
   Kanji grid (10 per row)
   ============================ */
.kfr-row-kanji{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  column-gap:9px; row-gap:0;
  width:100%;
  font-family:
    "Hiragino Mincho ProN","Yu Mincho","Sawarabi Mincho",
    "Noto Serif JP","Noto Serif CJK JP",serif;
}

/* cells (anchor or span) */
.kfr-row-kanji a,
.kfr-row-kanji span{
  display:inline-block;
  text-align:center;
  font-size: clamp(18px, 4vw, 26px);
  line-height:1.15;
  color: inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:rgba(202,149,46,.15);
}

/* LINK STATE (matches JS: has-page / no-page) */
.kfr-row-kanji a.has-page{ color:var(--link); font-weight:500; }
.kfr-row-kanji a.has-page:hover{ text-decoration:underline; }
.kfr-row-kanji .no-page{ color:var(--unlinked); }

/* Hover effect for linked kanji */
.kfr-row-kanji a.has-page:hover {
  color: #ffd54a;   /* highlight yellow (pick your color) */
  text-decoration: none; /* stop the underline */
}

/* optional: fallback link (e.g. find.html) */
.kfr-row-kanji a.fallback{ color:var(--accent); }

/* SEARCH HIT (must override link/unlink) */
.kfr-row-kanji a.has-page.search-hit,
.kfr-row-kanji .no-page.search-hit,
.kfr-row-kanji .search-hit {
  color: var(--hit);
  font-weight: 700;
  text-shadow: 0 0 5px #000;
  outline: 2px solid rgba(202,149,46,.35);
  border-radius: 4px;
}

/* keep same color on hover/focus */
.kfr-row-kanji a.has-page.search-hit:hover,
.kfr-row-kanji a.has-page.search-hit:focus {
  color: var(--hit);
  text-decoration: none;
}

/* optional: dim a whole row (if you ever use it) */
.kfr-row.dim{ opacity:.25; transition:opacity .15s ease; }

/* compact mode (tighten spacing & size) */
body.compact .kfr-row-kanji{ column-gap:6px; }
body.compact .kfr-row-kanji a,
body.compact .kfr-row-kanji span{ font-size:clamp(22px,5.3vw,28px); }

/* Brand styling */
.kfr-header .brand {
  text-decoration: none;
  font-weight: 700;
}

.kfr-header .brand-kanji {
  font-size: 1.4rem;
  color: #904012;   /* stronger orange */
}

.kfr-header .brand-world {
  font-size: 0.9rem;
  color: #9f8672;   /* dark pink */
  margin-left: 4px;
}

.kfr-header .brand-sub {
  margin-left: 8px;
  font-size: 0.85rem;
  color: #aaa;
}

.kfr-footer a[href="#"] {
  color: #ca952e;   /* your orange accent */
  font-weight: 600; /* optional, makes it pop */
}

.kfr-footer a[href="#"]:hover {
  color: gold;     /* lighter orange for hover */
}