/* ============================================================
   Kana Quiz — style.css
   ============================================================ */

/* ============================================================
   Kana Quiz — Premium Native App  2026
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  background:#151718;
  font-family:'Hiragino Maru Gothic Pro','Hiragino Sans','Noto Sans JP',
              'Noto Sans CJK JP','BIZ UDPGothic',sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
}

:root{
  --font:'Hiragino Maru Gothic Pro','Hiragino Sans','Noto Sans JP',
         'Noto Sans CJK JP','BIZ UDPGothic',sans-serif;
  /* surfaces */
  --bg:      #151718;
  --surface: #1F2425;
  --surf2:   #252D2E;
  /* accent */
  --accent:  #7FA8A1;
  --accent-glow: rgba(127,168,161,0.26);
  /* text */
  --text:    #F5F7F7;
  --muted:   #9AA5A3;
  --on-accent:#151718;
  /* feedback */
  --correct: #8FD9B5;
  --wrong:   #F0958A;
  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px;
  /* radii */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  /* safe areas */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  /* legacy aliases kept for JS compat */
  --color-bg:#151718; --color-surface:#1F2425;
  --color-button:#2A3535; --color-button-active:#7FA8A1;
  --color-text:#F5F7F7; --color-text-muted:#9AA5A3;
  --color-correct:#8FD9B5; --color-wrong:#F0958A;
  --color-feedback-text:#151718;
  --fw-regular:500; --fw-bold:700;
  --radius-panel:20px; --radius-button:14px; --radius-row:10px;
  --opacity-inactive:0.55;
  --card-size:min(86vmin,420px);
  --panel-width:min(92vmin,440px);
}

#app{
  position:fixed; inset:0; overflow:hidden;
  display:flex; justify-content:center;
}

/* ===== SCREENS ===== */
.screen{
  position:absolute; inset:0;
  display:flex; justify-content:center;
  background:var(--bg);
  transition:transform .38s cubic-bezier(0.4,0,0.2,1);
}
#setup-screen{ transform:translateX(0); }
#quiz-screen { transform:translateX(100%); }

/* centered column — fills screen on mobile, 540px column on desktop */
.setup-wrap,.quiz-wrap{
  width:100%; max-width:540px;
  height:100%;
  display:flex; flex-direction:column;
  position:relative;
}
@media(min-width:560px){
  .setup-wrap,.quiz-wrap{
    border-left:1px solid rgba(255,255,255,0.05);
    border-right:1px solid rgba(255,255,255,0.05);
    box-shadow:0 0 80px rgba(0,0,0,0.5);
  }
}

/* ====================================================
   SETUP — HEADER (fixed)
   ==================================================== */
.setup-header{
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--sat) + 28px) var(--s6) var(--s5);
  gap:3px;
}
.setup-icon{
  width:60px; height:60px;
  border-radius:18px; margin-bottom:var(--s3);
  box-shadow:0 8px 28px rgba(0,0,0,0.45),
             0 0 0 1px rgba(127,168,161,0.18);
}
.setup-app-title{
  font-size:clamp(26px,7vw,32px); font-weight:700;
  color:var(--text); letter-spacing:-0.03em;
  line-height:1.1; margin:0;
}
.setup-subtitle{
  font-size:14px; font-weight:500;
  color:var(--muted); letter-spacing:0.01em; margin:0;
}

/* ====================================================
   SETUP — CONTROLS (fixed)
   ==================================================== */
.setup-controls{
  flex-shrink:0;
  padding:0 var(--s4) var(--s2);
  display:flex; flex-direction:column; gap:var(--s3);
}
.field-group{ display:flex; flex-direction:column; gap:var(--s2); }
.field-label{
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.09em;
}
.field-label-row{
  display:flex; align-items:center; justify-content:space-between;
}

/* segmented pill control */
.seg-control{
  position:relative; display:flex;
  background:rgba(255,255,255,0.04);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.06);
  padding:4px;
}
.seg-pill{
  position:absolute;
  border-radius:var(--r-md);
  background:var(--accent);
  box-shadow:0 2px 12px var(--accent-glow);
  pointer-events:none; z-index:0;
  transition:left .26s cubic-bezier(0.4,0,0.2,1),
             top  .26s cubic-bezier(0.4,0,0.2,1),
             width .26s cubic-bezier(0.4,0,0.2,1),
             height .26s cubic-bezier(0.4,0,0.2,1);
}
.toggle-btn{
  flex:1; border:none; border-radius:var(--r-md);
  background:transparent; color:var(--muted);
  font-family:var(--font); font-weight:500;
  cursor:pointer; position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:11px 4px; gap:3px;
  transition:color .22s ease, transform .1s ease;
}
.toggle-btn.active{ color:var(--on-accent); font-weight:700; }
.toggle-btn:active{ transform:scale(0.97); }
.seg-char{ font-size:clamp(15px,4.2vw,20px); line-height:1; letter-spacing:.02em; }
.seg-label{ font-size:clamp(9px,2.2vw,11px); letter-spacing:.02em; font-weight:inherit; white-space:nowrap; }
.dir-control .toggle-btn{ padding:13px 8px; }
.dir-control .seg-char{ font-size:clamp(13px,3.8vw,17px); }

/* ====================================================
   SETUP — CHARACTERS HEADER (fixed)
   ==================================================== */
.setup-chars-header{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s4) var(--s2);
}
.select-actions{ display:flex; align-items:center; gap:6px; }
.mini-btn{
  border:none; background:none; color:var(--accent);
  font-family:var(--font); font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.07em;
  padding:0; cursor:pointer;
  transition:opacity .15s ease, transform .1s ease;
}
.mini-btn:active{ opacity:.5; transform:scale(0.95); }
.select-sep{ font-size:12px; color:var(--muted); opacity:.45; }

/* ====================================================
   SETUP — SCROLLABLE ROWS
   ==================================================== */
.setup-rows-scroll{
  flex:1 1 0; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:0 var(--s4) var(--s2);
}
.setup-rows-scroll::-webkit-scrollbar{ display:none; }

.row-list{ display:flex; flex-direction:column; gap:5px; padding-bottom:var(--s2); }
.row-item{
  display:flex; align-items:center;
  gap:clamp(10px,2.5vw,14px);
  background:rgba(255,255,255,0.03);
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,0.04);
  border-left:3px solid transparent;
  padding:11px 13px; cursor:pointer; opacity:.42;
  transition:opacity .18s ease, background .18s ease,
             border-color .18s ease, border-left-color .18s ease;
}
.row-item:has(input:checked){
  opacity:1;
  background:rgba(127,168,161,0.07);
  border-color:rgba(127,168,161,0.14);
  border-left-color:var(--accent);
}
.row-item input[type=checkbox]{
  width:clamp(15px,3.8vw,18px); height:clamp(15px,3.8vw,18px);
  accent-color:var(--accent); flex-shrink:0;
}
.row-kana{
  display:grid; grid-template-columns:repeat(5,1fr);
  row-gap:3px; flex:1; min-width:0;
}
.row-kana span{
  font-size:clamp(14px,3.8vw,17px); font-weight:500;
  color:var(--text); text-align:center;
}
.row-kana.mixed span.kata{ color:var(--muted); }
.row-romaji{
  width:48px; flex-shrink:0; font-size:11px; font-weight:500;
  color:var(--muted); text-align:right; white-space:nowrap; opacity:.7;
}
.more-toggle{
  background:none; border:none; color:var(--accent);
  font-family:var(--font); font-size:12px; font-weight:700;
  text-align:center; cursor:pointer; padding:10px 0;
  letter-spacing:.03em; opacity:.8; transition:opacity .15s ease;
}
.more-toggle:active{ opacity:.5; }
.extended-note{
  font-size:11px; color:var(--muted); text-align:center;
  padding:2px 4px; opacity:.65;
}

/* ====================================================
   SETUP — FIXED FOOTER / CTA
   ==================================================== */
.setup-footer{
  flex-shrink:0;
  padding:var(--s3) var(--s4) calc(var(--sab) + var(--s4));
  background:linear-gradient(to top, var(--bg) 70%, transparent);
}
.start-btn{
  width:100%; border:none; border-radius:var(--r-lg);
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font); font-weight:700; font-size:17px;
  padding:17px 24px; cursor:pointer; letter-spacing:.01em;
  box-shadow:0 4px 28px var(--accent-glow),
             inset 0 1px 0 rgba(255,255,255,0.14);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.start-btn:active{
  transform:scale(0.97);
  box-shadow:0 2px 12px rgba(127,168,161,0.16);
}
.start-btn:disabled{ opacity:.3; cursor:default; box-shadow:none; }

/* ====================================================
   QUIZ — TOP BAR
   ==================================================== */
.quiz-topbar{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--sat) + 12px) var(--s4) 0;
  height:calc(var(--sat) + 64px);
}
.back-btn,.speaker-btn{
  width:42px; height:42px; border:none;
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text); font-family:var(--font);
  font-size:18px; font-weight:500; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:transform .1s ease, opacity .2s ease;
  border:1px solid rgba(255,255,255,0.06);
}
.back-btn:active,.speaker-btn:active{ transform:scale(0.9); }
.speaker-btn svg{ width:20px; height:20px; display:block; }
.speaker-btn.playing{ opacity:.45; }

.score-label{
  font-size:15px; font-weight:600; color:var(--text);
  letter-spacing:.01em;
  transition:opacity .15s ease;
}

/* ====================================================
   QUIZ — QUESTION AREA
   ==================================================== */
.quiz-question{
  flex:1 1 0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s4);
}
.char-label{
  font-size:clamp(72px,22vw,140px); font-weight:700;
  color:var(--text); line-height:1; text-align:center;
  white-space:nowrap; letter-spacing:-0.02em;
}
.char-label.text-mode{
  font-size:clamp(38px,11vw,76px);
  letter-spacing:.01em;
}

/* ====================================================
   QUIZ — 2x2 ANSWER GRID
   ==================================================== */
.quiz-answers{
  flex-shrink:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  padding:0 var(--s4);
  height:clamp(200px,50vw,280px);
}
.option-btn{
  width:100%; height:100%; border:none;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text); font-family:var(--font);
  font-weight:600; font-size:clamp(18px,5.5vw,28px);
  line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.22);
  transition:transform .1s ease, background .18s ease,
             color .18s ease, border-color .18s ease;
}
.option-btn:active:not(:disabled){ transform:scale(0.95); }
.option-btn:disabled{ opacity:.5; cursor:default; }
.option-btn.two-char{ font-size:clamp(14px,4.5vw,22px); }

/* feedback animations */
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-5px); }
  80%{ transform:translateX(5px); }
}
@keyframes pop{
  0%  { transform:scale(1); }
  45% { transform:scale(1.07); }
  100%{ transform:scale(1); }
}
.option-btn.flash-correct{
  background:var(--correct); color:var(--on-accent);
  border-color:transparent;
  animation:pop .32s ease;
}
.option-btn.flash-wrong{
  background:var(--wrong); color:var(--on-accent);
  border-color:transparent;
  animation:shake .38s ease;
}

/* bottom safe area pad */
.quiz-pad{
  flex-shrink:0;
  height:calc(var(--sab) + 24px);
}

/* ====================================================
   TOAST
   ==================================================== */
.toast{
  position:absolute;
  bottom:calc(var(--sab) + 24px); left:50%;
  transform:translate(-50%,16px);
  max-width:88%;
  background:var(--surf2); color:var(--text);
  font-family:var(--font); font-weight:500; font-size:14px;
  text-align:center; padding:11px 20px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:100;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ====================================================
   RESULTS — full-screen slide-up overlay
   ==================================================== */
.results-panel{
  position:absolute; inset:0;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--sat) + 24px) var(--s6) calc(var(--sab) + var(--s6));
  gap:0;
  opacity:0; transform:translateY(28px);
  transition:opacity .42s ease, transform .42s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.results-panel::-webkit-scrollbar{ display:none; }
.results-panel.show{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}

@keyframes bounceIn{
  0%  { transform:scale(0.6); opacity:0; }
  60% { transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}

.results-celebration{
  font-size:56px; line-height:1;
  margin-bottom:var(--s4); margin-top:var(--s8);
}
.results-panel.show .results-celebration{
  animation:bounceIn .55s cubic-bezier(0.4,0,0.2,1) .08s both;
}
.results-heading{
  font-size:clamp(26px,7vw,34px); font-weight:700;
  color:var(--text); letter-spacing:-0.025em;
  text-align:center; margin:0 0 var(--s6);
}

/* score card */
.results-score-card{
  width:100%; max-width:340px;
  background:var(--surface);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,0.06);
  padding:var(--s6);
  margin-bottom:var(--s5);
  text-align:center;
}
.results-score{
  font-size:clamp(20px,6vw,26px); font-weight:700;
  color:var(--text); letter-spacing:-0.01em; line-height:1.2;
}
.results-sub{
  font-size:13px; font-weight:500; color:var(--muted);
  margin-top:var(--s2); line-height:1.5;
}

/* missed chips */
.missed-wrap{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  width:100%; max-width:340px;
  max-height:150px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-bottom:var(--s5);
}
.missed-wrap::-webkit-scrollbar{ display:none; }
.missed-chip{
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text); border-radius:var(--r-sm);
  padding:8px 13px; font-size:17px; font-weight:500;
  display:flex; flex-direction:column; align-items:center;
  line-height:1.2;
}
.missed-chip .r{ font-size:10px; color:var(--muted); font-weight:500; }

/* action buttons */
.results-actions{
  width:100%; max-width:340px;
  display:flex; flex-direction:column; gap:var(--s3);
  margin-top:auto; padding-top:var(--s4);
}
.result-btn{
  width:100%; border:none; border-radius:var(--r-lg);
  font-family:var(--font); font-weight:700; font-size:16px;
  padding:16px 24px; cursor:pointer;
  transition:transform .1s ease, opacity .15s ease;
}
.result-btn:active{ transform:scale(0.97); }
#try-again-btn{
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 4px 20px var(--accent-glow);
}
#back-to-setup-btn{
  background:var(--surface); color:var(--text);
  border:1px solid rgba(255,255,255,0.08);
}
#back-to-setup-btn:active{ opacity:.7; }