/* ══════════════════════════════════════════════════════════════
   GESTO98 · 业务样式 / App-specific
   摄像头面板、梗图查看器、比赛 HUD、排行榜行、成绩页。
   ══════════════════════════════════════════════════════════════ */

/* ─────────────── 摄像头面板（分屏上半） ─────────────── */
#camPane{
  position:relative;overflow:hidden;min-height:0;
  background:radial-gradient(70% 90% at 50% 40%,#33475c 0%,#1d2b3a 60%,#131c27 100%);
  aspect-ratio:1;border:1px solid #1f1f1f;border-radius:var(--radius-panel);
}
#camWrap{position:absolute;inset:0;overflow:hidden}
#video{
  width:100%;height:100%;display:block;
  object-fit:cover;                 /* 容器弹性，画面不变形 */
  transform:scaleX(-1);             /* 镜像，像照镜子。缩放由 app.js 追加 */
  transform-origin:center;
  background:#131c27;
}
/* 关键点叠加。draw() 内部已经做过镜像，这里不能再翻一次 */
#lienzo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

#fps{
  position:absolute;top:8px;right:8px;z-index:3;
  font:700 var(--fs-xs)/1.3 var(--font-num);color:var(--blue-300);
  background:rgba(0,0,0,.55);padding:2px 7px;border-radius:10px;
  font-variant-numeric:tabular-nums;
}
#camGuide{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:3;
  max-width:calc(100% - var(--s4));
  font-size:var(--fs-xs);font-weight:700;padding:4px 11px;
  background:rgba(10,25,45,.68);color:var(--blue-300);border-radius:12px;
  text-align:center;
}

/* 命中反馈：摄像头框内发光蓝一闪（不是黄色，Aero 里没有荧光黄） */
#camWrap.hit::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 3px var(--blue-500),inset 0 0 34px rgba(80,180,255,.55);
  animation:camHit 420ms var(--ease);
}
@keyframes camHit{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){#camWrap.hit::after{display:none}}

/* ─────────────── 控制条（参考图 1 底部工具条的复刻） ─────────────── */
.viewer-bar{
  margin:0;padding:var(--s2) var(--s3);width:100%;align-self:center;
  background:linear-gradient(#fbfdfe,#e6eff7);
  border:1px solid var(--chrome-edge);border-radius:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 1px 0 #fff;
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.viewer-row{display:flex;align-items:center;gap:var(--s2);min-width:0}
.viewer-row .vb-icon{flex:none;font-size:17px}

.vb-round{
  font:700 var(--fs-sm)/1 var(--font-num);color:var(--text-soft);
  background:#fff;border:1px solid var(--chrome-edge);border-radius:10px;
  padding:5px 9px;flex:none;white-space:nowrap;
}
.vb-target{
  flex:1 1 auto;min-width:0;text-align:center;
  font-size:var(--fs-md);font-weight:700;color:var(--text-title);
  letter-spacing:.01em;line-height:1.2;text-wrap:balance;
  overflow:hidden;text-overflow:ellipsis;
}
.vb-target small{
  display:block;font-size:var(--fs-xs);font-weight:400;color:var(--text-soft);
  margin-top:1px;
}
/* 比赛题目在窄屏上必须独占一行。挤在题号和倒计时中间只剩 ~150px，
   「Hand over mouth」会折成三行，把梗图面板压掉一半。 */
.viewer-row[data-hud="race"]{flex-wrap:wrap;row-gap:4px}
#targetName{flex:1 1 100%;order:-1;font-size:var(--fs-hero);line-height:1.05;color:var(--blue-900)}
.viewer-row[data-hud="race"] #roundNo{margin-right:auto}
@media (min-width:720px){
  #targetName{flex:1 1 auto;order:0}
  .viewer-row[data-hud="race"] #roundNo{margin-right:0}
}
.vb-clock{
  font:700 var(--fs-md)/1 var(--font-num);color:var(--danger);
  font-variant-numeric:tabular-nums;flex:none;white-space:nowrap;
}
#raceLabel{
  font-size:var(--fs-sm);color:var(--text-soft);text-align:center;min-height:1.2em;
}
#raceLabel span{font-weight:700;color:var(--text)}
#raceLabel small{margin-left:6px}
#raceLabel.hit span{color:var(--ok)}

/* HUD 分阶段显示 */
[data-hud]{display:none}
body[data-stage="warmup"] .viewer-row[data-hud="warmup"]{display:flex}
body[data-stage="race"]   .viewer-row[data-hud="race"]{display:flex}
body[data-stage="race"]   #raceLabel[data-hud="race"]{display:block}
body[data-stage="race"]   #progress[data-hud="race"]{display:grid}

/* ─────────────── 梗图查看器（分屏下半） ─────────────── */
#memePane{
  background:var(--surface-sunk);border-top:1px solid #1f1f1f;
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;
  justify-items:center;align-items:center;gap:3px;
  padding:var(--s3);min-height:0;overflow:hidden;
  aspect-ratio:1;border:1px solid #1f1f1f;border-radius:var(--radius-panel);
}
#memeBox{
  width:100%;height:100%;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#fff;border:1px solid #d8d8d8;padding:5px;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
#memePane.empty #memeBox{background:transparent;border-color:transparent;box-shadow:none;padding:0}
#meme{
  display:none;max-width:100%;max-height:100%;
  object-fit:contain;                /* 长图短图都不变形 */
}
#memeHint{
  font-size:var(--fs-sm);color:#c9d4de;text-align:center;line-height:1.6;
  padding:var(--s3);max-width:30ch;
}
#memeCap{
  font-size:var(--fs-xs);color:#cfd8e0;font-family:var(--font-num);
  text-align:center;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#memeCap.surprise{color:var(--gold);font-weight:700}
#memeTime{font-size:var(--fs-xs);color:#9fb0bf;font-family:var(--font-num)}
.meme-card.loading #memeBox{opacity:.6}

@media (prefers-reduced-motion:no-preference){
  #meme.pop{animation:memePop 260ms var(--ease)}   /* 缩放淡入，不旋转 */
}
@keyframes memePop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}

/* ─────────────── 排行榜（Explorer 详细信息视图） ─────────────── */
.rank-tbl{width:100%}
.rank-tbl .no{width:44px;text-align:center;font-family:var(--font-num)}
.rank-tbl .nm{font-weight:700;min-width:0}
.rank-tbl .nm em{
  display:block;font-style:normal;font-weight:400;
  font-size:var(--fs-xs);color:var(--text-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rank-tbl .ms{text-align:right;white-space:nowrap;font-family:var(--font-num);font-weight:700}
.rank-tbl .ms u{text-decoration:none;font-weight:400;font-size:var(--fs-xs);color:var(--text-soft)}
.rank-tbl .best{text-align:right;white-space:nowrap;font-family:var(--font-num);color:var(--text-soft)}
/* 手机上省掉「最快」列，名字行的 em 里已经带了 */
.rank-tbl .best,.rank-tbl th.best{display:none}
@media (min-width:560px){.rank-tbl .best,.rank-tbl th.best{display:table-cell}}

.rank-empty{
  padding:var(--s4);text-align:center;font-size:var(--fs-sm);color:var(--text-soft);
}

/* ─────────────── 成绩页 ─────────────── */
#resultMedal{font-size:44px;line-height:1;text-align:center}
#resultTitle{font-size:var(--fs-lg);color:var(--text-title);text-align:center}
#resultAvg{
  font:700 clamp(34px,10vw,52px)/1 var(--font-num);color:var(--blue-700);
  text-align:center;font-variant-numeric:tabular-nums;
}
#resultDetail{font-size:var(--fs-sm);color:var(--text-soft);text-align:center}
#resultDetail b{color:var(--text)}
#resultTimes{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
#resultTimes span{
  font:700 var(--fs-sm)/1 var(--font-num);padding:5px 9px;border-radius:3px;
  background:var(--grad-ctl);border:1px solid var(--chrome-edge);color:var(--text);
}
#resultTimes span.slow{background:linear-gradient(#fdecec,#f7d5d5);border-color:#e6b4b4;color:var(--danger)}
#prizeNote{
  font-size:var(--fs-xs);color:var(--text-soft);text-align:center;
  padding:var(--s2);background:var(--surface-alt);border-radius:var(--radius-ctl);
}

/* ─────────────── 欢迎页 ─────────────── */
.privacy-note{
  font-size:var(--fs-xs);color:var(--text-soft);
  display:flex;gap:6px;align-items:flex-start;
}
body[data-stage="welcome"] .panel[data-panel="welcome"]{min-height:100%}
.welcome-meme-showcase{
  flex:1 0 126px;min-height:126px;overflow:hidden;position:relative;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:linear-gradient(180deg,#eef7fd 0%,#d6eaf8 100%);
  border:1px solid #93b8d3;border-radius:var(--radius-panel);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(19,67,103,.16);
}
.welcome-meme-head{
  min-height:30px;padding:4px var(--s3);display:flex;align-items:center;gap:6px;
  color:var(--text-title);background:linear-gradient(#f9fdff,#d9edf9);
  border-bottom:1px solid #b5cede;font-size:var(--fs-xs);white-space:nowrap;
}
.welcome-meme-head strong{font-size:var(--fs-sm)}
.welcome-meme-head > span:last-child{
  margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text-soft);
}
.welcome-meme-reel{
  min-width:0;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.welcome-meme-track{
  width:max-content;display:flex;align-items:center;will-change:transform;
  animation:welcomeMemeScroll 36s linear infinite;
}
.welcome-meme-group{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s2) 10px 0;flex:none}
.welcome-meme-card{
  width:84px;height:72px;flex:none;padding:4px;overflow:hidden;
  display:grid;place-items:center;background:#fff;border:1px solid #bdcbd5;
  box-shadow:0 2px 6px rgba(14,43,67,.3),inset 0 0 0 1px #fff;
}
.welcome-meme-card:nth-child(3n+1){transform:rotate(-1.2deg)}
.welcome-meme-card:nth-child(3n+2){transform:rotate(1deg)}
.welcome-meme-card img{width:100%;height:100%;display:block;object-fit:cover}
.welcome-meme-showcase:hover .welcome-meme-track{animation-play-state:paused}
@keyframes welcomeMemeScroll{to{transform:translateX(-50%)}}
@media (min-width:720px){
  .welcome-meme-showcase{flex-basis:148px;min-height:148px}
  .welcome-meme-card{width:104px;height:90px}
}
@media (prefers-reduced-motion:reduce){
  .welcome-meme-reel{overflow-x:auto;mask-image:none;-webkit-mask-image:none;scrollbar-width:thin}
  .welcome-meme-track{animation:none}
  .welcome-meme-group[aria-hidden="true"]{display:none}
}
.mode-group{display:flex;gap:var(--s1);flex:none}