/* iOS 上的 Chrome 底层也是 WebKit，换浏览器规避不了 Safari 的渲染差异。 */

:root {
  --bg: #fbfbfa;
  --surface: #ffffff;
  --fg: #1c1c1e;
  --muted: #8a8a8e;
  --line: #e3e3e0;

  --r1: #d0524d;
  --r2: #4577ad;
  --r3: #3f9068;

  --imp-super: #c2410c;
  --imp-high: #4577ad;

  --col: 820px;          /* 内容列宽上限：27 寸屏上不拉满 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214;
    --surface: #1a1a1d;
    --fg: #f2f2f0;
    --muted: #8e8e93;
    --line: #2e2e32;

    --r1: #c9534e;
    --r2: #4d7fb8;
    --r3: #429a70;

    --imp-super: #e8834a;
    --imp-high: #6d9bd1;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 用 hidden 控制显隐，必须压过下面的 display:flex */
[hidden] { display: none !important; }

html {
  height: 100dvh;        /* 不用 vh：地址栏收放时 vh 会算错 */
  overscroll-behavior: none;
}

body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  /* 防止连点评分按钮时选中文字 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 日文字体明确指定，不依赖默认 fallback ——
   否则中日汉字会用同一套字形，「直」「骨」这类字会显示成中文写法。 */
.jp {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic Medium", "Noto Sans JP", sans-serif;
}

section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 大屏上把整个 App 收成一个居中的窗口，
   否则 27 寸屏上单词在正中、按钮贴在一米开外的屏幕底边，鼠标要跑很远。 */
/* 门槛用 min-width: 1100px 而不是只看高度 ——
   iPad 竖屏是 768×1024，只看高度的话会被限成 820px、上下各空 100px。
   平板和手机应该铺满整屏，只有桌面显示器才收成窗口。 */
@media (min-width: 1100px) and (min-height: 880px) {
  section { flex: 0 0 auto; height: 820px; }
}

/* 宽屏再加一层可见边框。
   纯深色背景上内容会「漂」着，没有参照物就显得元素偏小 ——
   给个面板把它框住，同样的按钮看起来就正常了。 */
@media (min-width: 1100px) and (min-height: 880px) {
  section {
    width: min(100%, 900px);
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
  }
}

/* token / loading / error / done 这几屏居中 */
#screen-token, #screen-loading, #screen-error, #screen-done {
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem;
  text-align: center;
}

h1 { font-size: 1.6rem; font-weight: 600; }

/* 认证失败必须看得见。原来失败时只是静默切回输入界面，
   画面闪一下又变回一模一样 —— 用户完全不知道发生了什么，
   只会一直重按（实测有人连按了 29 次）。 */
.error {
  color: var(--r1);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 26rem;
}
.hint { color: var(--muted); font-size: 1rem; line-height: 1.6; }

input {
  width: 100%;
  max-width: 26rem;
  min-height: 52px;
  padding: .8rem 1rem;
  font-size: 16px;            /* 小于 16px 时 iOS 会自动放大页面 */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  -webkit-user-select: text;
  user-select: text;
}

button {
  font-family: inherit;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}

#token-save, #error-retry, #done-again {
  width: 100%;
  max-width: 26rem;
  min-height: 56px;
  font-size: 1.05rem;
  font-weight: 600;
}

/* ---------------- 卡片屏 ---------------- */

#topbar, #card, #controls {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.25rem 0;
  font-size: .9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 徽章推到最右，按钮和进度留在左边 */
#meta { display: flex; gap: .5rem; align-items: center; margin-left: auto; }

/* 换一批：正方形，边长对齐评分按钮的高度。
   仍留在左上角远离拇指区，靠「描边而非填色」和低对比度的图标
   跟底部那三个实心大按钮区分开 —— 尺寸相当，但视觉重量更轻。 */
#btn-next-batch {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 16px;
  color: var(--muted);
  background: transparent;
}
#btn-next-batch svg { width: 34px; height: 34px; }
#btn-next-batch:active { color: var(--fg); }

.badge {
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* 重要度按等级配色，一眼看出这个词值不值得花力气 */
#importance[data-imp="超重要"] { color: var(--imp-super); border-color: var(--imp-super); }
#importance[data-imp="重要"]   { color: var(--imp-high);  border-color: var(--imp-high); }
#importance[data-imp="普通"],
#importance[data-imp="希少"]   { color: var(--muted); }

#mastery { color: var(--muted); font-weight: 500; }
#mastery[data-new="true"] { opacity: .55; }

#card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 1.5rem;
  text-align: center;
  min-height: 0;              /* 没有它，长内容会把 footer 挤出屏幕 */
  overflow-y: auto;
}

/* 字号按内容长度分档，档位由 app.js 写在 data-len 上。
   越短给得越大 —— 実測 70% 的単語只有 1-3 字，不该和长短语共用一个字号。
   每档内部仍用 clamp 随视口缩放。 */

#word, #reading, #meaning {
  /* 长短语（イニシアティヴ／主導権、取り返しがつかない）要能断行。
     日文本来就能逐字换行，anywhere 是为了 ／ 这类符号连成的长串兜底。 */
  overflow-wrap: anywhere;
  max-width: 100%;
}

#word { font-weight: 500; line-height: 1.2; }
#word[data-len="0"] { font-size: clamp(3.75rem, 22vw, 7.5rem); }   /* ≤3 字  70% */
#word[data-len="1"] { font-size: clamp(3rem,   16vw, 5.75rem); }   /* 4-5 字 27% */
#word[data-len="2"] { font-size: clamp(2.25rem, 11vw, 4.25rem); }  /* 6-8 字 3.6% */
#word[data-len="3"] { font-size: clamp(1.85rem, 8.5vw, 3.25rem); } /* 9+ 字  0.3% */

#answer { display: flex; flex-direction: column; gap: 1rem; }

#reading { color: var(--muted); line-height: 1.35; }
#reading[data-len="0"] { font-size: clamp(1.75rem, 8vw, 2.9rem); }   /* ≤6  81% */
#reading[data-len="1"] { font-size: clamp(1.5rem,  6.5vw, 2.4rem); } /* 7-10 18% */
#reading[data-len="2"] { font-size: clamp(1.25rem, 5vw, 1.9rem); }   /* 11+  1.3% */

#meaning { line-height: 1.5; }
#meaning[data-len="0"] { font-size: clamp(1.65rem, 7.5vw, 2.75rem); }  /* ≤6   77% */
#meaning[data-len="1"] { font-size: clamp(1.4rem,  6vw, 2.25rem); }    /* 7-12 21% */
#meaning[data-len="2"] { font-size: clamp(1.2rem,  5vw, 1.75rem); }    /* 13-20 1.5% */
#meaning[data-len="3"] { font-size: clamp(1.05rem, 4.2vw, 1.4rem); }   /* 21+  0.2% */

/* 活用形（動詞・い形容詞のみ）。比释义小一档、颜色更淡 ——
   是「顺便扫一眼」的补充信息，不能和単語/释义抢注意力，
   否则会拖慢翻卡节奏。不参与上面的 data-len 分档：
   条数固定 3~4 个，长度差异不大。 */
#forms {
  font-size: clamp(.95rem, 4vw, 1.25rem);
  color: var(--muted);
  line-height: 1.85;
  opacity: .85;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* margin-top:auto + flex 布局，不用 position:fixed ——
   iOS 地址栏收放时 fixed 元素会漂移。 */
#controls {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}

#btn-reveal {
  width: 100%;
  min-height: 76px;
  font-size: 1.2rem;
  font-weight: 600;
}

#ratings { display: flex; gap: .75rem; }

.rating {
  flex: 1;
  min-height: 96px;           /* 远超 44px 下限：iPad 上要能盲按 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: #fff;
  border: none;
  padding: .5rem .35rem;
}

.rating b     { font-size: 1.15rem; font-weight: 650; line-height: 1.2; }
.rating small { font-size: .75rem; opacity: .8; font-weight: 400; }

.r1 { background: var(--r1); }
.r2 { background: var(--r2); }
.r3 { background: var(--r3); }

/* 按下去要有反馈，触屏上没有 hover */
button:active { filter: brightness(.88); transform: scale(.985); }

/* iPhone 竖屏：按钮再紧凑一点，但仍然比原来大得多 */
@media (max-width: 430px) {
  #ratings { gap: .5rem; }
  .rating { min-height: 88px; }
  .rating b { font-size: 1.02rem; }
  .rating small { font-size: .68rem; }
  #btn-reveal { min-height: 68px; }
  #card { gap: 1.25rem; padding: 1rem; }
  #btn-next-batch { width: 88px; height: 88px; }   /* 与 .rating 的 88px 等高 */
  #btn-next-batch svg { width: 32px; height: 32px; }
  #topbar { padding: .5rem 1rem 0; gap: .75rem; }
}

/* 窄到放不下三列提示文字时，只留主标签 */
@media (max-width: 340px) {
  .rating small { display: none; }
}

/* 横屏（iPhone 横放、iPad 分屏）：竖直空间紧张，压扁按钮 */
@media (max-height: 500px) {
  .rating { min-height: 64px; }
  .rating small { display: none; }
  #btn-reveal { min-height: 56px; }
  #card { gap: .75rem; }
  #btn-next-batch { width: 56px; height: 56px; }
  #btn-next-batch svg { width: 24px; height: 24px; }
}

/* 宽屏放大按钮。
   注意：这一段必须放在文件**末尾**。
   同权重的规则后写的赢，写在基础 .rating 之前的话会被它覆盖掉。 */
@media (min-width: 1100px) and (min-height: 880px) {
  #btn-reveal { min-height: 84px; font-size: 1.3rem; }
  .rating { min-height: 112px; }
  #btn-next-batch { width: 112px; height: 112px; }
  #btn-next-batch svg { width: 40px; height: 40px; }
  .rating b { font-size: 1.3rem; }
  .rating small { font-size: .85rem; }
}