/* ── tokens ───────────────────────────────────────────────── */
:root{
  color-scheme: light dark;
  --fg:#000;
  --muted:#86868b;
  --bg:#fff;
  --sheet:#fff;
  --fill:rgba(0,0,0,.055);
  --fill-2:rgba(0,0,0,.10);
  --sep:rgba(0,0,0,.12);
  --glass:rgba(255,255,255,.86);
  --thumb:#fff;
  --thumb-shadow:0 1px 3px rgba(0,0,0,.13), 0 0 0 .5px rgba(0,0,0,.04);
  --accent:#000;
  --on-accent:#fff;
  --good:#137A38;  --on-good:#fff;          /* verdict colour, the only colour here */
  --bad:#C7241A;   --on-bad:#fff;
  --r-lg:20px; --r-md:14px; --r-sm:11px;
  --ease:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --fg:#fff;
    --muted:#98989d;
    --bg:#000;
    --sheet:#161618;
    --fill:rgba(255,255,255,.08);
    --fill-2:rgba(255,255,255,.16);
    --sep:rgba(255,255,255,.16);
    --glass:rgba(22,22,24,.86);
    --thumb:rgba(255,255,255,.20);
    --thumb-shadow:none;
    --accent:#fff;
    --on-accent:#000;
    --good:#30D158;  --on-good:#000;
    --bad:#FF453A;   --on-bad:#000;
  }
}

/* ── base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:100%;}                        /* honour the user's text size */
html,body{height:100%;margin:0;background:#000;}
body{
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.45;
  letter-spacing:-.011em;                    /* body sits near zero */
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
.wrap{width:100%;max-width:30rem;margin:0 auto;padding:0 1.25rem;}

/* ── base layer (home) ────────────────────────────────────── */
.home{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:var(--bg);
  transform-origin:50% 0;
  overflow:hidden;
  will-change:transform;
}
.home__scroll{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-top:max(1.25rem,env(safe-area-inset-top));
}
.home__pad{height:8.5rem;}

.dock{
  position:absolute;left:0;right:0;bottom:0;
  padding:.5rem 0 max(1rem,env(safe-area-inset-bottom));
  background:var(--glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
}
.dock::before{                                /* scroll edge, not a hard rule */
  content:"";position:absolute;left:0;right:0;bottom:100%;height:1.5rem;
  background:linear-gradient(to top,var(--glass),transparent);
  pointer-events:none;
}

/* ── type ─────────────────────────────────────────────────── */
.hd{padding:1.5rem 0 1.25rem;}
.hd--sheet{padding:.75rem 0 1rem;}
.hd__title{
  margin:0;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",-apple-system,sans-serif;
  font-size:clamp(2.25rem,11vw,2.75rem);
  font-weight:700;
  line-height:1.02;                           /* tight leading at display size */
  letter-spacing:-.03em;                      /* negative tracking as it grows */
}
.hd__title--sm{
  font-family:inherit;font-size:1.75rem;letter-spacing:-.024em;line-height:1.1;
}
.hd__sub{margin:.4rem 0 0;color:var(--muted);font-size:.9375rem;letter-spacing:-.005em;}

.field{margin-bottom:1.5rem;}
.field__label{
  margin:0 0 .5rem .125rem;
  font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;  /* positive tracking when small */
  color:var(--muted);
}

/* ── stats ────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.75rem;}
.stat{background:var(--fill);border-radius:var(--r-md);padding:.875rem .5rem;text-align:center;}
.stat__n{
  display:block;font-size:1.5rem;font-weight:600;line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stat__l{display:block;margin-top:.15rem;font-size:.75rem;color:var(--muted);letter-spacing:0;}

/* ── segmented control ────────────────────────────────────── */
.seg{
  position:relative;isolation:isolate;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--fill);border-radius:var(--r-sm);padding:.125rem;
}
.seg__thumb{
  position:absolute;top:.125rem;bottom:.125rem;left:0;width:0;
  border-radius:calc(var(--r-sm) - .125rem);
  background:var(--thumb);box-shadow:var(--thumb-shadow);
  z-index:-1;will-change:transform;
}
.seg__btn{
  padding:.5rem .25rem;border-radius:calc(var(--r-sm) - .125rem);
  font-size:.875rem;font-weight:500;color:var(--muted);
  transition:color .25s ease;
}
.seg__btn.is-on{color:var(--fg);font-weight:600;}

/* ── chips ────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{
  padding:.5rem .875rem;border-radius:999px;
  font-size:.875rem;background:var(--fill);color:var(--muted);
  transition:background .22s ease,color .22s ease;
}
.chip.is-on{background:var(--accent);color:var(--on-accent);font-weight:600;}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:block;width:100%;padding:1rem;border-radius:var(--r-md);
  font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;text-align:center;
}
.btn--primary{background:var(--accent);color:var(--on-accent);}
.btn--ghost{background:none;color:var(--muted);font-weight:400;padding:.875rem;}
.btn[disabled]{opacity:.35;pointer-events:none;}
.hint{margin:0 0 .5rem;text-align:center;font-size:.8125rem;color:var(--muted);min-height:1.1rem;}

.pressable{transition:transform 110ms var(--ease);will-change:transform;}
.is-pressed{transform:scale(.965);}

/* ── scrim + sheet ────────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;background:#000;opacity:0;
  pointer-events:none;will-change:opacity;
}
.sheet{
  position:fixed;left:0;right:0;top:.875rem;bottom:-3.5rem;
  padding-bottom:3.5rem;                      /* runs past the fold, so resisting up shows no seam */
  background:var(--sheet);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  transform:translate3d(0,100%,0);
  will-change:transform;
  overflow:hidden;
  visibility:hidden;
  display:flex;flex-direction:column;
}
.sheet.is-live{visibility:visible;}
.sheet__inner{position:relative;flex:1;min-height:0;width:100%;max-width:30rem;margin:0 auto;}

.stage{
  position:absolute;inset:0;
  display:flex;flex-direction:column;min-height:0;
  padding:0 1.25rem;
  will-change:transform,opacity;
}
.stage[hidden]{display:none;}

.grab{touch-action:none;flex-shrink:0;}
.grabber{width:2.25rem;height:.3125rem;border-radius:999px;background:var(--fill-2);margin:.5rem auto .375rem;}

.qhd{display:flex;align-items:center;gap:.75rem;min-height:2.25rem;}
.icon-btn{width:2rem;height:2rem;margin-left:-.35rem;display:grid;place-items:center;color:var(--muted);}
.icon-btn svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.qhd__tag{
  flex:1;text-align:center;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
}
.qhd__count{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:2.75rem;text-align:right;}

.bar{height:2px;background:var(--fill);border-radius:2px;overflow:hidden;margin-top:.625rem;}
.bar__fill{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;will-change:transform;}

/* ── prompt ───────────────────────────────────────────────── */
.prompt{
  flex:1;min-height:0;touch-action:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1rem 0;
}
.prompt__main{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  font-size:clamp(5rem,28vw,8.5rem);
  line-height:1;font-weight:400;
  will-change:transform,opacity;
}
.prompt__main.is-romaji{
  font-family:inherit;
  font-size:clamp(3.25rem,17vw,5rem);
  font-weight:600;letter-spacing:-.035em;
}
.prompt__note{margin-top:.9rem;font-size:.8125rem;color:var(--muted);letter-spacing:.005em;}

/* ── tray ─────────────────────────────────────────────────── */
.tray{flex-shrink:0;display:grid;gap:.5rem;padding-bottom:max(1rem,env(safe-area-inset-bottom));}
.feedback{min-height:1.75rem;text-align:center;font-size:.9375rem;color:var(--muted);}
.feedback b{color:var(--fg);font-weight:600;}
.feedback .k{font-family:"Hiragino Sans","Yu Gothic",sans-serif;font-size:1.25rem;}

.answers{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;}
.ans{
  min-height:4.5rem;border-radius:var(--r-md);background:var(--fill);
  font-size:1.5rem;font-weight:500;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}
.ans--kana{font-family:"Hiragino Sans","Yu Gothic",sans-serif;font-size:2.25rem;font-weight:400;}
.ans.is-right,.ans.is-wrong,.ans.is-dim{transition:background .18s ease,color .18s ease,opacity .18s ease;}
.ans.is-right{background:var(--good);color:var(--on-good);font-weight:600;}
.ans.is-wrong{                                /* colour plus a second cue, never colour alone */
  background:var(--bad);color:var(--on-bad);
  text-decoration:line-through;text-decoration-thickness:.08em;
}
.ans.is-dim{opacity:.26;}

.typebox{display:none;gap:.625rem;}
.typebox.is-on{display:grid;}
.typebox__input{
  width:100%;padding:1rem;border-radius:var(--r-md);
  border:1px solid var(--sep);background:var(--fill);color:var(--fg);
  font-family:inherit;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;
  text-align:center;
  -webkit-user-select:text;user-select:text;
  will-change:transform;
}
.typebox__input:focus{outline:none;border-color:var(--fg);}
.typebox__input{transition:background .18s ease,color .18s ease,border-color .18s ease;}
.typebox__input.is-right{background:var(--good);color:var(--on-good);border-color:var(--good);}
.typebox__input.is-bad{
  background:var(--bad);color:var(--on-bad);border-color:var(--bad);
  text-decoration:line-through;text-decoration-thickness:.08em;
}

/* ── summary ──────────────────────────────────────────────── */
.done__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:.25rem;}
.review{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding-bottom:1rem;}
.review__title{
  width:100%;text-align:center;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.25rem;
}
.review__item{background:var(--fill);border-radius:var(--r-sm);padding:.5rem .625rem;text-align:center;min-width:3.25rem;}
.review__k{display:block;font-family:"Hiragino Sans","Yu Gothic",sans-serif;font-size:1.5rem;line-height:1.2;}
.review__r{display:block;font-size:.6875rem;color:var(--muted);margin-top:.1rem;}

/* ── short viewports: tighten the rhythm, don't shrink targets ── */
@media (max-height:44rem){
  .hd{padding:1rem 0 .875rem;}
  .hd__title{font-size:2rem;}
  .stats{margin-bottom:1.25rem;}
  .field{margin-bottom:1.125rem;}
  .home__pad{height:8rem;}
  .stat{padding:.7rem .5rem;}
  .seg__btn{padding:.44rem .25rem;}
  .chip{padding:.44rem .8rem;}
  .ans{min-height:3.875rem;}
  .prompt{padding:.5rem 0;}
}
@media (max-height:38rem){
  .hint{display:none;}                        /* the stats already say what's waiting */
  .home__pad{height:6.5rem;}
}

/* ── accessibility ────────────────────────────────────────── */
@media (prefers-reduced-transparency:reduce){
  .dock{
    background:var(--bg);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-top:1px solid var(--sep);
  }
  .dock::before{display:none;}
}
@media (prefers-contrast:more){
  :root{--muted:#1c1c1e;--sep:rgba(0,0,0,.55);--fill:rgba(0,0,0,.09);--good:#0E6B31;--bad:#A81C13;}
  @media (prefers-color-scheme:dark){
    :root{--muted:#e5e5ea;--sep:rgba(255,255,255,.6);--fill:rgba(255,255,255,.14);--good:#4BE07A;--bad:#FF6B60;}
  }
  .ans,.stat,.chip,.typebox__input{border:1px solid var(--sep);}
  .sheet{border-top:1px solid var(--sep);}
}
@media (prefers-reduced-motion:reduce){
  .pressable{transition:opacity 120ms ease;will-change:opacity;}
  .is-pressed{transform:none;opacity:.55;}
  .seg__btn,.chip,.ans{transition-duration:.12s;}
}