:root{
  /* Core palette – dark mode (ink / charcoal) */
  --bg:#0f1115;                /* ink black */
  --paper:#161a20;             /* subtle lift */
  --paper2:#14181e;
  --card:#1b2027;

  --text:#f3f4f6;              /* soft white */
  --muted:#9aa3b2;             /* cool grey */
  --border: rgba(255,255,255,.08);
  --shadow: rgba(0,0,0,.38);   /* softened */

  /* Accent – restrained vermilion (torii-inspired, but subtle) */
  --accent:#b11226;            /* deep vermilion */
  --accentSoft: rgba(177,18,38,.18);

  /* Keep legacy vars for compatibility with existing CSS */
  --indigo: var(--accent);
  --vermilion: var(--accent);
  --sakura: rgba(255, 200, 210, .35);

  --good:#4fbf8f;
  --almost:#c08a2e;
  --bad:#d64545;

  /* Platinum (mastery) + input focus accent */
  --platinum:#d4af37;
  --platinumHi:#fff1bf;
  --platinumLo:#b38600;
  --fieldAccent:#5866b8;
  --fieldFocus: rgba(88,102,184,.20);

  --focus: rgba(177,18,38,.22);
  --input:#12161c;
  --overlay: rgba(0,0,0,.60);

  --radius:18px;
  --btnRadius:12px;
  --tap: 44px;
}

@media (prefers-color-scheme: light){
  :root{
    /* Light mode – washi paper */
    --bg:#f5f3ef;
    --paper:#ffffff;
    --paper2:#faf9f7;
    --card:#ffffff;

    --text:#1c1f24;
    --muted:#6b7280;
    --border: rgba(0,0,0,.08);
    --shadow: rgba(0,0,0,.06); /* softened */

    --accent:#b11226;
    --accentSoft: rgba(177,18,38,.14);

    /* Keep legacy vars for compatibility */
    --indigo: var(--accent);
    --vermilion: var(--accent);
    --sakura: rgba(255, 200, 210, .28);

    --good:#158a5f;
    --almost:#9a6b1a;
    --bad:#b42323;

    /* Platinum tier (mastery) */
    --platinum:#d4af37;
    --platinumHi:#fff1bf;
    --platinumLo:#b38600;

    /* Input focus accent (separate from vermilion so errors can own red) */
    --fieldAccent:#5866b8;
    --fieldFocus: rgba(88,102,184,.20);

    --focus: rgba(177,18,38,.18);
    --input:#ffffff;
    --overlay: rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* iOS PWA (standalone) status bar handling
   - With apple-mobile-web-app-status-bar-style=black-translucent, iOS draws white status icons.
   - Add a very subtle scrim behind the status bar area in light mode for legibility,
     while keeping an edge-to-edge background. */
body::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  pointer-events: none;
  z-index: 5;
  background: rgba(0,0,0,.0); /* dark mode: effectively off */
}
@media (prefers-color-scheme: light){
  body::before{
    background: rgba(0,0,0,.10);
  }
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 18px);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

/* Brand logo */
.brand{
  display:inline-flex;
  align-items:center;
  user-select:none;
  line-height:1;
  color: var(--text); /* ensures SVG currentColor matches theme */
}

.brandLogo{
  height: 38px;
  width: auto;
  display:block;
}

button{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 55%, var(--card));
  color:var(--text);
  border-radius: var(--btnRadius);
  padding: 9px 11px;
  cursor:pointer;
  font-size:14px;
  min-height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height: 1;
}

button.primary{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
button.primary:hover{
  background: color-mix(in oklab, var(--accent) 85%, black);
}

button.ghost{
  background: color-mix(in oklab, var(--bg) 68%, var(--card));
}
button.icon{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  min-height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* SVG ensures true centering */
.icon svg{
  width: 22px;
  height: 22px;
  display:block;
}
.iconGlyph{
  font-size: 20px;
  line-height: 1;
  display:block;
  opacity: .95;
}
button:disabled{opacity:.5;cursor:not-allowed}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--paper2));
  box-shadow: 0 10px 22px var(--shadow); /* reduced */
  padding: 16px;
  position: relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(560px 240px at 18% 0%,
    var(--accentSoft),
    transparent 62%
  );
  opacity:.45; /* reduced */
  pointer-events:none;
}
.card > *{position:relative}

.stack{
  display:grid;
  gap:12px;
}

.promptCard{
  text-align:center;
  padding-top: 16px;
  padding-bottom: 12px;
}


/* Cue-card styling (prompt doubles as feedback/definition) */
.promptCard.cueCard{
  padding-top: 16px;
  padding-bottom: 10px;
  overflow: visible; /* allow the stacked-paper effect */
  /* Removed top stripe; rely on paper tones + stacked layer for card feel */
  background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 92%, white), var(--paper2));
  border-color: color-mix(in oklab, var(--border) 85%, var(--accent) 15%);
}

/* Stacked paper: a faint “second card” behind */
.promptCard.cueCard::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translate(4px, 4px);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--border) 92%, var(--accent) 8%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 88%, white), color-mix(in oklab, var(--paper2) 92%, var(--bg)));
  box-shadow: 0 10px 22px var(--shadow);
  pointer-events:none;
  opacity:.55;
  z-index: 0;
}

/* Bring content above the stacked layer */
.promptCard.cueCard > *{ position:relative; z-index: 1; }

.promptDivider{
  height:1px;
  margin: 6px 0 8px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.promptFeedback{
  text-align:center;
  /* No container box: separators in the card are enough */
  padding: 2px 4px;
  border-radius: 0;
  border: none;
  background: transparent;
}
.promptFeedbackTop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:4px;
}
/* Label removed; rely on a single chip + content */
.promptFeedbackLabel{ display:none; }

.promptFeedbackChip{
  font-size:12px;
  font-weight: 950;
  letter-spacing:.2px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 50%, var(--card));
  color: var(--muted);
  white-space: nowrap;
}

.promptFeedbackText{
  margin:0;
  line-height: 1.25;
}
.promptFeedbackText .mini{ margin: 0; }

/* System messages vs. meaning "prize" */
.promptFeedback.system{
  /* no container styling */
}
.promptFeedback.system .promptFeedbackChip{
  border-color: color-mix(in oklab, var(--bad) 35%, var(--border));
  background: color-mix(in oklab, var(--bad) 10%, transparent);
  color: color-mix(in oklab, var(--bad) 75%, var(--muted));
}

.promptFeedback.meaning{
  /* no container styling */
}
.promptFeedback.meaning .promptFeedbackChip{
  border-color: color-mix(in oklab, var(--good) 28%, var(--border));
  background: color-mix(in oklab, var(--good) 8%, transparent);
  color: color-mix(in oklab, var(--good) 70%, var(--muted));
}

.promptFeedback.meaning.isAlmost .promptFeedbackChip{
  border-color: color-mix(in oklab, var(--almost) 35%, var(--border));
  background: color-mix(in oklab, var(--almost) 10%, transparent);
  color: color-mix(in oklab, var(--almost) 75%, var(--muted));
}

.promptFeedbackNote{
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}

/* Placeholder meaning (e.g. “Hiragana character”) should read as non-definition */
.promptMeaningPlaceholder{ font-style: italic; }

/* Default prompt font (rounded/system) */
.bigPrompt{
  position: relative;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: clamp(46px, 9vw, 76px);
  line-height:1.05;
  margin: 6px 0 10px;
  letter-spacing:.5px;
  white-space: pre-wrap;
  text-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 8%, transparent); /* reduced */
}

/* Highlight kana in the big prompt after repeated wrong attempts */
.bigPrompt .promptWrong{
  color: var(--bad);
  text-shadow: none;
}

/* Highlight all kana in the big prompt when the answer is fully correct */
.bigPrompt .promptCorrect{
  color: var(--good);
  text-shadow: none;
}

/* Highlight kana that caused an Almost verdict */
.bigPrompt .promptAlmost{
  color: var(--almost);
  text-shadow: none;
}

/* Make “retry” state more obvious */
.retryCallout{
  margin: 10px 0 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--bad) 55%, var(--border));
  background: color-mix(in oklab, var(--bad) 12%, transparent);
  font-weight: 950;
  letter-spacing: .2px;
}

@keyframes retryWiggle{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-3px); }
  40%{ transform: translateX(3px); }
  60%{ transform: translateX(-2px); }
  80%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

.answerInput.retryActive{
  border-color: color-mix(in oklab, var(--bad) 60%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--bad) 18%, transparent);
}

.answerInput.retryWiggle{
  animation: retryWiggle .28s ease;
}

/* Optional Mincho/serif prompt font */
html.kanaSerif .bigPrompt{
  position: relative;
  font-family:
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Serif",
    "Noto Serif JP",
    ui-serif,
    Georgia,
    serif;
  letter-spacing: .3px;
}

/* Optional: emphasise word gaps when 'Show spaces' is enabled */
html.showSpaces .bigPrompt{
  position: relative;
  word-spacing: 0.3em;
}

.promptMeta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:8px;
}

.result{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  box-shadow: 0 8px 18px var(--shadow); /* reduced */
  padding: 14px 14px;
  min-height: 124px;
}
.status{
  margin:0 0 10px;
  font-weight:950;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.status.good{color:var(--good)}
.status.almost{color:var(--almost)}
.status.bad{color:var(--bad)}

.defBox{
  border:1px solid var(--border);
  border-radius: 16px;
  padding:12px 12px;
  background: color-mix(in oklab, var(--bg) 35%, var(--card));
  margin:10px 0 10px;
}
.defLabel{margin:0 0 4px;color:var(--muted);font-size:12px}
.defText{margin:0;font-size:19px;font-weight:950;line-height:1.25}
.mini{margin:6px 0;color:var(--muted);font-size:13px;line-height:1.45}

/* Make the text entry section the focal point + center aligned */
.answerCard{
  padding-top: 14px;
  border-color: color-mix(in oklab, var(--fieldAccent) 55%, var(--border));
  box-shadow:
    0 12px 28px var(--shadow), /* reduced */
    0 0 0 1px color-mix(in oklab, var(--fieldAccent) 8%, transparent); /* reduced */
  text-align:center;
}
.answerCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--fieldAccent) 18%, transparent),
    transparent 60%
  );
  opacity:.45; /* reduced */
  pointer-events:none;
}
.answerInner{
  max-width: 560px;
  margin: 0 auto;
}

.answerRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.answerField{
  position:relative;
  flex:1;
  min-width: 0;
}

.answerField input[type="text"]{
  padding-right: 44px; /* room for the return hint */
}

.enterHint{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: .55;
  pointer-events:none;
  user-select:none;
}

.answerRow > button{
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 13.5px;
  white-space: nowrap;
}

input[type="text"]{
  width:100%;
  border:1px solid var(--border);
  background: var(--input);
  color:var(--text);
  border-radius: 14px;
  padding: 13px 12px;
  font-size:18px;
  min-height: calc(var(--tap) + 4px);
  outline:none;
  text-align:center;
}
input[type="text"]:focus{
  border-color: color-mix(in oklab, var(--fieldAccent) 75%, var(--border));
  box-shadow: 0 0 0 4px var(--fieldFocus);
}

.btns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  justify-content:center;
}
.btns button{
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 13.5px;
}

.bottom{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.statCard{
  border: 1px solid color-mix(in oklab, var(--border) 90%, var(--accent) 10%);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--paper) 86%, white), var(--paper2));
  box-shadow: 0 8px 18px var(--shadow), inset 0 1px 0 color-mix(in oklab, white 18%, transparent), inset 0 -10px 22px color-mix(in oklab, black 6%, transparent);
  padding: 12px 12px;
  min-height: 84px;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* Metric dot (hanko-style, but meaningful) */
.statCard::after{
  content:"";
  position:absolute;
  right:10px;
  top:10px;
  transform: rotate(-10deg);
  width:10px;
  height:10px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--muted) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--muted) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
  opacity: .9;
}

/* Dot tiers */
.statCard.tier-red::after{
  background: color-mix(in oklab, var(--bad) 88%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bad) 40%, transparent);
}
.statCard.tier-amber::after{
  background: color-mix(in oklab, var(--almost) 90%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--almost) 40%, transparent);
}
.statCard.tier-green::after{
  background: color-mix(in oklab, var(--good) 90%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--good) 38%, transparent);
}
.statCard.tier-platinum::after{
  background: linear-gradient(135deg,
    #fff2b3 0%,
    #ffd36a 28%,
    #ffefc7 55%,
    #f3b94a 78%,
    #fff4c9 100%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, #b07a12 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* Dot meaning tiers */
.statCard.dotRed::after{
  background: color-mix(in oklab, var(--bad) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bad) 40%, transparent);
  opacity: .82;
}
.statCard.dotAmber::after{
  background: color-mix(in oklab, var(--almost) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--almost) 42%, transparent);
  opacity: .82;
}
.statCard.dotGreen::after{
  background: color-mix(in oklab, var(--good) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--good) 42%, transparent);
  opacity: .82;
}
.statCard.dotPlatinum::after{
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--platinumHi) 92%, white) 0%,
      var(--platinum) 45%,
      color-mix(in oklab, var(--platinumLo) 92%, black) 72%,
      color-mix(in oklab, var(--platinumHi) 92%, white) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--platinum) 48%, transparent),
    0 0 12px color-mix(in oklab, var(--platinum) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.35);
  opacity: .9;
}
.statLabel{margin:0 0 2px;color:var(--muted);font-size:12px}
.statValue{margin:0;font-size:26px;font-weight:950;letter-spacing:.2px;line-height:1.05}
.statSub{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.35}

/* Trouble card affordance + pulses */
.troubleCard{
  cursor: pointer;
  user-select: none;
}
.troubleCard:focus{
  outline: none;
  box-shadow:
    0 8px 18px var(--shadow),
    0 0 0 4px var(--focus);
}

@keyframes troubleAddPulse{
  0%{ transform: translateY(0) scale(1); box-shadow: 0 8px 18px var(--shadow); }
  25%{ transform: translateY(-1px) scale(1.03); box-shadow: 0 14px 26px var(--shadow); }
  60%{ transform: translateY(0) scale(1.01); }
  100%{ transform: translateY(0) scale(1); }
}
@keyframes troubleRemovePulse{
  0%{ transform: translateY(0) scale(1); box-shadow: 0 8px 18px var(--shadow); }
  35%{ transform: translateY(0) scale(0.985); }
  65%{ transform: translateY(0) scale(1.01); }
  100%{ transform: translateY(0) scale(1); }
}
.troubleCard.pulseAdd{
  border-color: color-mix(in oklab, var(--bad) 45%, var(--border));
  animation: troubleAddPulse .42s ease;
}
.troubleCard.pulseRemove{
  border-color: color-mix(in oklab, var(--good) 45%, var(--border));
  animation: troubleRemovePulse .46s ease;
}

.pills{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.pill{
  font-size:12px;color:var(--muted);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  background: color-mix(in oklab, var(--bg) 55%, var(--card));
  white-space:nowrap;
}

/* Pool size line in Settings */
.poolCountLine{
  margin: 8px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 62%, var(--card));
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}

/* Sentence category box behavior */
.sentenceCatBox{
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg) 62%, var(--card));
}
.sentenceCatBox.collapsed{
  display:none;
}
.sentenceCatBox.disabled{
  opacity: .55;
  filter: grayscale(.2);
  pointer-events: none;
}

/* Keep metrics in a single row on mobile (shrink rather than stack) */
@media (max-width: 640px){
  .bottom{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .statCard{padding:10px; min-height:76px}
  .statValue{font-size:22px}
  .statLabel{font-size:11px}
  .statSub{font-size:11px; margin-top:4px}
}
@media (max-width: 420px){
  .bottom{grid-template-columns: repeat(3, minmax(0, 1fr));}
  .statCard{padding:9px; min-height:72px}
  .statValue{font-size:20px}
  .statLabel{font-size:10.5px}
  .statSub{font-size:10.5px}
}

@media (max-width: 520px){
  .card{padding:14px}
  .bigPrompt{font-size: clamp(44px, 11vw, 64px)}
  .btns{gap:8px}
  .btns button{font-size:13px}
  .statValue{font-size:24px}
  .pill{font-size:11.5px}
  input[type="text"]{font-size:18px}
  .brandLogo{height:34px}
}

/* Drawer */
.drawerOverlay{
  position:fixed;
  inset:0;
  background: var(--overlay);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 50;
}
.drawerOverlay.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width: min(380px, 92vw);
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 28px var(--shadow); /* reduced */
  transform: translateX(102%);
  transition: transform .22s ease;
  z-index: 60;
  padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 16px);
  overflow:auto;
}
.drawer.open{transform: translateX(0)}
.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

/* ✅ Bigger "Settings" heading */
.drawerTitle{
  margin:0;
  font-size:18px;      /* was 14px */
  font-weight: 950;
  letter-spacing: .2px;
}

.drawerSection{
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:12px;
}
.drawerSection:first-of-type{border-top:none;padding-top:0;margin-top:0}
.drawerSection h2{margin:0 0 10px;font-size:13px}
label{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px;margin:8px 0}
select{
  width:100%;
  border:1px solid var(--border);
  background: var(--input);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  font-size:14px;
  min-height: var(--tap);
  outline:none;
}
.hintBox{
  border:1px dashed var(--border);
  border-radius:14px;
  padding:10px 12px;
  background: color-mix(in oklab, var(--bg) 22%, var(--card));
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  margin-top:10px;
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px 8px;
  color:var(--muted);
  background: color-mix(in oklab, var(--bg) 25%, var(--card));
  display:inline-block;
  margin:2px 6px 2px 0;
}

/* Tutorial / Help modal */
.modalOverlay{
  position:fixed; inset:0;
  background: var(--overlay);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 80;
}
.modalOverlay.open{opacity:1;pointer-events:auto}
.modal{
  position:fixed;
  left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.98);
  width:min(560px, 92vw);
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 40px var(--shadow); /* reduced */
  padding: 14px;
  max-height: 82vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 90;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.modal.open{
  opacity:1;
  pointer-events:auto;
  transform: translate(-50%,-50%) scale(1);
}
.modal h3{margin:0 0 8px;font-size:16px}
.modal ul{margin:10px 0 0 18px;color:var(--muted);font-size:13px;line-height:1.5}

/* Help content tidying */
.helpSections{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.helpSection{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--bg) 35%, var(--card));
  padding: 10px 12px;
}
.helpSection h4{
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: .2px;
}
.helpSection ul{
  margin: 6px 0 0 18px;
}

/* Trouble modal + list */
.troubleModal{
  width: min(520px, 92vw);
}
.troubleList{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.troubleRow{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--bg) 35%, var(--card));
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.troubleKana{
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
  min-width: 40px;
}
.troubleMeta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
  align-items:center;
  color: var(--muted);
  font-size: 12px;
}
.troublePill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 55%, var(--card));
  margin-right: 6px;
}
.troubleEmpty{
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in oklab, var(--bg) 22%, var(--card));
}

/* ✅ Version tag (bottom-right) */
.versionTag{
  position: fixed;
  right: calc(env(safe-area-inset-right) + 10px);
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  font-size: 11px;
  color: var(--muted);
  opacity: .75;
  letter-spacing: .2px;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
  z-index: 40;
}

.versionTag:hover{
  opacity: 1;
  text-decoration: underline;
}

.versionTag:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--accent) 70%, transparent);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Smaller close button for welcome modal */
#closeHelpBtn.closeIcon{width:38px;height:38px}
#closeHelpBtn.closeIcon svg{width:18px;height:18px}