/* ============================================================
   theme.css — 《重返未来：1999》复古印刷风主题
   深色为默认，右上角/右下角可切浅色（data-theme="light"）
   两个页面共用，改风格只改这一个文件
   ============================================================ */

:root{
  --bg:#0B0B0C;
  --card:#1E2020;
  --card2:#161718;
  --border:rgba(187,168,147,.28);
  --border2:rgba(187,168,147,.45);
  --text:#E9DCCD;
  --muted:#BBA893;
  --hint:#A99B8C;
  --info:#D07048;
  --info-bg:rgba(181,88,41,.14);
  --accent:#B55829;
  --accent-dark:#8A3F1C;
  --hl:transparent;
  --hl-text:#D07048;

  --font-cn:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",serif;
  --font-en:"EB Garamond","Source Serif 4",Georgia,"Times New Roman",serif;
  /* 大号单词专用：Didone 系（Bodoni/Didot），笔画粗细对比强烈 */
  --font-display:"Bodoni Moda","Didot","Playfair Display","Times New Roman",serif;
  --radius:2px;
}

/* 浅色：旧纸感，不是纯白 */
html[data-theme="light"]{
  --bg:#EFE7DA;
  --card:#FBF6EE;
  --card2:#F5EEE3;
  --border:rgba(58,44,30,.24);
  --border2:rgba(58,44,30,.42);
  --text:#2A211A;
  --muted:#6B5B4B;
  --hint:#8C7B69;
  --info:#B55829;
  --info-bg:rgba(181,88,41,.10);
  --hl-text:#B55829;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-en),var(--font-cn);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

/* ---- 质感 1：噪点颗粒 ---- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---- 质感 2：暗角 ---- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%);
}
html[data-theme="light"] body::before{opacity:.035;}
html[data-theme="light"] body::after{display:none;}

/* ---- 形态：去圆角、去阴影、靠描边分层 ---- */
.card,.sugcard,.searchbar input,.searchbar button,.tab,.chip,.badge,.iconbtn,
.speakbtn,.sline,.detail-panel,.worditem,.pill{
  border-radius:var(--radius)!important;
  box-shadow:none!important;
}
.card,.sugcard,.worditem{
  background:var(--card);
  border:1px solid var(--border);
}
.sugcard:hover,.sugcard.on,
.card.hit:hover,.card.hit.on,
.worditem:hover{
  border-color:var(--accent)!important;
  background:var(--info-bg)!important;
}
.card.hit.on{border-color:var(--accent);}

/* ---- 搜索区 ---- */
.searchbar input{
  background:var(--card2);
  color:var(--text);
  border:1px solid var(--border2);
  font-family:var(--font-en),var(--font-cn);
  font-size:16px;
  padding:10px 14px;
}
.searchbar input::placeholder{color:var(--hint);}
.searchbar input:focus{border-color:var(--accent);outline:none;}
.searchbar button{
  background:var(--accent);
  color:#F6E8D9;
  border:1px solid var(--accent);
  font-family:var(--font-cn);
  letter-spacing:.08em;
  padding:10px 22px;
}
.searchbar button:hover{background:var(--accent-dark)!important;border-color:var(--accent-dark)!important;color:#F6E8D9!important;}

/* ---- 导航 / 标签 ---- */
.tab{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  font-family:var(--font-cn);
  letter-spacing:.08em;
}
.tab:hover{border-color:var(--accent);color:var(--info);}
.tab.on{background:var(--accent)!important;color:#F6E8D9!important;border-color:var(--accent)!important;}
.chip{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:var(--font-cn);}
.chip.on{background:var(--accent)!important;color:#F6E8D9!important;border-color:var(--accent)!important;}
.badge{background:var(--info-bg)!important;color:var(--info)!important;}
.pill{background:var(--info-bg);color:var(--text);border:1px solid var(--border);font-family:var(--font-en);}

/* ---- 高亮：橙字下划线，不用黄底 ---- */
mark{
  background:transparent!important;
  color:var(--hl-text)!important;
  border-bottom:1px solid var(--hl-text);
  font-weight:500;
  padding:0 1px;
}

/* ---- 文字层级 ---- */
h1{font-family:var(--font-cn);letter-spacing:.08em;font-weight:500;}
.en{font-family:var(--font-en);font-size:17px;line-height:1.75;}
.cn,.note,.meta,.empty{font-family:var(--font-cn);}
.meta{color:var(--muted);}
.empty,.note{color:var(--hint);}
a{color:var(--info);}
.star.on{color:#D07048!important;}
.star{color:var(--hint);}

/* ---- 详情页大号单词：Didone 衬线，字号随词长自适应 ---- */
.wbig{
  font-family:var(--font-display)!important;
  font-size:clamp(28px, 6.6vw, 40px)!important;
  font-weight:400!important;          /* Didone 用 regular 最优雅，加粗反而笨重 */
  line-height:1.12!important;
  letter-spacing:.005em!important;
  color:#F6E8D9;
  text-shadow:none;
  overflow-wrap:break-word;          /* 超长单词也不会撑破容器 */
}
html[data-theme="light"] .wbig{color:#1A1310;}
/* 单词行：所有元素按文字基线对齐，而不是垂直居中 */
.whead{align-items:baseline!important;gap:10px!important;}
.speakbtn,.star,.phon{align-self:baseline;}
/* 星标和音标跟着单词走，别抢戏 */
.phon{font-family:var(--font-en)!important;font-size:15px!important;letter-spacing:.02em;}

/* ---- 详情页单词头 ---- */
.phon{font-family:var(--font-en);color:var(--muted);}
.speakbtn{background:var(--card2)!important;color:var(--muted)!important;border:1px solid var(--border2)!important;font-family:var(--font-cn);}
.speakbtn:hover,.speakbtn.playing{border-color:var(--accent)!important;color:var(--info)!important;background:var(--info-bg)!important;}
.iconbtn{background:var(--card2);}
select{background:var(--card2);color:var(--text);border:1px solid var(--border2);border-radius:var(--radius);font-family:var(--font-cn);}

/* ---- 半调网点装饰（克制：只用在小标题旁） ---- */
.sec-title{font-family:var(--font-cn);letter-spacing:.1em;color:var(--muted);}

/* ---- 主题切换按钮 ---- */
.theme-toggle{
  position:fixed; right:16px; bottom:16px; z-index:10000;
  padding:7px 14px; font-size:12px; letter-spacing:.14em;
  background:var(--card); color:var(--muted);
  border:1px solid var(--border2); border-radius:var(--radius);
  cursor:pointer; font-family:var(--font-cn);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--info);}