/* ============================================================
   base.css —— 陈星州个人主页 · 共享漫画风设计系统
   来源：漫画风格参考/01_漫画风格参考页.html
   规则：所有组件类统一 c- 前缀，避免与被嵌入的子页面原有样式冲突。
   ============================================================ */

:root{
  --ink:#1a1a1a;
  --ink-2:#4a4a4a;
  --paper:#fffef0;
  --paper-2:#fffef8;
  --red:#ff3333;
  --yellow:#ffcc00;
  --blue:#3366ff;
  --green:#33cc33;
  --bw:4px;                        /* 墨线宽度 */
  --sh-s:3px 3px 0 0 var(--ink);
  --sh-m:6px 6px 0 0 var(--ink);
  --sh-l:10px 10px 0 0 var(--ink);
  --dots-op:.16;
  --display:"Arial Black","Arial Bold",Impact,Haettenschweiler,"Microsoft YaHei",sans-serif;
  --body:Arial,"Helvetica Neue","Microsoft YaHei",system-ui,sans-serif;
  --mono:"Consolas","Courier New",monospace;
}

/* ---------- 页面骨架 ---------- */
html,body{margin:0;padding:0}
.c-body{
  font-family:var(--body);
  font-weight:700;
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(circle,rgba(26,26,26,.13) 1px,transparent 1px);
  background-size:9px 9px;
  min-height:100vh;
}
.c-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.c-main{padding:0 0 72px}

/* ---------- 排版 ---------- */
.c-h1,.c-h2,.c-h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1}
.c-h1{font-size:clamp(38px,7.6vw,92px);text-shadow:5px 5px 0 var(--paper-2),-5px -5px 0 var(--yellow)}
.c-h2{font-size:clamp(24px,3.4vw,40px)}
.c-h3{font-size:20px}
.c-lead{font-size:17px;max-width:62ch}
.c-muted{color:var(--ink-2)}
.c-mono{font-family:var(--mono);font-weight:700}

/* ---------- 墨线 / 阴影 工具类 ---------- */
.c-bk{border:var(--bw) solid var(--ink)}
.c-sh-s{box-shadow:var(--sh-s)}
.c-sh-m{box-shadow:var(--sh-m)}
.c-sh-l{box-shadow:var(--sh-l)}
.c-plate{background:var(--paper-2);border:var(--bw) solid var(--ink)}
.c-halftone{
  background-image:radial-gradient(circle,var(--ink) 1.4px,transparent 1.4px);
  background-size:5px 5px;
}

/* ---------- 顶栏 ---------- */
.c-topbar{
  position:sticky;top:0;z-index:200;background:var(--yellow);
  border-bottom:var(--bw) solid var(--ink);
  display:flex;align-items:center;gap:14px;
  padding:10px 24px;flex-wrap:wrap;
}
.c-brand{
  font-family:var(--display);font-size:20px;letter-spacing:.02em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:4px 12px;border:var(--bw) solid var(--ink);
  text-decoration:none;
}
.c-nav{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.c-nav a{
  font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;background:var(--paper-2);
  border:3px solid var(--ink);box-shadow:2px 2px 0 0 var(--ink);
  padding:5px 10px;transition:transform .1s linear,background .1s linear;
}
.c-nav a:hover{background:var(--ink);color:var(--yellow);transform:translate(-2px,-2px)}
/* 顶栏「随机页面」按钮：红底突出。原来占这个位置的是商务版外链（.ext），
   换成随机跳转后沿用了同一套红色。由 assets/comic.js 末段绑定跳转。 */
.c-nav a.rand{background:var(--red);color:#fff}

/* ---------- Hero ---------- */
.c-hero{position:relative;background:var(--red);border-bottom:var(--bw) solid var(--ink);overflow:hidden}
.c-hero .rays{
  position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;
  transform-origin:50% 50%;margin:-100vmax 0 0 -100vmax;
  opacity:.55;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,255,255,.85) 0deg 7.5deg, transparent 7.5deg 15deg);
  animation:c-spin 44s linear infinite;
}
@keyframes c-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.c-hero .inner{position:relative;max-width:1180px;margin:0 auto;padding:64px 24px 72px}
.c-hero .tag{
  display:inline-block;background:var(--ink);color:var(--yellow);
  border:var(--bw) solid var(--ink);padding:5px 12px;
  font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
}
.c-hero .sub{
  display:inline-block;margin-top:18px;font-size:17px;font-weight:900;max-width:56ch;
  background:var(--paper-2);border:var(--bw) solid var(--ink);box-shadow:var(--sh-m);padding:10px 14px;
}
.c-hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.c-starburst{
  position:absolute;right:34px;top:40px;width:168px;height:168px;display:grid;place-items:center;
  font-family:var(--display);font-size:26px;text-align:center;line-height:1.05;color:var(--ink);
  background:var(--yellow);
  clip-path:polygon(50% 0,61% 18%,82% 10%,80% 33%,100% 41%,84% 56%,96% 76%,73% 76%,70% 100%,50% 85%,30% 100%,27% 76%,4% 76%,16% 56%,0 41%,20% 33%,18% 10%,39% 18%);
  animation:c-tilt 3.4s ease-in-out infinite;
}
@keyframes c-tilt{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(4deg) scale(1.06)}}
@media (max-width:900px){.c-starburst{display:none}}

/* ---------- 按钮 ---------- */
.c-btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  padding:11px 18px;border:var(--bw) solid var(--ink);border-radius:4px;
  background:var(--paper-2);color:var(--ink);box-shadow:var(--sh-m);
  text-decoration:none;cursor:pointer;
  transition:transform .1s ease-out,box-shadow .1s ease-out,background .1s linear,color .1s linear;
}
.c-btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 0 var(--ink)}
.c-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 0 var(--ink)}
.c-btn-red{background:var(--red);color:#fff}
.c-btn-yellow{background:var(--yellow);color:var(--ink)}
.c-btn-blue{background:var(--blue);color:#fff}
.c-btn-green{background:var(--green);color:var(--ink)}
.c-btn-dark{background:var(--ink);color:var(--paper-2)}
.c-btn-sm{font-size:11px;padding:6px 10px;box-shadow:var(--sh-s)}
.c-btn-lg{font-size:18px;padding:15px 26px;box-shadow:var(--sh-l)}

/* ---------- 卡片 ---------- */
.c-card{
  position:relative;display:block;background:var(--paper-2);border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-m);padding:18px;border-radius:4px;color:var(--ink);text-decoration:none;
  transition:transform .12s ease-out,box-shadow .12s ease-out;
}
.c-card .dots{
  position:absolute;inset:0;opacity:0;pointer-events:none;border-radius:4px;
  background-image:radial-gradient(circle,var(--ink) 1.6px,transparent 1.6px);background-size:6px 6px;
  transition:opacity .12s linear;
}
.c-card:hover .dots{opacity:var(--dots-op)}
.c-card:hover{transform:translateY(-6px);box-shadow:14px 14px 0 0 var(--ink)}
.c-card .c-idx{
  position:absolute;right:14px;top:-16px;font-family:var(--display);font-size:14px;
  background:var(--yellow);border:3px solid var(--ink);padding:2px 9px;box-shadow:2px 2px 0 0 var(--ink);
}
.c-card .c-ico{font-size:40px;line-height:1;margin-bottom:10px}
.c-card h3{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px}
.c-card p{margin:0;font-size:14px;font-weight:700;color:var(--ink-2)}
.c-card .c-go{
  display:inline-block;margin-top:12px;font-family:var(--display);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;border-bottom:3px solid var(--ink);
}
.c-card.ext{background:var(--red);color:#fff}
.c-card.ext p,.c-card.ext .c-go{color:#fff}
.c-card.ext .c-go{border-bottom-color:#fff}

/* ---------- 网格 ---------- */
.c-grid{display:grid;gap:22px}
.c-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.c-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.c-g2,.c-g3{grid-template-columns:1fr}}

/* ---------- 区块标题 ---------- */
.c-sec{padding:52px 0}
.c-sec-h{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.c-sec-h .n{
  font-family:var(--display);background:var(--ink);color:var(--yellow);
  padding:3px 12px;font-size:14px;letter-spacing:.14em;
}
.c-sec-h .t{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:22px}

/* ---------- 分割线 ---------- */
.c-dl-ink{height:0;border-top:var(--bw) solid var(--ink);border-bottom:3px solid var(--ink);padding-top:5px}
.c-dl-dots{
  height:22px;border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  background-image:radial-gradient(circle,var(--ink) 2px,transparent 2px);background-size:8px 8px;
  animation:c-march 1.2s linear infinite;
}
@keyframes c-march{to{background-position:8px 0}}
.c-dl-zig{
  height:24px;background:var(--ink);
  clip-path:polygon(0 60%,5% 20%,10% 60%,15% 20%,20% 60%,25% 20%,30% 60%,35% 20%,40% 60%,45% 20%,50% 60%,55% 20%,60% 60%,65% 20%,70% 60%,75% 20%,80% 60%,85% 20%,90% 60%,95% 20%,100% 60%,100% 100%,0 100%);
}
.c-marquee{
  border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
  background:var(--ink);color:var(--paper-2);overflow:hidden;
}
.c-marquee .track{display:flex;width:max-content;animation:c-slide 26s linear infinite}
.c-marquee span{
  font-family:var(--display);font-size:18px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 18px;flex:none;white-space:nowrap;
}
.c-marquee .w-y{color:var(--yellow)}
.c-marquee .w-r{color:var(--red)}
.c-marquee .w-g{color:var(--green)}
@keyframes c-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- chip ---------- */
.c-chips{display:flex;flex-wrap:wrap;gap:10px}
.c-chip{
  font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  border:3px solid var(--ink);padding:3px 10px;box-shadow:2px 2px 0 0 var(--ink);background:var(--paper-2);
}
.c-chip-y{background:var(--yellow)}
.c-chip-r{background:var(--red);color:#fff}
.c-chip-b{background:var(--blue);color:#fff}
.c-chip-d{background:var(--ink);color:var(--paper-2)}

/* ---------- 页脚 ---------- */
.c-footer{
  border-top:var(--bw) solid var(--ink);background:var(--ink);color:var(--paper-2);
  padding:26px 24px;text-align:center;font-size:13px;font-weight:700;
}
.c-footer a{color:var(--yellow);text-decoration:none;border-bottom:2px solid var(--yellow)}
.c-footer .fb{font-family:var(--display);font-size:16px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:8px}

/* ---------- 悬浮返回主页按钮（子页面通用，不需要改布局） ---------- */
.back-home{
  position:fixed;left:16px;bottom:16px;z-index:9999;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);text-decoration:none;
  border:3px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 0 var(--ink);
  padding:8px 13px;
  transition:transform .1s linear,box-shadow .1s linear,background .1s linear;
}
.back-home:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ink);background:var(--red);color:#fff}
.back-home .arw{font-size:14px;line-height:1}

/* ---------- 子页面：紧凑 Hero（复用主页 c-hero，压低纵向占用） ---------- */
.c-hero-sm .inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 24px 22px}
.c-hero-sm .c-h1{font-size:clamp(26px,4.2vw,46px);text-shadow:4px 4px 0 var(--paper-2),-4px -4px 0 var(--yellow)}
.c-hero-sm .sub{margin-top:0;font-size:13.5px;padding:7px 12px;max-width:64ch}
.c-hero-sm .tag{font-size:12px;padding:4px 10px}
.c-hero-row{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:820px){
  .c-hero-sm .inner{padding:14px 16px 18px;gap:10px}
  .c-hero-row{margin-left:0}
}

/* ---------- 悬浮信息框（与「手工作品」的 .info 同一视觉语言，子页面复用） ---------- */
.c-float-box{
  background:var(--paper-2);border:var(--bw) solid var(--ink);
  border-radius:4px;box-shadow:var(--sh-m);
}
.c-float-tag{
  position:absolute;right:-12px;top:-15px;
  font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--yellow);color:var(--ink);border:3px solid var(--ink);
  border-radius:4px;box-shadow:2px 2px 0 0 var(--ink);padding:3px 10px;
  pointer-events:none;white-space:nowrap;
}

/* ---------- 折叠说明（参考页 .acc 的漫画风精简版） ---------- */
.c-acc{
  border:var(--bw) solid var(--ink);background:var(--paper-2);
  box-shadow:var(--sh-s);max-width:900px;margin:0 auto;
}
.c-acc summary{
  font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.06em;
  padding:10px 14px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.c-acc summary::-webkit-details-marker{display:none}
.c-acc summary::after{content:"＋";font-family:var(--display)}
.c-acc[open] summary::after{content:"－"}
.c-acc[open] summary{background:var(--yellow)}
.c-acc .body{
  padding:12px 14px;border-top:var(--bw) solid var(--ink);
  font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.7;
}

@media (max-width:640px){
  .c-topbar{padding:8px 14px;gap:8px}
  .c-brand{font-size:16px;padding:3px 9px}
  .c-nav a{font-size:11px;padding:4px 7px}
  .c-hero .inner{padding:44px 16px 52px}
  .c-wrap{padding:0 16px}
  .c-sec{padding:36px 0}
}

/* ============================================================
   交互层 —— 自定义光标 / 拖尾 / 点击爆字
   来源：参考页「光标层」+「1. 自定义光标」+「2. 点击爆字」
   由 assets/comic.js 驱动。.cur-hand 只由脚本添加：
   脚本未执行时不隐藏原生光标，页面不会出现「找不到鼠标」。
   ============================================================ */

:root{
  /* 手套光标：与「手工作品」页同款，色值收编到 --yellow */
  --cur-hand:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20transform%3D%27translate%2819.54%2019.44%29%20scale%280.8%29%20rotate%28-42%29%27%3E%3Crect%20x%3D%27-4.5%27%20y%3D%27-24%27%20width%3D%279%27%20height%3D%2724%27%20rx%3D%274.5%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273.2%27%2F%3E%3Cellipse%20cx%3D%27-12.5%27%20cy%3D%27-1.5%27%20rx%3D%275.5%27%20ry%3D%274.5%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273.2%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%270%27%20rx%3D%2711%27%20ry%3D%2710%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273.2%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 7 5, pointer;
  --cur-fist:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cg%20transform%3D%27translate%2817.65%2017.1%29%27%3E%3Cellipse%20cx%3D%27-8.5%27%20cy%3D%272%27%20rx%3D%274.8%27%20ry%3D%274%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%270%27%20rx%3D%2710%27%20ry%3D%2710%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%273%27%2F%3E%3Cellipse%20cx%3D%27-6%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3Cellipse%20cx%3D%27-2%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3Cellipse%20cx%3D%272%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3Cellipse%20cx%3D%276%27%20cy%3D%27-9%27%20rx%3D%272.9%27%20ry%3D%273.2%27%20fill%3D%27%23ffcc00%27%20stroke%3D%27%231a1a1a%27%20stroke-width%3D%272.6%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 18 17, grab;
}

/* 手形光标：全站默认黄手套（与参考页「手形」模式同款）。
   普通元素=张开手(pointer)；按下 / 拖拽中=握拳；输入类保留文本光标（否则没法输入）；
   禁用元素保留 not-allowed。 */
body.cur-hand,body.cur-hand *{cursor:var(--cur-hand)!important}
body.cur-hand input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),
body.cur-hand textarea{cursor:text!important}
body.cur-hand [disabled]{cursor:not-allowed!important}
body.cur-hand.pressing,body.cur-hand.pressing *,
body.cur-hand .stage.dragging,body.cur-hand .stage.dragging *,
body.cur-hand .stage.over,body.cur-hand .stage.over *{cursor:var(--cur-fist)!important}

/* 点击爆字 */
.c-burst{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.c-pow{
  position:absolute;font-family:var(--display);font-weight:900;letter-spacing:1px;
  padding:2px 8px;border:var(--bw) solid var(--ink);background:var(--yellow);
  box-shadow:var(--sh-s);white-space:nowrap;
  transform:translate(-50%,-50%) scale(0) rotate(var(--r,0deg));
  animation:c-pow-out .75s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes c-pow-out{
  0%  {transform:translate(-50%,-50%) scale(0) rotate(var(--r,0deg))}
  35% {transform:translate(-50%,-50%) scale(1.15) rotate(var(--r,0deg))}
  70% {opacity:1}
  100%{transform:translate(-50%,-140%) scale(1) rotate(var(--r,0deg));opacity:0}
}

/* ---------- 指针拖尾（墨点） ----------
   只取参考页「拖尾」那半边，十字准星不搬（本站在用的是手形手套光标）。
   指针滑过时沿途撒小墨点，边飞边缩边淡出；淡出写成 CSS 动画，
   脚本只负责生成节点，元素在 animationend 时自删，不用逐帧回写样式。
   z-index 9996：低于爆字层（9998）与骰子命中区（9999），
   拖尾永远压在最下面，不挡气泡、不抢指针。 */
.c-trail{position:fixed;inset:0;z-index:9996;pointer-events:none;overflow:hidden}
.c-dot{
  position:absolute;box-sizing:border-box;background:var(--ink);border-radius:2px;
  animation:c-dot-out .42s linear forwards;
}
.c-dot.y{background:var(--yellow);border:2px solid var(--ink)}
@keyframes c-dot-out{
  from{opacity:.5;transform:scale(.45) rotate(0deg)}
  to  {opacity:0;transform:scale(1.35) rotate(var(--r,70deg))}
}
@media (prefers-reduced-motion:reduce){
  .c-burst{display:none}
  .c-trail{display:none}
  /* 共享组件的装饰动画一并停下（子页面自身的动效不干预） */
  .c-hero .rays,.c-starburst,.c-marquee .track,.c-dl-dots{animation:none!important}
}

/* ---------- 点击反馈补齐（参考页 .btn / .card / .pager 的按下手感） ---------- */
.c-brand{transition:transform .1s linear,background .1s linear,color .1s linear}
.c-brand:hover{background:var(--red);color:var(--paper)}
.c-brand:active{transform:translate(2px,2px)}
.c-nav a:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
.c-card:active{transform:translateY(-2px);box-shadow:6px 6px 0 0 var(--ink)}
.c-chip{transition:transform .1s linear,box-shadow .1s linear}
.back-home:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--ink)}
.c-acc summary:active{background:var(--yellow)}
.c-footer a{transition:background .1s linear,color .1s linear}

/* 子页顶栏左上角显示的是「本页名称」，不是链接，所以不该有悬停变红、按下位移的反馈。
   主页那个仍是指向 index.html 的 <a class="c-brand">陈星州</a>，反馈照旧。
   这两条必须写在上面 .c-brand:hover / .c-brand:active 之后 —— 权重相同，后写的赢。 */
.c-brand-static:hover{background:var(--ink);color:var(--paper)}
.c-brand-static:active{transform:none}
.c-footer a:hover{background:var(--ink);color:var(--paper)}
.c-footer a:active{transform:translateY(1px)}

/* ============================================================
   悬停层补齐 —— 共享组件的 hover 全部收在这里
   语言取自参考页：可点元素「位移 + 硬阴影内缩」，容器「阴影张开」，
   标签/胶囊「位移 + 阴影张开」，滚动内容「悬停即停」。
   只改视觉属性（transform / box-shadow / background / color），
   不碰 position / display / 尺寸 —— 加进来不会动摇任何布局。
   ============================================================ */

/* chip：滑过时向左上推出，硬阴影跟着张开（参考页 .swatch:hover 同一手法） */
.c-chip:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 0 var(--ink)}

/* 信息板：滑过时硬阴影从 6px 张到 10px，块与块之间有了「被拿起」的层次。
   注意主页的 .c-plate 同时挂着工具类 .c-sh-m（6px），所以 hover 必须换一档
   更大的阴影才有变化，写成同一个 --sh-m 等于没写 */
.c-plate{transition:box-shadow .12s ease-out}
.c-plate:hover{box-shadow:var(--sh-l)}

/* 站卡内部：编号标签与「进入」跟着卡片一起响应，
   否则鼠标滑过整张卡只有卡片在动，里面两处小件是死的。
   ext 卡是红底白字，编号保持原样才不糊，所以用 :not(.ext) 排除 */
.c-card .c-idx{transition:background .12s linear,color .12s linear}
.c-card:not(.ext):hover .c-idx{background:var(--red);color:#fff}
.c-card .c-go{transition:border-bottom-color .12s linear,color .12s linear}
.c-card:not(.ext):hover .c-go{border-bottom-color:var(--red);color:var(--red)}
.c-card.ext:hover .c-go{border-bottom-color:var(--ink);color:var(--ink)}

/* 跑马灯：指针停上去加速（不是暂停）。
   变速逻辑在 comic.js 末段 —— 纯 CSS 改 animation-duration 会让进度按新时长重算、
   画面瞬移，必须由脚本用负的 animation-delay 把进度补回去，这里只留基础时长。 */
.c-marquee .track{animation-duration:26s}

/* 折叠说明：滑过标题就飘黄（与 [open] 时的底色一致） */
.c-acc summary{transition:background .12s linear}
.c-acc summary:hover{background:var(--yellow)}

/* 悬浮信息框：滑过时阴影张开 */
.c-float-box{transition:box-shadow .12s ease-out}
.c-float-box:hover{box-shadow:var(--sh-l)}