/* ========================================================================
   AI 视觉产品笔试作品集 · 崇玉兴 · 2026-06-09
   风格: Tactile Digital(精致游戏按钮质感) | 配色: 焦糖蜜糖 | 基调: 轻盈
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* 配色 · 焦糖蜜糖 */
  --bg:#FFF8EE; --surface:#FFFFFF; --surface-2:#FFFDF8; --border:#EAD9C0;
  --primary:#D97706; --primary-g1:#F59E0B; --primary-g2:#C2410C;
  --primary-hover:#EA8C2E; --primary-press:#B45309; --on-primary:#FFFFFF;
  --cta:#B91C1C; --cta-press:#991B1B; --on-cta:#FFFFFF;
  --text:#3B2A1A; --muted:#8A7560;
  --scrim-60:rgba(20,12,4,.6); --scrim-80:rgba(15,9,3,.85);

  /* 字体 */
  --font-head:"Smiley Sans","得意黑","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Alibaba PuHuiTi 3.0","Alibaba PuHuiTi","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-latin:"Nunito",var(--font-body);

  /* 形状/阴影/间距 */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --shadow-card:0 4px 14px rgba(120,80,30,.10), 0 1px 3px rgba(120,80,30,.08);
  --shadow-card-h:0 14px 30px rgba(120,80,30,.18), 0 4px 8px rgba(120,80,30,.10);
  --maxw:1180px;
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--text); background:var(--bg);
  line-height:1.7; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(217,119,6,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-head);font-weight:400;line-height:1.2;color:var(--text)}
a{color:inherit}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(30px,4vw,52px) 0}
.lead{color:var(--muted)}

/* 数字/英文用圆润拉丁体 */
.latin,.num,.tag,.btn{font-family:var(--font-latin)}

/* ---------- Section heading ---------- */
.q-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2.4vw,28px)}
.q-no{
  font-family:var(--font-head);font-size:clamp(20px,3vw,26px);color:var(--on-primary);
  background:linear-gradient(160deg,var(--primary-g1),var(--primary-g2));
  width:1.9em;height:1.9em;display:grid;place-items:center;border-radius:14px;flex:none;
  box-shadow:0 5px 0 rgba(0,0,0,.10),0 8px 14px rgba(193,65,12,.22),inset 0 2px 0 rgba(255,255,255,.5);
}
.q-head h2{font-size:clamp(26px,4vw,40px)}
.q-head .sub{color:var(--muted);font-size:14px}

/* ---------- Tactile glossy button / pill ---------- */
.btn{
  font-size:15px;color:var(--on-primary);border:none;cursor:pointer;
  padding:.65em 1.3em;border-radius:14px;position:relative;isolation:isolate;
  background:linear-gradient(165deg,var(--primary-g1),var(--primary-g2));
  box-shadow:0 6px 0 rgba(120,40,5,.28),0 9px 18px rgba(193,65,12,.28),inset 0 2px 0 rgba(255,255,255,.55);
  transition:transform .18s ease-out,box-shadow .18s ease-out,filter .18s;
}
.btn::before{content:"";position:absolute;inset:3px 3px auto 3px;height:42%;
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
  border-radius:11px 11px 50% 50%;pointer-events:none;z-index:-1}
.btn:hover{transform:translateY(-3px);filter:brightness(1.05);
  box-shadow:0 9px 0 rgba(120,40,5,.28),0 14px 24px rgba(193,65,12,.34),inset 0 2px 0 rgba(255,255,255,.6)}
.btn:active{transform:translateY(2px) scale(.96);transition:transform .12s var(--ease-spring);
  box-shadow:0 2px 0 rgba(120,40,5,.28),0 4px 8px rgba(193,65,12,.22),inset 0 2px 4px rgba(120,40,5,.25)}
.btn--cta{background:linear-gradient(165deg,#EF4444,var(--cta));box-shadow:0 6px 0 rgba(120,10,10,.30),0 9px 18px rgba(185,28,28,.30),inset 0 2px 0 rgba(255,255,255,.4)}
.btn--round{width:42px;height:42px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:20px}

/* 时长数值牌(游戏数据面板感) */
.stat{display:inline-flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:14px;
  background:linear-gradient(160deg,#fff,#FFF3E0);border:1.5px solid var(--border);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 4px 10px rgba(120,80,30,.10)}
.stat b{font-family:var(--font-latin);font-size:22px;color:var(--primary-g2);line-height:1}
.stat span{font-size:12px;color:var(--muted)}

/* ---------- Card ---------- */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .2s ease-out,box-shadow .2s ease-out}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h),inset 0 1px 0 rgba(255,255,255,.7)}

/* ---------- 图片 hover: 放大+旋转并保持(轻盈) ---------- */
.tilt{transition:transform .22s var(--ease-soft),box-shadow .22s var(--ease-soft);
  will-change:transform;border-radius:var(--r);box-shadow:var(--shadow-card)}
@media (hover:hover){
  .tilt{cursor:zoom-in}
  .tilt:hover{transform:scale(1.06) rotate(3deg);box-shadow:var(--shadow-card-h);position:relative;z-index:3}
  .tilt.ccw:hover,.tilt:nth-child(even):hover{transform:scale(1.06) rotate(-3deg)}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .45s ease-out,transform .45s ease-out}
.reveal.in{opacity:1;transform:none}

/* ======================= HERO ======================= */
.hero{text-align:center;padding:clamp(70px,12vw,130px) 0 clamp(40px,6vw,70px);position:relative}
.hero h1{font-size:clamp(34px,7vw,68px);letter-spacing:1px}
.hero .grad{background:linear-gradient(100deg,var(--primary-g1),var(--cta));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .meta{margin-top:18px;color:var(--muted);font-size:15px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.hero .meta b{color:var(--text)}

/* ======================= Q1 游戏卡 ======================= */
.game-card{padding:clamp(16px,2.6vw,24px);margin-bottom:18px}
.game-card .gc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1.5px dashed var(--border)}
.game-card .gc-head h3{font-size:clamp(22px,3.2vw,30px)}
.game-card .desc{color:#5e483a;margin-bottom:16px;max-width:64ch}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.shot figure{display:flex;flex-direction:column;gap:10px}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{font-size:14px;color:var(--muted);text-align:center}

/* ======================= Q2 谱系图 ======================= */
.intro-band{background:linear-gradient(160deg,#FFF3E0,#FFEFD6);border:1.5px solid var(--border);
  border-radius:var(--r);padding:16px 20px;margin-bottom:34px;color:#5e483a;font-size:15px}
.genea{margin-bottom:46px}
.genea-title{font-family:var(--font-head);font-size:18px;margin-bottom:16px;color:var(--primary-g2)}
.genea-grid{display:grid;grid-template-columns:200px 1.6fr 150px;gap:0 18px;align-items:center}
.genea-orig{align-self:center}
.genea-orig img{width:100%;max-width:200px;aspect-ratio:1;object-fit:cover}
.genea-orig .cap{margin-top:8px;text-align:center;font-size:13px;color:var(--muted)}
.genea-conns{display:flex;flex-direction:column;justify-content:center;gap:8px;height:100%;padding:8px 0}
.conn{position:relative;display:grid;place-items:center;min-height:88px}
.conn svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 毛线质感: 粗、圆头、串珠状虚线 + 柔边 */
.conn path{stroke-width:7;stroke-linecap:round;fill:none}
.type-label{position:relative;z-index:2;font-family:var(--font-latin);font-size:13px;font-weight:700;
  color:var(--on-primary);background:linear-gradient(160deg,var(--primary-g1),var(--primary-g2));
  padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  box-shadow:0 3px 0 rgba(120,40,5,.25),0 5px 10px rgba(193,65,12,.25),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .15s ease-out,filter .15s}
.type-label:hover{transform:translateY(-2px);filter:brightness(1.06)}
.genea-results{display:flex;flex-direction:column;gap:14px}
.genea-results figure{display:flex;flex-direction:column;gap:6px}
.genea-results img{width:100%;aspect-ratio:1;object-fit:cover;max-height:150px}
.genea-results .cap{font-size:12px;color:var(--muted)}

/* ======================= Q3 表情包 ======================= */
.char-line{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#5e483a;flex-wrap:wrap}
.char-line .badge{background:var(--cta);color:#fff;font-family:var(--font-head);padding:3px 12px;border-radius:var(--r-pill);font-size:14px}
.ref-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:36px}
.ref-strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm)}
.q3-demo{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start}

/* 手机 */
.phone{width:300px;background:#1c1410;border-radius:38px;padding:12px;flex:none;
  box-shadow:0 18px 40px rgba(60,40,15,.30),inset 0 2px 0 rgba(255,255,255,.12);position:sticky;top:24px}
.phone-screen{background:#EDEDED;border-radius:28px;overflow:hidden;height:560px;display:flex;flex-direction:column}
.wx-bar{background:#F7F7F7;text-align:center;padding:10px;font-size:14px;color:#222;border-bottom:1px solid #e3e3e3;font-family:var(--font-body)}
.wx-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:#EDEDED}
.msg{display:flex;gap:8px;max-width:78%}
.msg .av{width:34px;height:34px;border-radius:7px;background:#fff center/cover;flex:none;border:1px solid #ddd}
.msg .bubble{background:#fff;padding:8px 11px;border-radius:8px;font-size:13.5px;color:#222;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bubble{background:#95EC69}
.msg .sticker{width:96px;height:96px;object-fit:contain;background:transparent;border-radius:8px}
.msg.me .bubble.is-sticker{background:transparent;box-shadow:none;padding:0}

/* 表情墙 3 列 */
.wall{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:0;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.wall .col-h{font-family:var(--font-head);font-size:14px;color:var(--muted);padding:10px;text-align:center;background:var(--surface-2);border-bottom:1.5px solid var(--border)}
.wall .cell{padding:12px;display:grid;place-items:center;border-bottom:1px solid #f0e7d8;border-right:1px solid #f0e7d8}
.wall .cell:nth-child(3n){border-right:none}
.sticker-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:12px;transition:transform .18s var(--ease-soft)}
.sticker-btn img,.sticker-btn video{width:84px;height:84px;object-fit:contain;border-radius:10px}
.sticker-btn:hover{transform:scale(1.06) rotate(3deg)}
.sticker-btn:active{transform:scale(.92)}
.name-cell{flex-direction:column;gap:6px;text-align:center}
.name-cell .nm{font-family:var(--font-head);font-size:16px;color:var(--text)}
.name-cell .more{font-size:11px;color:var(--primary-g2);cursor:pointer;text-decoration:underline dotted}

/* ======================= Footer ======================= */
.foot{text-align:center;padding:clamp(50px,8vw,90px) 0;color:var(--muted)}
.foot .thx{font-family:var(--font-head);font-size:clamp(22px,3.5vw,30px);color:var(--text)}
.foot .sign{margin-top:10px;font-size:14px}

/* ======================= Lightbox / Overlay ======================= */
.ov{position:fixed;inset:0;display:none;place-items:center;z-index:50;padding:24px;
  opacity:0;transition:opacity .2s ease-out}
.ov.show{display:grid;opacity:1}
.ov-lb{background:var(--scrim-60)}
.ov-detail{background:rgba(64,60,54,.5)}
.ov-close{position:absolute;top:18px;right:18px;z-index:2}
.ov-img{max-width:92vw;max-height:88vh;border-radius:var(--r);transform:scale(.94);transition:transform .28s var(--ease-soft);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ov.show .ov-img{transform:scale(1)}
.detail-card{background:#161210;color:#f3e9dc;max-width:880px;width:100%;max-height:86vh;overflow:auto;
  border-radius:var(--r-lg);padding:clamp(20px,4vw,34px);transform:scale(.96);transition:transform .24s var(--ease-soft);
  border:1px solid rgba(255,255,255,.08)}
.ov.show .detail-card{transform:scale(1)}
.detail-card h3{color:#fff;font-size:22px;margin-bottom:6px}
.detail-card .step-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin:18px 0}
.detail-card .node{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;text-align:center;font-size:12.5px}
.detail-card .node img,.detail-card .node video{width:100%;border-radius:8px;margin-bottom:6px}
.detail-card .arrow{display:flex;flex-direction:column;align-items:center;gap:4px;color:#cdbba6;font-size:11px;min-width:84px}
.detail-card .arrow img{width:26px;height:26px}
.detail-card .arrow .line{font-size:18px;color:var(--primary-g1)}
.detail-card pre{white-space:pre-wrap;background:rgba(0,0,0,.3);border-radius:10px;padding:12px;font-size:12px;color:#e8dcc9;font-family:var(--font-body);line-height:1.6;border:1px solid rgba(255,255,255,.08)}
.detail-card .blk{margin-top:16px}
.detail-card .blk h4{color:var(--primary-g1);font-family:var(--font-head);font-size:15px;margin-bottom:8px}
.detail-card table{width:100%;border-collapse:collapse;font-size:12px}
.detail-card td{border:1px solid rgba(255,255,255,.1);padding:5px 8px}
.detail-card .half{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.detail-divider{border:0;border-top:1px dashed rgba(255,255,255,.18);margin:22px 0}

/* ======================= Responsive ======================= */
@media (max-width:860px){
  .q3-demo{grid-template-columns:1fr}
  .phone{position:static;margin:0 auto 24px}
  .detail-card .half{grid-template-columns:1fr}
  .detail-card .step-flow{grid-template-columns:1fr;gap:6px}
  .detail-card .arrow{flex-direction:row;min-width:0}
  .detail-card .arrow .line{transform:rotate(90deg)}
}
@media (max-width:680px){
  /* Q2 谱系图窄屏退化: 纵向堆叠 + 向下箭头 */
  .genea-grid{grid-template-columns:1fr;gap:14px}
  .genea-conns{flex-direction:row;flex-wrap:wrap}
  .conn{min-height:0}
  .conn svg{display:none}
  .conn::after{content:"↓";display:block;color:var(--primary);font-size:20px;margin-top:4px}
  .ref-strip{grid-template-columns:repeat(3,1fr)}
}

/* ======================= v2 修订新增 ======================= */
/* Q1 统一时长 */
.play-stats{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
/* Q1 光遇小图(高清/不裁切) */
.shots--single{display:block}
.shot-sm{max-width:400px}
.shot-sm img{width:100%;aspect-ratio:auto;max-height:300px;object-fit:contain;background:#fff;border:1.5px solid var(--border)}
.shot-sm figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:8px}

/* Q2 PS 详情: 顶部长参数图 + 左表格 + 右问题/思路 */
.param-strip{overflow-x:auto;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0d0a08;margin-top:6px}
.param-strip img{height:300px;max-width:none;display:block}
.strip-hint{font-size:11px;color:#bda88c;margin:6px 0 2px}
.ps-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin-top:14px}
.ps-table-wrap{max-height:360px;overflow:auto;border:1px solid rgba(255,255,255,.1);border-radius:10px}
.ps-table{width:100%;border-collapse:collapse;font-size:11.5px}
.ps-table th{position:sticky;top:0;background:#241e1a;color:var(--primary-g1);padding:6px 5px;font-family:var(--font-head);font-weight:400;z-index:1}
.ps-table td{border:1px solid rgba(255,255,255,.08);padding:4px 7px;color:#e8dcc9;vertical-align:top}
.ps-table tr.sec td{background:rgba(217,119,6,.20);color:#fff;font-family:var(--font-head);text-align:center}
.ps-analysis h4{color:var(--primary-g1);font-family:var(--font-head);font-size:15px;margin:4px 0 6px}
.ps-analysis h4:not(:first-child){margin-top:14px}
.ps-analysis p{font-size:13px;line-height:1.85;color:#e8dcc9}
.detail-card .node .ph{font-size:12px;color:#cdbba6;padding:16px 6px}
.ref6{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px}
.ref6 img{width:30%;border-radius:5px;margin:0}
.detail-card h4.pl{margin-top:10px}

/* Q3 手机微信输入框 */
.wx-input{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#F7F7F7;border-top:1px solid #e3e3e3}
.wx-ic{font-size:17px;color:#555;line-height:1}
.wx-field{flex:1;height:30px;background:#fff;border-radius:6px;border:1px solid #e0e0e0}
.wx-ic.plus{border:1.6px solid #8a8a8a;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;font-size:14px;color:#666}

/* Q3 表情全屏按钮 */
.st-wrap{position:relative;display:inline-block}
.fs-btn{position:absolute;top:3px;right:3px;width:22px;height:22px;border:none;border-radius:7px;background:rgba(59,42,26,.55);color:#fff;font-size:12px;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.st-wrap:hover .fs-btn{opacity:1}
@media (hover:none){.fs-btn{opacity:.92}}
.wall-hint{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
.wall-hint b{color:var(--primary-g2)}

/* 灯箱视频 */
video.ov-img{background:#000}
@media (max-width:680px){.ps-grid{grid-template-columns:1fr}.param-strip img{height:200px}}

/* ======================= v3 修订 ======================= */
/* hero 应聘行 */
.apply{margin-top:6px;font-size:15px;color:var(--muted)}

/* Q1 光遇: 图(contain 不裁切) + 同尺寸时长组件，与洛克两图对齐 */
.shot img.shot--contain{object-fit:contain;background:#fff}
.shot-stats{display:flex;flex-direction:column;justify-content:center;gap:16px;background:linear-gradient(160deg,#fff,#FFF3E0);border:1.5px solid var(--border);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.7)}
.shot-stats .stat{background:none;border:none;box-shadow:none;padding:0;align-items:flex-start}
.shot-stats .stat b{font-size:30px}
.shot-stats .stat span{font-size:13px}

/* Q2: 居中留白 + 毛玻璃图框 + 棕色毛线/按钮/文字 */
.genea{padding:clamp(22px,3vw,32px)}
.genea-grid{grid-template-columns:1.2fr 1.6fr 1fr}
.genea-orig{justify-self:center;text-align:center}
.genea-orig img{max-width:250px;margin:0 auto}
.genea-results figure{align-items:center}
.genea-results img{max-width:150px;margin:0 auto}
/* 薄毛玻璃图框 */
.genea-orig img,.genea-results img{border:4px solid rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(255,255,255,.65),0 6px 16px rgba(120,80,30,.16)}
/* 棕色组件文字 */
.genea-title{color:#6B4A2E}
.genea .cap{color:#6B4A2E}
/* 棕色毛线(连续实线,拧绳斜纹+毛糙边) */
.conn path{filter:url(#yarnFuzz)}
/* 棕色按钮(中间标签) + 极薄毛玻璃边 */
.type-label{background:linear-gradient(160deg,#A6724A,#6B4423);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 3px 0 rgba(74,40,15,.32),0 5px 10px rgba(107,68,35,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.type-label:hover{filter:brightness(1.08)}
/* 通用按钮极薄毛玻璃边 */
.btn,.q-no{border:1px solid rgba(255,255,255,.5)}

/* ======================= v4 修订 ======================= */
.q1-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.q1-row .game-card{margin-bottom:0;height:100%}
.sky-shot img{width:100%;border-radius:var(--r);border:1.5px solid var(--border)}
.sky-shot figcaption{text-align:center;font-size:14px;color:var(--muted);margin-top:8px}
.stats-card{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:clamp(20px,3vw,32px)}
.stats-card .stat{background:none;border:none;box-shadow:none;padding:0;align-items:flex-start}
.stats-card .stat b{font-size:clamp(30px,4vw,42px)}
.stats-card .stat span{font-size:14px}
@media(max-width:680px){.q1-row{grid-template-columns:1fr}}

/* ======================= reduced-motion ======================= */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation:none!important;scroll-behavior:auto}
  .tilt:hover,.sticker-btn:hover{transform:none}
  .reveal{opacity:1;transform:none}
}