/* ============================================================================
   社区投票（落在玩具页 toys.html 正文最上面）—— 「首发职业投票」+「你玩部落还是联盟？」
   ----------------------------------------------------------------------------
   数据来自本站服务端 `GET /__vote`（`_serve.py` 自己数的，见那里的投票段注释）。
     · 未投票（`.vt-card.lock`）：每个选项都能点，但**只显示图标 / 选项名，不显示占比**
     · 已投票（`.vt-card.reveal`）：摊开百分比 + 比例条；自己的选择亮金边 + 打勾，
       其余选项变暗且不可再点
     · 拿不到数据（服务端没起来 / 断网）：**整块不显示**（起手就带 hidden），
       绝不留一个空框 —— 跟页脚访问量、直播间卡片同一个降级姿势。
     · ⚠️ **例外：双击 HTML 文件打开（file://）不走"静默消失"**，改成显示一段说明
       （`.vt-off`）。那种场景下 fetch 必然失败，静默消失会让人以为"功能没做"
       —— 血染 2026-09-17 就是这么问的。宁可写明"这块要连服务器"。
   ⚠️ 四条硬规矩：
     ① 外层 `.vote-outer` 宽度由父级 `.wrap` 决定，别再套一层 max-width / padding ——
        同页各板块左右边界必须落在同一条线上，这是全站版面基调。
     ② 起手 `hidden`，`display:grid` 会盖掉 `[hidden]` 的默认 `none`
        ⇒ **必须显式写 `.vote[hidden]{display:none}`**（这个坑 live.css 记过一次）。
     ③ 尺寸要**小**：整块高度按「表头 + 一行选项 + 一条比例条」预算，别再往里加东西。
        血染对首页版面敏感（v46 铺 11 张卡被否），这块的定位是"顺手投一票"，不是主角。
     ④ 颜色只用站上变量（--gold / --ally / --horde / --parch-*）+ 服务端给的职业色，
        不新造色板；职业色是 data.js 里那份，跟天赋页 / 攻略页同一个源。
   ========================================================================== */

/* ★ 落点 = 实用小玩具页（toys.html）里 `.wrap` 的第一个板块。
   ⚠️ **这块不放首页**（2026-09-17 血染先让放首页、当天又改到玩具页）。
   ⚠️ 别在这一层再写 max-width / padding —— 它落在 `.wrap`（自带 1480/26px 内边距）里面，
      再套一层就是双重收边，左右会比同页其他板块窄一圈。 */
.vote-outer{margin:0 0 30px}
.vote{padding:18px 26px 20px}
.vote[hidden]{display:none}                 /* ⚠️ 硬规矩 ② —— 不能省 */
.vote-outer .vote-panel{max-width:1120px;margin:0 auto}

/* ---- 表头：一行放完，别占高度 ---- */
.vt-head{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid rgba(216,180,90,.16);
}
.vt-head i{
  width:7px;height:7px;flex:none;transform:rotate(45deg);
  background:var(--gold);box-shadow:0 0 10px rgba(201,169,97,.85);
}
.vt-ht{
  font-family:var(--f-title);font-size:16.5px;letter-spacing:2.4px;
  color:var(--gold-hi);text-shadow:0 0 12px rgba(216,180,90,.3),0 1px 2px #000;
}
.vt-ht em{
  font-style:normal;font-size:10.5px;letter-spacing:2px;margin-left:9px;
  color:var(--parch-3);vertical-align:2px;
}
.vt-note{margin-left:auto;font-size:11.5px;letter-spacing:.5px;color:var(--parch-3)}
.vt-note b{color:var(--gold);font-weight:400}

/* ---- 两栏：职业宽、阵营窄 ---- */
.vt-grid{display:grid;grid-template-columns:1fr 340px;gap:30px;margin-top:16px}
.vt-card{min-width:0}                       /* ⚠️ grid 子项必须给 min-width:0，否则长内容撑破列 */
.vt-qt{display:flex;align-items:baseline;gap:10px;min-width:0}
.vt-q{
  font-family:var(--f-title);font-size:14px;letter-spacing:.8px;color:var(--parch);
}
.vt-tot{margin-left:auto;flex:none;font-size:11.5px;color:var(--parch-3);letter-spacing:.4px}
.vt-tot b{font-family:var(--f-title);font-size:13.5px;color:var(--gold)}

/* ---- 职业：九宫格图标（一行排完，高度最低） ---- */
.vt-cls{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.vt-o{
  position:relative;width:66px;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;text-align:center;
  transition:transform .16s;
}
.vt-o:not(.dim):hover{transform:translateY(-2px)}
.vt-ico{
  display:block;width:52px;height:52px;margin:0 auto;
  border:1px solid rgba(216,180,90,.26);border-radius:3px;overflow:hidden;
  background:#0c0e12;
  transition:border-color .16s,box-shadow .16s,filter .16s;
  filter:saturate(.82);
}
.vt-ico img{display:block;width:100%;height:100%;object-fit:cover}
.vt-o:not(.dim):hover .vt-ico{
  border-color:var(--gold);filter:none;
  box-shadow:0 0 0 1px rgba(201,169,97,.34),0 8px 20px -10px rgba(201,169,97,.75);
}
.vt-nm{
  display:block;margin-top:6px;font-size:11px;letter-spacing:.4px;
  color:var(--parch-2);line-height:1.2;white-space:nowrap;
}
.vt-pc{
  display:block;margin-top:1px;font-family:var(--f-title);font-size:11px;
  letter-spacing:.3px;color:var(--parch-3);line-height:1.2;
}
.vt-o.has .vt-pc{color:var(--gold)}
/* 已投的那个：金边 + 右上角勾 + 名字提亮 */
.vt-o.on .vt-ico{
  border-color:var(--gold);filter:none;
  box-shadow:0 0 0 1px rgba(201,169,97,.55),0 0 22px -6px rgba(201,169,97,.85);
}
.vt-o.on .vt-nm{color:var(--gold-hi)}
.vt-o.on::after{
  content:"";position:absolute;top:-4px;right:5px;width:15px;height:15px;
  background:var(--gold);border-radius:50%;
  box-shadow:0 0 0 2px rgba(8,10,15,.9);
}
.vt-o.on::before{
  content:"";position:absolute;top:0;right:9.5px;z-index:1;
  width:4px;height:8px;border:1.6px solid #14160f;border-top:0;border-left:0;
  transform:rotate(42deg);
}
.vt-o.dim{opacity:.42;cursor:default}

/* ---- 阵营：两个大按钮 ---- */
.vt-fac{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.vt-f{
  position:relative;display:block;padding:11px 10px 10px;border:1px solid rgba(216,180,90,.24);
  background:linear-gradient(180deg,rgba(18,18,19,.72),rgba(8,10,14,.9));
  font:inherit;color:inherit;cursor:pointer;text-align:center;
  transition:border-color .16s,background .16s,transform .16s,box-shadow .16s;
}
.vt-f:not(.dim):hover{transform:translateY(-2px);border-color:var(--f-c)}
.vt-f:not(.dim):hover{box-shadow:0 10px 26px -14px var(--f-c)}
.vt-f .vt-fn{
  display:block;font-family:var(--f-title);font-size:16px;letter-spacing:3px;
  text-indent:3px;color:var(--parch);
}
.vt-f .vt-fp{
  display:block;margin-top:5px;font-family:var(--f-title);font-size:17px;
  letter-spacing:.5px;color:var(--parch-3);
}
.vt-f.has .vt-fp,.vt-f.has .vt-fn{color:var(--f-c)}
.vt-f.on{
  border-color:var(--f-c);
  box-shadow:0 0 0 1px var(--f-c),0 0 24px -8px var(--f-c);
}
.vt-f.on .vt-fn{color:#fff}
.vt-f.dim{opacity:.42;cursor:default}
.vt-f .vt-ck{
  position:absolute;top:6px;right:8px;font-size:11px;letter-spacing:1px;color:var(--f-c);
}

/* ---- 比例条：两栏共用 ---- */
.vt-bar{
  display:flex;height:9px;margin-top:12px;overflow:hidden;
  border:1px solid rgba(216,180,90,.2);background:rgba(0,0,0,.42);
}
.vt-bar i{
  display:block;height:100%;min-width:0;
  transition:width .5s cubic-bezier(.2,.7,.3,1),opacity .2s,filter .2s;
}
.vt-bar i.hot{filter:brightness(1.5) saturate(1.2)}
.vt-bar.empty::after{
  content:"";flex:1;
  background:repeating-linear-gradient(115deg,rgba(216,180,90,.10) 0 6px,rgba(0,0,0,0) 6px 12px);
}

/* ---- 未揭示状态（`.vt-card.lock`，这人还没投）----------------------------
   ★ 2026-09-17 血染要求：**先问「你选谁」，投完才给结果** —— 未投时九宫格只留
     图标 + 职业名（连 DOM 里都没有数字，见 js/vote.js 的 drawPoll）。
     这一行顶掉比例条原来的位置：既说明"为什么没有百分比"，也不让版面塌下去。 */
.vt-lock{
  display:flex;align-items:baseline;gap:5px;margin-top:12px;
  font-size:11.5px;letter-spacing:.5px;color:var(--parch-3);
}
.vt-lock b{
  font-family:var(--f-title);font-size:12.5px;font-weight:400;
  letter-spacing:1px;color:var(--gold);
}

/* ---- 底部一行状态 ---- */
.vt-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(216,180,90,.14);
  font-size:11.5px;letter-spacing:.4px;color:var(--parch-3);
}
.vt-foot .vt-tip{color:var(--gold)}
.vt-foot .vt-tip.err{color:#e08a7a}
.vt-foot .vt-more{margin-left:auto;flex:none}

/* ---- file:// 兜底说明（双击 HTML 文件打开时显示，见 js/vote.js 的 OFFLINE 分支）----
   ⚠️ 它是**用来替代"整块静默消失"**的：宁可让访客看到"这块要连服务器才知道票数"，
      也别让页面看起来像这个功能没做。跨两列（.vt-grid 是两栏）。 */
.vt-off{
  grid-column:1/-1;display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border:1px dashed rgba(216,180,90,.3);background:rgba(0,0,0,.26);
}
.vt-off b{font-family:var(--f-title);font-size:13px;letter-spacing:.6px;color:var(--gold)}
.vt-off span{font-size:11.5px;line-height:1.7;color:var(--parch-3)}

@media (max-width:1000px){
  .vt-grid{grid-template-columns:1fr;gap:22px}
}
/* ★ 手机端要**压高度**（2026-09-17 实测：第一版整块 634px，占 390×844 屏的 75%，
   把整页第一个板块做成了拦路虎）。压法：九宫格按钮收窄到 46px ⇒ 一行放 5 个、两行排完
   （原先 56px 只能放 4 个、要排三行），顺带把字号、间距、英文副标一起收掉。 */
@media (max-width:640px){
  .vote-outer{margin-bottom:22px}
  .vote{padding:15px 14px 16px}
  .vt-head{gap:9px;padding-bottom:11px}
  .vt-ht{font-size:15px;letter-spacing:1.6px}
  .vt-ht em{display:none}                    /* 英文副标在窄屏纯占宽度 */
  .vt-note{margin-left:0;width:100%;font-size:11px}
  .vt-grid{gap:18px;margin-top:13px}
  .vt-cls{gap:5px;margin-top:10px}
  .vt-o{width:46px}
  .vt-ico{width:38px;height:38px}
  .vt-nm{margin-top:5px;font-size:10px}
  .vt-pc{font-size:10px}
  .vt-fac{gap:8px;margin-top:10px}
  .vt-f{padding:9px 8px 8px}
  .vt-f .vt-fn{font-size:14px;letter-spacing:1.6px;text-indent:1.6px}
  .vt-f .vt-fp{margin-top:3px;font-size:14.5px}
  .vt-bar{margin-top:10px}
  .vt-lock{margin-top:10px;font-size:11px;gap:4px}
  .vt-foot{margin-top:11px;padding-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .vt-o,.vt-f,.vt-bar i{transition:none}
}