/* ==========================================================================
   Key古文単語330 — 和モダン Glassmorphism
   ========================================================================== */
:root{
  --kinari:#F7F6F3;
  --sumi-light:#E7E4DE;
  --sumi:#333333;
  --sumi-deep:#1c1c1c;
  --shinku:#A8282B;
  --shinku-deep:#7d1c1e;
  --ai:#0F2537;
  --ai-light:#1c3a52;
  --glass-bg:rgba(255,255,255,0.55);
  --glass-bg-strong:rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.45);
  --glass-shadow:0 8px 32px rgba(31,38,44,0.08);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --serif:"Shippori Mincho","Noto Serif JP", serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-padding-bottom:140px;}
body{
  font-family:var(--serif);
  color:var(--sumi-deep);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- background ---------- */
#app-bg{
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(160deg, #FBFAF7 0%, #F3F1EC 35%, #E9E6E0 70%, #ded9d1 100%);
}
.washi-layer{
  position:absolute; inset:0;
  opacity:0.5;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.6) 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(168,40,43,0.04) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(15,37,55,0.05) 0%, transparent 45%);
  background-size: 100% 100%;
}
.kira-layer{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(25deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 120px);
  mix-blend-mode:overlay;
}

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* ---------- header ---------- */
#app-header{
  position:sticky; top:0; z-index:50;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:0;
}
.header-inner{
  max-width:900px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  gap:12px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{
  font-size:1.5rem; width:42px; height:42px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(145deg, var(--shinku), var(--shinku-deep));
  color:#fff;
  box-shadow:0 4px 14px rgba(168,40,43,0.35);
}
.brand-text h1{
  margin:0; font-size:1.15rem; font-weight:700; letter-spacing:0.02em;
  color:var(--ai);
}
.brand-accent{color:var(--shinku);}
.brand-sub{
  margin:2px 0 0; font-size:0.62rem; letter-spacing:0.12em;
  color:#8a8478; text-transform:uppercase; font-family:sans-serif;
}
.header-stats{display:flex; align-items:center; gap:10px;}
.hstat{display:flex; flex-direction:column; align-items:center; min-width:40px;}
.hstat-num{font-size:1.05rem; font-weight:700; color:var(--shinku);}
.hstat-label{font-size:0.6rem; color:#7a746a;}
.hstat-divider{width:1px; height:22px; background:rgba(0,0,0,0.1);}

/* ---------- main / views ---------- */
#app-main{
  max-width:900px; margin:0 auto;
  padding:18px 14px 160px;
  min-height:80vh;
}
.view{display:none; animation:fadeIn .35s ease;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- list toolbar ---------- */
.list-toolbar{
  border-radius:var(--radius-lg);
  padding:14px 16px;
  margin-bottom:14px;
  position:sticky; top:78px; z-index:20;
}
.search-box{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:999px;
  padding:8px 14px;
}
.search-box i{color:#a39c8d;}
.search-box input{
  flex:1; border:none; background:transparent; outline:none;
  font-family:var(--serif); font-size:0.95rem; color:var(--sumi-deep);
}
.search-clear{
  border:none; background:none; color:#a39c8d; cursor:pointer;
  display:none; padding:4px;
}
.search-box.has-value .search-clear{display:inline-flex;}

.toggle-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:12px;
}
.switch-label{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;}
.switch{position:relative; display:inline-block;}
.switch input{opacity:0; width:0; height:0; position:absolute;}
.switch-track{
  display:inline-block; width:38px; height:22px; border-radius:999px;
  background:rgba(0,0,0,0.15); position:relative; transition:.25s;
}
.switch-thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:.25s;
}
.switch input:checked + .switch-track{background:var(--shinku);}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(16px);}
.switch-text{font-size:0.82rem; color:var(--sumi);}

.filter-chips{display:flex; gap:6px; margin-left:auto;}
.chip{
  border:1px solid rgba(0,0,0,0.12); background:rgba(255,255,255,0.4);
  border-radius:999px; padding:5px 12px; font-size:0.78rem; cursor:pointer;
  color:var(--sumi); font-family:var(--serif);
  transition:.2s;
}
.chip.active{background:var(--ai); color:#fff; border-color:var(--ai);}

/* ---------- word list ---------- */
.list-wrap{position:relative; display:flex; gap:6px;}
.word-list{
  list-style:none; margin:0; padding:0; flex:1; min-width:0;
}
.word-row{
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.4);
  margin-bottom:8px;
  overflow:hidden;
  transition:background .25s, box-shadow .25s;
}
.word-row.highlight{
  background:rgba(168,40,43,0.10);
  border-color:rgba(168,40,43,0.25);
  box-shadow:0 4px 18px rgba(168,40,43,0.12);
}
.word-row.status-known{opacity:0.72;}
.word-main{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; cursor:pointer;
}
.word-idx{
  font-size:0.65rem; color:#a39c8d; min-width:28px; font-family:sans-serif;
}
.word-w{
  font-size:1.05rem; font-weight:600; color:var(--ai); min-width:120px;
  flex-shrink:0;
}
.word-w .cat-tag{
  display:inline-block; font-size:0.6rem; font-family:sans-serif;
  background:rgba(15,37,55,0.08); color:var(--ai);
  border-radius:5px; padding:1px 5px; margin-left:6px; vertical-align:2px;
}
.word-m{
  flex:1; font-size:0.9rem; color:var(--sumi); line-height:1.5;
  min-width:0;
}
.word-m.masked{
  color:transparent; background:repeating-linear-gradient(90deg, #d8d3c8 0, #d8d3c8 6px, #e5e1d8 6px, #e5e1d8 12px);
  border-radius:4px; user-select:none;
}
.word-status-btn{
  border:none; background:none; cursor:pointer; font-size:1.15rem; flex-shrink:0;
  padding:4px; line-height:1;
}
.status-icon-unknown{color:var(--shinku);}
.status-icon-known{color:#b7b2a6;}
.word-row.status-known .status-icon-known{color:var(--ai);}

.word-detail{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  padding:0 16px;
}
.word-detail.open{max-height:400px; padding-bottom:14px;}
.word-detail-inner{
  border-top:1px dashed rgba(0,0,0,0.1); padding-top:10px;
  font-size:0.85rem; color:var(--sumi);
}
.word-detail-nuance{color:#6b6459; font-size:0.8rem; margin:6px 0 0;}
.word-example{
  margin-top:8px; padding:8px 10px; border-radius:8px;
  background:rgba(15,37,55,0.05); font-size:0.82rem;
}
.word-example .ex-jp{color:var(--ai); font-weight:600;}
.word-example .ex-ja{color:#6b6459; display:block; margin-top:3px;}

.example-line{
  padding:0 16px 12px; font-size:0.82rem; color:#6b6459;
}
.example-line .ex-jp{color:var(--ai); font-weight:600;}

.jump-bar{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 3px; border-radius:16px;
  position:sticky; top:170px; height:fit-content; max-height:70vh;
  overflow-y:auto;
  writing-mode:vertical-rl;
}
.jump-item{
  font-size:0.68rem; color:#8a8478; cursor:pointer; padding:2px 4px;
  border-radius:4px; font-family:sans-serif;
}
.jump-item:hover, .jump-item.active{background:var(--shinku); color:#fff;}
.list-empty{text-align:center; color:#a39c8d; padding:40px 0;}
.hidden{display:none !important;}

/* ---------- cards ---------- */
.cards-header{
  display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:0 4px;
  font-size:0.85rem; color:var(--sumi);
}
.cards-progress{flex:1; height:5px; border-radius:5px; background:rgba(0,0,0,0.08); overflow:hidden;}
.cards-progress-bar{height:100%; width:0%; background:linear-gradient(90deg,var(--shinku),var(--ai)); transition:width .3s;}

.card-stage{
  display:flex; justify-content:center; align-items:center;
  min-height:380px; margin-bottom:18px; perspective:1400px;
  touch-action:pan-y;
}
.flash-card{
  width:min(92vw,420px); height:340px; position:relative;
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.2,.2,1);
  cursor:pointer;
}
.flash-card.flipped{transform:rotateY(180deg);}
.flash-card.swipe-left{transform:translateX(-140%) rotate(-12deg) !important; transition:transform .35s ease-in;}
.flash-card.swipe-right{transform:translateX(140%) rotate(12deg) !important; transition:transform .35s ease-in;}
.flash-face{
  position:absolute; inset:0; border-radius:var(--radius-lg);
  backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:26px; text-align:center;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 14px 40px rgba(31,38,44,0.14);
}
.flash-front{background:linear-gradient(160deg, rgba(255,255,255,0.75), rgba(247,246,243,0.6));}
.flash-back{transform:rotateY(180deg); background:linear-gradient(160deg, rgba(255,255,255,0.8), rgba(233,230,224,0.65)); overflow-y:auto;}
.flash-cat{
  position:absolute; top:16px; left:18px; font-size:0.68rem; font-family:sans-serif;
  background:rgba(15,37,55,0.08); color:var(--ai); padding:3px 9px; border-radius:6px;
}
.flash-word{font-size:2.1rem; font-weight:700; color:var(--ai); margin:0;}
.flash-hint{position:absolute; bottom:16px; font-size:0.68rem; color:#a39c8d; font-family:sans-serif;}
.flash-meaning{font-size:1.25rem; font-weight:600; color:var(--shinku); margin:24px 0 8px;}
.flash-nuance{font-size:0.78rem; color:#6b6459; margin:0 0 8px; line-height:1.6;}
.flash-example{font-size:0.82rem; color:var(--ai); background:rgba(255,255,255,0.5); padding:8px 12px; border-radius:8px; margin-top:6px;}
.flash-example .ex-ja{display:block; color:#6b6459; margin-top:4px; font-size:0.78rem;}

.cards-controls{
  display:flex; justify-content:center; align-items:center; gap:26px; margin-bottom:16px;
}
.card-btn{
  border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,0.55); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.5);
  border-radius:50%; width:64px; height:64px; font-size:1.2rem;
  color:var(--sumi); box-shadow:0 6px 16px rgba(0,0,0,0.08);
  transition:transform .15s;
}
.card-btn span{font-size:0.6rem; font-family:sans-serif;}
.card-btn:active{transform:scale(0.92);}
.card-btn-flip{width:52px; height:52px; font-size:1.05rem; color:var(--ai);}
.cards-nav{display:flex; justify-content:center; align-items:center; gap:16px;}
.nav-arrow{
  border:none; background:rgba(255,255,255,0.5); width:42px; height:42px; border-radius:50%;
  cursor:pointer; color:var(--ai); font-size:0.95rem; backdrop-filter:blur(10px);
}
.nav-shuffle{
  border:none; background:rgba(255,255,255,0.5); border-radius:999px; padding:10px 18px;
  cursor:pointer; color:var(--sumi); font-family:var(--serif); font-size:0.85rem;
  backdrop-filter:blur(10px);
}

/* ---------- quiz ---------- */
.quiz-setup{border-radius:var(--radius-lg); padding:28px 24px; text-align:center; max-width:480px; margin:20px auto;}
.quiz-setup h2{margin:0 0 8px; color:var(--ai);}
.quiz-desc{font-size:0.85rem; color:#6b6459; margin-bottom:20px; line-height:1.7;}
.quiz-options{display:flex; gap:14px; margin-bottom:22px; flex-wrap:wrap; justify-content:center;}
.quiz-option-label{
  display:flex; flex-direction:column; gap:6px; font-size:0.78rem; color:var(--sumi);
  font-family:sans-serif;
}
.quiz-option-label select{
  padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.15);
  background:rgba(255,255,255,0.7); font-family:var(--serif); font-size:0.9rem;
}
.btn-primary{
  background:linear-gradient(135deg, var(--shinku), var(--shinku-deep));
  color:#fff; border:none; padding:12px 26px; border-radius:999px; cursor:pointer;
  font-family:var(--serif); font-size:0.95rem; font-weight:600;
  box-shadow:0 8px 20px rgba(168,40,43,0.3);
}
.btn-secondary{
  background:rgba(255,255,255,0.6); border:1px solid rgba(0,0,0,0.1); color:var(--ai);
  padding:11px 20px; border-radius:999px; cursor:pointer; font-family:var(--serif); font-size:0.9rem;
  backdrop-filter:blur(10px);
}
.btn-danger{
  background:rgba(168,40,43,0.08); border:1px solid rgba(168,40,43,0.3); color:var(--shinku-deep);
  padding:11px 20px; border-radius:999px; cursor:pointer; font-family:var(--serif); font-size:0.9rem;
}

.quiz-top{display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:0.82rem; color:var(--sumi);}
.quiz-progress-bar{flex:1; height:5px; border-radius:5px; background:rgba(0,0,0,0.08); overflow:hidden;}
#quiz-progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--ai),var(--shinku)); transition:width .3s;}
.quiz-question-card{
  border-radius:var(--radius-lg); background:rgba(255,255,255,0.6); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.5); padding:34px 22px; text-align:center; margin-bottom:18px;
  min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform .15s;
}
.quiz-question-card.shake{animation:shake .4s;}
@keyframes shake{
  0%,100%{transform:translateX(0);} 20%{transform:translateX(-10px);} 40%{transform:translateX(10px);}
  60%{transform:translateX(-6px);} 80%{transform:translateX(6px);}
}
.quiz-question-card.correct-flash{background:rgba(15,37,55,0.12);}
.quiz-qtype{font-size:0.72rem; color:#8a8478; font-family:sans-serif; margin-bottom:10px;}
.quiz-question{font-size:1.3rem; font-weight:700; color:var(--ai); margin:0; line-height:1.6;}
.quiz-choices{display:flex; flex-direction:column; gap:10px;}
.quiz-choice-btn{
  border:1px solid rgba(0,0,0,0.1); background:rgba(255,255,255,0.55); backdrop-filter:blur(12px);
  border-radius:var(--radius-md); padding:15px 18px; text-align:left; cursor:pointer;
  font-family:var(--serif); font-size:0.98rem; color:var(--sumi-deep);
  transition:background .2s, border-color .2s;
}
.quiz-choice-btn:active{background:rgba(15,37,55,0.06);}
.quiz-choice-btn.correct{background:rgba(15,37,55,0.14); border-color:var(--ai); color:var(--ai); font-weight:600;}
.quiz-choice-btn.wrong{background:rgba(168,40,43,0.12); border-color:var(--shinku); color:var(--shinku-deep);}
.quiz-choice-btn.disabled{pointer-events:none; opacity:0.6;}

.quiz-result{border-radius:var(--radius-lg); padding:32px 24px; text-align:center; max-width:480px; margin:10px auto;}
.result-ring-wrap{position:relative; width:140px; height:140px; margin:0 auto 14px;}
.result-ring{width:140px; height:140px; transform:rotate(-90deg);}
.result-ring-bg{fill:none; stroke:rgba(0,0,0,0.08); stroke-width:10;}
.result-ring-fg{fill:none; stroke:var(--shinku); stroke-width:10; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 1s ease;}
.result-ring-text{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#result-percent{font-size:1.6rem; font-weight:700; color:var(--ai);}
.result-ring-label{font-size:0.68rem; color:#8a8478; font-family:sans-serif;}
#result-detail{color:var(--sumi); margin-bottom:16px;}
.result-wrong{text-align:left; max-height:200px; overflow-y:auto; margin-bottom:18px;}
.result-wrong-item{
  display:flex; justify-content:space-between; padding:8px 12px; border-radius:8px;
  background:rgba(168,40,43,0.06); margin-bottom:6px; font-size:0.85rem;
}
.result-wrong-item b{color:var(--ai);}
.result-actions{display:flex; justify-content:center; gap:12px;}

/* ---------- stats ---------- */
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.stats-card{border-radius:var(--radius-lg); padding:20px; }
.stats-card.wide{grid-column:1/-1;}
.stats-card h3{margin:0 0 14px; font-size:0.95rem; color:var(--ai); display:flex; align-items:center; gap:8px;}
.ring-card{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.progress-ring-wrap{position:relative; width:170px; height:170px;}
.progress-ring{width:170px; height:170px; transform:rotate(-90deg);}
.progress-ring-bg{fill:none; stroke:rgba(0,0,0,0.07); stroke-width:11;}
.progress-ring-fg{fill:none; stroke:var(--shinku); stroke-width:11; stroke-linecap:round; stroke-dasharray:427; stroke-dashoffset:427; transition:stroke-dashoffset 1.2s ease;}
.progress-ring-text{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
#stats-ring-num{font-size:2rem; font-weight:700; color:var(--ai);}
.progress-ring-sub{font-size:0.72rem; color:#8a8478;}
.ring-caption{margin-top:12px; font-size:0.8rem; color:#6b6459;}

.cat-progress-list{display:flex; flex-direction:column; gap:10px;}
.cat-progress-item{font-size:0.82rem;}
.cat-progress-row{display:flex; justify-content:space-between; margin-bottom:4px; color:var(--sumi);}
.cat-progress-bar-bg{height:7px; border-radius:6px; background:rgba(0,0,0,0.07); overflow:hidden;}
.cat-progress-bar-fg{height:100%; background:linear-gradient(90deg,var(--ai),var(--shinku));}

.chart-box{height:260px; position:relative;}
.weak-word-list{margin:0; padding-left:20px; font-size:0.85rem; color:var(--sumi);}
.weak-word-list li{margin-bottom:8px;}
.weak-word-list b{color:var(--shinku);}
.weak-word-list small{color:#8a8478; margin-left:6px;}

/* ---------- settings ---------- */
.settings-wrap{display:flex; flex-direction:column; gap:14px; max-width:600px; margin:0 auto;}
.settings-card{border-radius:var(--radius-lg); padding:22px;}
.settings-card h3{margin:0 0 10px; color:var(--ai); font-size:0.98rem; display:flex; align-items:center; gap:8px;}
.settings-desc{font-size:0.85rem; color:#6b6459; line-height:1.7; margin-bottom:14px;}
.settings-actions{display:flex; gap:12px; flex-wrap:wrap;}
.file-label{position:relative; overflow:hidden;}
.file-label input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}

/* ---------- bottom nav ---------- */
#bottom-nav{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:60;
  display:flex; gap:4px; padding:6px; border-radius:20px;
  width:min(94vw,460px);
}
.nav-btn{
  flex:1; border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px; border-radius:14px; color:#7a746a; font-family:sans-serif;
  transition:background .2s, color .2s;
}
.nav-btn i{font-size:1.1rem;}
.nav-btn span{font-size:0.62rem;}
.nav-btn.active{background:linear-gradient(135deg, rgba(15,37,55,0.9), rgba(31,58,82,0.9)); color:#fff; box-shadow:0 4px 12px rgba(15,37,55,0.3);}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(15,37,55,0.92); color:#fff; padding:10px 20px; border-radius:999px;
  font-size:0.82rem; z-index:100; opacity:0; pointer-events:none; transition:.3s;
  backdrop-filter:blur(10px);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .stats-grid{grid-template-columns:1fr;}
  .word-w{min-width:100px; font-size:0.98rem;}
  .flash-word{font-size:1.7rem;}
  .jump-bar{display:none;}
  .header-inner{padding:10px 14px;}
  .list-toolbar{top:70px;}
}
@media (min-width:641px){
  #jump-bar{display:flex;}
}