/* Shared styles for hiragana.ink, katakana.ink and kanji.ink.
   Each site sets its own accent (--ai, --ai-soft, --seal) in index.html. */
:root{
  --paper:#eef1f4; --card:#fbfcfd; --ink:#1d2433; --muted:#667085; --line:#d5dbe3;
  --shadow:0 1px 2px rgba(29,36,51,.06),0 12px 32px -12px rgba(29,36,51,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --paper:#121620; --card:#1b2130; --ink:#e8ecf3; --muted:#9aa4b5; --line:#2c3548;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.6);
  }
}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Zen Maru Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-inline:16px; box-sizing:border-box;
}
.app{max-width:440px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; gap:16px; padding-block:24px; box-sizing:border-box}

/* header + site switcher */
header{display:flex; align-items:center; justify-content:space-between; gap:12px}
h1{margin:0; font-size:1.15rem; font-weight:700; letter-spacing:.01em; display:flex; align-items:center; gap:10px}
h1 .seal{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:6px; background:var(--seal); color:#fff; font-family:"Klee One",serif; font-size:1.1rem}
.head-right{display:flex; align-items:center; gap:12px}
.count{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.95rem}
.switcher{display:flex; gap:2px; background:var(--line); border-radius:9px; padding:2px}
.switcher a{display:grid; place-items:center; width:30px; height:26px; border-radius:7px; text-decoration:none; color:var(--muted); font-family:"Klee One",serif; font-weight:600; font-size:1rem}
.switcher a:hover{color:var(--ink)}
.switcher a[aria-current="page"]{background:var(--card); color:var(--ai); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.switcher a:focus-visible{outline:3px solid var(--ai); outline-offset:1px}

.bar{height:4px; border-radius:2px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--ai); transition:width .25s ease}

/* settings: mode + sets */
.settings{display:flex; flex-direction:column; gap:10px}
.seg{display:grid; grid-template-columns:1fr 1fr; background:var(--line); border-radius:12px; padding:3px; gap:3px}
.seg button{font:inherit; font-weight:700; font-size:.9rem; border:0; border-radius:9px; padding:9px 8px; background:transparent; color:var(--muted); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg .jp{font-family:"Klee One",serif}
.sets{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.sets .lbl{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:2px}
.chip{font:inherit; font-size:.85rem; font-weight:700; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px; padding:6px 12px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ai-soft); border-color:var(--ai); color:var(--ai)}
.chip small{font-weight:500; opacity:.75; font-variant-numeric:tabular-nums}
button:focus-visible{outline:3px solid var(--ai); outline-offset:2px}

/* the card */
.stage{perspective:1200px; flex:1; display:flex; align-items:center; min-height:320px}
.card{
  position:relative; width:100%; aspect-ratio:3/4; max-height:58vh; max-width:100%; margin:0 auto;
  border:0; padding:0; background:none; cursor:pointer; color:inherit; font:inherit;
  transform-style:preserve-3d; transition:transform .45s cubic-bezier(.3,.7,.3,1);
}
.card.flipped{transform:rotateY(180deg)}
.card:focus-visible{outline:none}
.card:focus-visible .face{box-shadow:0 0 0 3px var(--ai),var(--shadow)}
.face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:48px 20px; box-sizing:border-box; text-align:center;
}
.back{transform:rotateY(180deg); background:var(--ai-soft)}

/* genkō-yōshi style guide squares behind a character */
.big{position:relative; z-index:0; line-height:1}
.big.jp::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1.15em; aspect-ratio:1; border:1px solid var(--line); z-index:-1; opacity:.8;
  background:
    linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;
}
.big.jp.two::before{width:2.2em; aspect-ratio:2/1;
  background:
    linear-gradient(var(--line),var(--line)) 25% 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 75% 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;
}
.big.jp{font-family:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif; font-weight:600; font-size:clamp(7rem,34vw,10rem); color:var(--ink)}
.big.jp.two{font-size:clamp(5rem,22vw,7rem)}
.big.latin{font-weight:700; font-size:clamp(4rem,20vw,5.5rem); letter-spacing:.02em}
.big.meaning{font-weight:700; font-size:clamp(1.8rem,9vw,2.6rem); line-height:1.15; text-wrap:balance; max-width:14ch}
.back .big.latin,.back .big.meaning{color:var(--ai)}
.sub{font-size:1.6rem; color:var(--muted)}
.sub.jp{font-family:"Klee One",serif; font-size:2.2rem}
.row{position:absolute; top:16px; left:18px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.hint{position:absolute; bottom:16px; left:16px; right:16px; font-size:.8rem; color:var(--muted)}
.note{font-size:.9rem; color:var(--muted); max-width:28ch; text-align:center; min-height:1.2em; text-wrap:balance}

/* kanji example word */
.example{display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:10px; border-top:1px solid var(--line); min-width:60%}
.example .w{font-family:"Klee One","Hiragino Mincho ProN",serif; font-weight:600; font-size:1.7rem}
.example .r{font-size:.95rem; color:var(--muted)}
.example .m{font-size:.9rem}

.controls{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
button.btn{
  font:inherit; font-weight:700; font-size:.95rem; border-radius:12px; padding:12px 16px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
}
button.btn:hover{border-color:var(--ai)}
button.primary{background:var(--ai); border-color:var(--ai); color:var(--card)}
.shuffle{display:flex; justify-content:center}
.toggle[aria-pressed="true"]{background:var(--ai-soft); border-color:var(--ai); color:var(--ai)}
.keys{text-align:center; font-size:.8rem; color:var(--muted); margin:0}
kbd{font-family:inherit; border:1px solid var(--line); border-radius:4px; padding:0 5px; background:var(--card)}
@media (hover:none){.keys{display:none}}
@media (prefers-reduced-motion:reduce){.card,.bar i{transition:none}}