/* DJMAX EMOTICON ARCHIVE
   画廊图录：中性框架 + 聚光式展台，颜色全部让给表情本身。
   深浅两套主题走同一组变量，切换只换值不换结构。 */

:root{
  --bg:#0A0A0B;
  --tile:#17171A;
  --tile-hi:#1E1E22;
  --spot:rgba(255,255,255,.055);      /* 展台聚光 */
  --spot-hi:rgba(255,255,255,.10);

  --fg:#F2F2F3;
  --fg-2:#9A9AA2;
  --fg-3:#5E5E66;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --accent:#C7B79B;
  --shadow:0 18px 44px rgba(0,0,0,.5);

  --sans:"Helvetica Neue",Helvetica,Arial,"Noto Sans","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC","Source Han Serif SC",serif;
  --num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --pad:clamp(20px,5vw,68px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="light"]{
  --bg:#F6F4F0;
  /* 展台绝不能是纯白：WELCOME、CLOSER CLOSER 自带白色对话框，纯白底上会整块消失 */
  --tile:#E7E4DC;
  --tile-hi:#DEDAD0;
  --spot:rgba(0,0,0,.035);
  --spot-hi:rgba(0,0,0,.06);

  --fg:#1A1A1C;
  --fg-2:#63636B;
  --fg-3:#9A968E;
  --line:rgba(0,0,0,.10);
  --line-2:rgba(0,0,0,.20);
  --accent:#8A7448;
  --shadow:0 18px 40px rgba(60,50,30,.16);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
::selection{background:var(--accent); color:var(--bg)}
button,input{font:inherit; color:inherit}
:focus-visible{outline:1px solid var(--accent); outline-offset:3px}

.ico{width:15px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor;
     stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
#playall .ico path:first-child{fill:currentColor; stroke-width:1}

/* 小号宽字距标签 */
.eyebrow,.filter-label,.stats dt,.tag,.act,.reset-btn,.m-meta dt,.foot,
.tool-label,.seg-btn,.m-index,.ed-progress,.ed-found,.ed-taken{
  font-size:10.5px; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
}

/* ---------- 报头 ---------- */
.topbar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(30px,5vw,70px) 40px; flex-wrap:wrap;
  padding:clamp(44px,8vw,96px) var(--pad) clamp(28px,4vw,44px);
}
.brand{min-width:0; flex:1 1 380px}
.eyebrow{margin:0; color:var(--fg-3)}
.brand h1{
  margin:16px 0 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(36px,6.4vw,68px); line-height:1.03; letter-spacing:-.015em;
}
.brand h1 em{font-style:italic; color:var(--fg-2)}
.lede{margin:18px 0 0; max-width:40ch; font-size:13.5px; line-height:1.75; color:var(--fg-2)}

.masthead-side{display:flex; flex-direction:column; align-items:flex-end; gap:22px; flex:0 1 auto}
.stats{display:flex; gap:clamp(22px,3vw,44px); margin:0}
.stats div{text-align:right}
.stats dt{margin:0; color:var(--fg-3)}
.stats dd{
  margin:5px 0 0; font-family:var(--serif); font-size:30px; line-height:1;
  font-variant-numeric:tabular-nums;
}

.topbar-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.search-wrap{
  display:flex; align-items:center; gap:9px; width:min(240px,44vw);
  border-bottom:1px solid var(--line-2); transition:border-color .35s var(--ease);
}
.search-wrap .ico{color:var(--fg-3)}
.search-wrap:focus-within{border-color:var(--fg-2)}
#q{flex:1; min-width:0; background:none; border:0; outline:0; padding:9px 0; font-size:13px}
#q::placeholder{color:var(--fg-3)}
#q::-webkit-search-cancel-button{display:none}
.q-clear{background:none; border:0; color:var(--fg-3); cursor:pointer; padding:0 0 0 8px; font-size:11px}
.q-clear:hover{color:var(--fg)}

/* 图标按钮带文字标签——纯图标看不出是什么 */
.tool-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--line-2); color:var(--fg-2);
  cursor:pointer; padding:8px 13px;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.tool-btn:hover{color:var(--fg); border-color:var(--fg-2)}
.tool-btn[aria-pressed="true"]{color:var(--accent); border-color:var(--accent)}
#mute .ico-off,#mute[aria-pressed="true"] .ico-on{display:none}
#mute[aria-pressed="true"] .ico-off{display:block}
#mute[aria-pressed="true"]{color:var(--fg-3); border-color:var(--line-2)}

.seg{display:inline-flex; border:1px solid var(--line-2)}
.seg-btn{
  background:none; border:0; color:var(--fg-2); cursor:pointer; padding:8px 12px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.seg-btn+.seg-btn{border-left:1px solid var(--line-2)}
.seg-btn:hover{color:var(--fg); background:var(--spot)}

/* ---------- 筛选 ---------- */
/* 标签列用 grid 的 max-content 自动取三行里最宽的那个，chip 左边自然对齐。
   写死宽度会翻车：中英文标签长度不同（赛季 vs CHARACTER），字体也可能替换，
   之前 52px 的固定宽就被 CHARACTER 撑出 14px 压到了第一颗 chip 上。 */
.filters{
  display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:baseline;
  padding:0 var(--pad); border-top:1px solid var(--line);
}
.filter-row{display:contents}
.filter-label{
  padding:13px clamp(14px,2vw,26px) 13px 0; border-bottom:1px solid var(--line);
  color:var(--fg-3); white-space:nowrap;
}
.chips-cell{padding:13px 0; border-bottom:1px solid var(--line); min-width:0}
.chips{display:flex; flex-wrap:wrap; gap:2px; min-width:0}
.chips-scroll{flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.chips-scroll::-webkit-scrollbar{display:none}

.chip{
  position:relative; background:none; border:0; cursor:pointer; white-space:nowrap;
  color:var(--fg-3); padding:3px 13px; font-size:12.5px;
  transition:color .28s var(--ease);
}
.chip:first-child{padding-left:0}
.chip:hover{color:var(--fg-2)}
.chip[aria-pressed="true"]{color:var(--fg)}
.chip[aria-pressed="true"]::before{
  content:""; position:absolute; left:4px; top:50%; width:5px; height:1px;
  margin-top:-.5px; background:var(--accent);
}
.chip:first-child[aria-pressed="true"]::before{display:none}
.chip .n{font-style:normal; margin-left:6px; font-size:10.5px; color:var(--fg-3); font-family:var(--num)}
.chip[aria-pressed="true"] .n{color:var(--accent)}

/* ---------- 状态条 ---------- */
.statusbar{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:24px var(--pad) 20px; color:var(--fg-3);
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
}
#count{font-family:var(--serif); font-size:20px; letter-spacing:0; color:var(--fg); text-transform:none}
.hint{margin-left:auto; letter-spacing:.14em}
.reset-btn{
  background:none; border:0; border-bottom:1px solid var(--line-2); color:var(--fg-2);
  cursor:pointer; padding:2px 0; transition:color .28s var(--ease), border-color .28s var(--ease);
}
.reset-btn:hover{color:var(--fg); border-color:var(--fg)}

/* ---------- 网格 ---------- */
.grid{
  display:grid; gap:clamp(26px,3vw,46px) clamp(16px,2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  padding:0 var(--pad) clamp(60px,9vw,120px);
  /* 不拉伸卡片高度。默认 stretch 会把整行拉到最高那张（带角色副标签的）的高度，
     而 <button> 又会把内容垂直居中，于是没副标签的卡展台被挤低 10px，整行参差。 */
  align-items:start;
}
.card{
  /* flex column 而不是 block：再次挡掉 button 的垂直居中行为 */
  position:relative; display:flex; flex-direction:column; align-items:stretch;
  cursor:pointer; text-align:left;
  background:none; border:0; padding:0; color:inherit; font:inherit;
}

/* 展台：底色 + 中心聚光 + 发丝边，让表情像被打了光而不是贴在色块上 */
.thumb{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--tile); border:1px solid var(--line);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.thumb::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 52% at 50% 44%, var(--spot), transparent 72%);
  transition:opacity .45s var(--ease);
}
.thumb-stage{position:absolute; inset:11%; display:grid; place-items:center}
.thumb img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  transition:transform .6s var(--ease);
}
.card:hover .thumb,.card:focus-visible .thumb{background:var(--tile-hi); border-color:var(--line-2)}
.card:hover .thumb::before{background:radial-gradient(60% 52% at 50% 44%, var(--spot-hi), transparent 72%)}
.card:hover .thumb img{transform:scale(1.07)}

/* 展签 */
.card-meta{padding:12px 1px 0}
.card-line{display:flex; align-items:baseline; gap:9px; min-width:0}
.card-no{
  flex:0 0 auto; font-family:var(--num); font-size:10px; color:var(--fg-3);
  letter-spacing:.06em; transition:color .3s var(--ease);
}
.card:hover .card-no{color:var(--accent)}
.card-name{
  font-size:13px; font-weight:500; line-height:1.35; min-width:0;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.card-sub{
  margin-top:3px; padding-left:calc(1ch * 3 + 9px);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}

.variant{
  position:absolute; top:10px; right:12px; z-index:3;
  font-family:var(--serif); font-size:12px; font-style:italic; color:var(--fg-3);
}
.spark{
  position:absolute; top:14px; left:13px; z-index:3;
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}

/* ---------- 空态 / 页脚 ---------- */
.empty{text-align:center; color:var(--fg-3); padding:100px 20px; font-size:14px}
.empty button{
  margin-left:14px; background:none; border:0; border-bottom:1px solid var(--line-2);
  color:var(--fg); padding:2px 0; cursor:pointer;
}
.foot{
  padding:32px var(--pad) 58px; border-top:1px solid var(--line);
  color:var(--fg-3); text-align:center; letter-spacing:.14em; line-height:2;
}

/* ---------- 详情 ---------- */
.modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:clamp(0px,5vw,54px)}
.modal-backdrop{position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(6px)}
.modal-card{
  position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  width:min(1010px,100%); max-height:86vh; overflow:hidden;
  background:var(--bg); border:1px solid var(--line-2); box-shadow:var(--shadow);
}
.modal-close{
  position:absolute; top:16px; right:18px; z-index:5;
  background:none; border:0; color:var(--fg-3); font-size:15px; cursor:pointer; padding:6px;
  transition:color .28s var(--ease);
}
.modal-close:hover{color:var(--fg)}

.modal-stage{
  position:relative; display:grid; place-items:center;
  padding:clamp(32px,5vw,60px); min-height:320px; background:var(--tile);
}
.modal-stage::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(56% 48% at 50% 45%, var(--spot-hi), transparent 74%);
}
.stage-frame{position:relative; display:grid; place-items:center; width:100%; height:100%}
#m-img{max-width:100%; max-height:44vh}
.stage-nav{position:absolute; inset:0 14px; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.nav-btn{
  pointer-events:auto; background:none; border:0; color:var(--fg-3);
  width:32px; height:56px; cursor:pointer; font-size:20px; transition:color .28s var(--ease);
}
.nav-btn:hover{color:var(--fg)}

.modal-info{
  padding:clamp(32px,4vw,50px) clamp(24px,3vw,42px);
  overflow-y:auto; display:flex; flex-direction:column; gap:24px;
}
.m-index{margin:0 0 10px; font-family:var(--num); color:var(--accent); letter-spacing:.14em}
.m-head h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(25px,3.2vw,38px); line-height:1.1; word-break:break-word;
}
.m-chips{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.tag{
  padding:3px 9px; border:1px solid var(--line-2); color:var(--fg-2);
  letter-spacing:.16em; font-size:9.5px;
}
.tag.char{color:var(--fg); border-color:var(--line-2)}
.tag.snd{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}

.m-meta{margin:0; display:grid; grid-template-columns:auto 1fr; font-size:13px}
.m-meta dt{padding:11px 0; border-top:1px solid var(--line); color:var(--fg-3)}
.m-meta dd{
  margin:0; padding:11px 0 11px 26px; border-top:1px solid var(--line);
  text-align:right; color:var(--fg-2); font-size:13px;
}

.m-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px}
.act{
  display:inline-block; text-decoration:none; cursor:pointer; color:var(--fg-2);
  background:none; border:1px solid var(--line-2); padding:11px 17px;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.act:hover{color:var(--fg); border-color:var(--fg-2)}
.act-primary{color:var(--bg); background:var(--fg); border-color:var(--fg)}
.act-primary:hover{color:var(--bg); background:var(--accent); border-color:var(--accent)}
.act-sound,.act-ogg{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent)}
.act-sound:hover,.act-ogg:hover{color:var(--bg); background:var(--accent); border-color:var(--accent)}
.act-sound.unverified::after{content:" ?"}

.m-setdl{
  margin:0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);
}
.m-setdl button{
  background:none; border:0; border-bottom:1px solid var(--line-2); color:var(--fg-2);
  cursor:pointer; padding:2px 0; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  transition:color .28s var(--ease), border-color .28s var(--ease);
}
.m-setdl button:hover{color:var(--fg); border-color:var(--fg)}
.m-setdl button:disabled{opacity:.45; cursor:default}

/* ---------- 校正模式 ---------- */
.editor{padding:clamp(30px,5vw,60px) var(--pad) 80px}
.editor-head h2{margin:0 0 12px; font-family:var(--serif); font-weight:400; font-size:29px}
.editor-head p{margin:0 0 24px; max-width:70ch; font-size:13.5px; line-height:1.85; color:var(--fg-2)}
.editor-tools{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px}
.ed-progress{color:var(--accent)}

.editor-body{display:grid; grid-template-columns:290px 1fr; gap:32px; align-items:start}
.ed-list{list-style:none; margin:0; padding:0; max-height:72vh; overflow-y:auto; border-top:1px solid var(--line)}
.ed-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 10px; border-bottom:1px solid var(--line); cursor:pointer;
  font-size:12.5px; color:var(--fg-2); transition:background .25s var(--ease);
}
.ed-list li:hover{background:var(--spot)}
.ed-list li[aria-selected="true"]{background:var(--spot); color:var(--fg); box-shadow:inset 1px 0 0 var(--accent)}
.ed-list li .ok{color:var(--accent)}
.ed-list li .no{color:var(--fg-3)}

.ed-right{display:flex; flex-direction:column; gap:18px; min-width:0}
.ed-searchbar{display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line-2)}
#ed-search{flex:1; min-width:0; background:none; border:0; outline:0; padding:11px 0; font-size:13.5px}
#ed-search::placeholder{color:var(--fg-3)}
#ed-search::-webkit-search-cancel-button{display:none}
.ed-found{color:var(--fg-3); white-space:nowrap; font-family:var(--num)}

.ed-cands{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
  gap:18px 14px; align-content:start; max-height:64vh; overflow-y:auto; padding:2px;
}
.ed-empty{grid-column:1/-1; color:var(--fg-3); font-size:13.5px; padding:44px 0; text-align:center}
.ed-cand{
  position:relative; background:none; border:0; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--fg-2);
}
.ed-cand img{
  width:100%; aspect-ratio:1/1; object-fit:contain; padding:12%;
  background:var(--tile); border:1px solid var(--line); transition:background .3s var(--ease);
}
.ed-cand:hover img{background:var(--tile-hi)}
.ed-cand[aria-pressed="true"] img{background:var(--tile-hi); border-color:var(--accent)}
.ed-cand[aria-pressed="true"]{color:var(--fg)}
.ed-cand span{font-size:10.5px; text-align:center; line-height:1.45}
.ed-cand.is-taken{opacity:.3}
.ed-cand.is-taken:hover{opacity:1}
.ed-taken{color:var(--accent); font-style:normal}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .masthead-side{align-items:flex-start; width:100%}
  .stats{width:100%; justify-content:space-between}
  .stats div{text-align:left}
  .topbar-tools{justify-content:flex-start}
  .modal-card{grid-template-columns:1fr; max-height:92vh}
  .modal-stage{min-height:230px}
  #m-img{max-height:30vh}
  .editor-body{grid-template-columns:1fr}
  .ed-list{max-height:270px}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:22px 12px}
  /* 窄屏改成上下堆叠：标签一行，chip 一行 */
  .filters{display:block}
  .filter-row{display:block; border-bottom:1px solid var(--line); padding:10px 0}
  .filter-label{display:block; padding:0 0 4px; border-bottom:0}
  /* 不用负 margin 对齐：.chip:first-child 本来就是 padding-left:0 */
  .chips-cell{padding:0; border-bottom:0}
  .tool-label{display:none}
  .tool-btn{padding:8px 11px}
  .modal{padding:0}
  /* iOS Safari 的 100vh 不含地址栏/工具栏，底部按钮会被工具栏盖住。
     100dvh 才是真实可视高度；再加 safe-area 内边距避开 Home Indicator。 */
  .modal-card{max-height:100vh; height:100vh; border:0}
  .modal-info{gap:14px; padding:22px 20px calc(20px + env(safe-area-inset-bottom))}
  .m-head h2{font-size:24px}
  .m-chips{margin-top:9px}
  .m-meta{font-size:12.5px}
  .m-meta dt,.m-meta dd{padding-top:8px; padding-bottom:8px}
  /* 桌面用 margin-top:auto 把按钮压到面板底部，手机上这会撑出一大段空白、
     把下载按钮顶到视口外。手机改成紧跟元数据。 */
  .m-actions{margin-top:0}
  .m-actions .act{flex:1 1 auto; text-align:center}
  /* 舞台占比压到 30vh，把空间让给信息面板 */
  .modal-stage{min-height:0; height:30vh; padding:16px}
  #m-img{max-height:100%}
  .hint{display:none}
}
/* 触摸设备：点击目标放大到 44px（iOS HIG 的下限）。
   桌面不受影响——那里用鼠标，26px 的 chip 反而更紧凑好看。 */
@media (hover:none){
  .chip{padding-top:10px; padding-bottom:10px}
  .tool-btn,.seg-btn{min-height:44px; padding-top:0; padding-bottom:0}
  .nav-btn{width:52px; height:64px}
  .modal-close{width:44px; height:44px; top:10px; right:10px}
  .act{padding-top:14px; padding-bottom:14px}
  .reset-btn,.m-setdl button{padding-top:10px; padding-bottom:10px}
  .ed-list li{padding-top:15px; padding-bottom:15px}
}

@supports (height:100dvh){
  @media (max-width:560px){
    .modal-card{max-height:100dvh; height:100dvh}
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}