/* Which Friend Are You（whichfriend.html） */
/* 题卡宽度与 gotcha 日历卡一致：占满可用宽度、最大 560px，不因内容短而收缩 */
.wf-wrap{width:100%;max-width:560px;margin:0 auto;padding:6px 3px 60px;}
.wf-card{
  background:#241d29;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:22px 20px;box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.wf-card[hidden]{display:none;}
.wf-intro{white-space:pre-wrap;font-size:15px;line-height:1.85;color:#f1eafb;margin:0 0 16px;}
.wf-label{display:block;font-size:13px;font-weight:700;color:#c9b3f0;margin:0 0 6px;}
.wf-label .wf-req{color:#e0573e;margin-left:3px;}
.wf-input{
  width:100%;border-radius:12px;padding:11px 12px;font-size:14px;font-family:inherit;
  color:var(--ink);background:#1f1812;border:1px solid #4a3a2c;
}
.wf-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.wf-actions .btn{padding:12px 20px;}

/* 答题区 */
.wf-progress{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.wf-progress span{font-size:12px;color:#b6a692;font-family:'American Typewriter','Courier New',monospace;}
.wf-bar{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;}
.wf-bar i{display:block;height:100%;width:0;border-radius:999px;background:#9b78e0;transition:width .25s ease;}
.wf-dim{margin:0 0 6px;font-size:12px;color:#c9b3f0;letter-spacing:1px;text-align:center;}
.wf-q{margin:0 0 16px;font-size:19px;line-height:1.6;color:#f4ede2;font-weight:700;}
.wf-options{display:flex;flex-direction:column;gap:10px;}
.wf-opt{
  display:flex;gap:10px;align-items:flex-start;text-align:left;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#f1eafb;
  border-radius:12px;padding:13px 14px;font-size:15px;line-height:1.6;cursor:pointer;
  font-family:inherit;transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.wf-opt:hover{background:rgba(155,120,224,.16);border-color:rgba(155,120,224,.5);}
.wf-opt:active{transform:translateY(1px);}
.wf-opt.is-picked{background:#9b78e0;border-color:#9b78e0;color:#fff;}
.wf-opt-key{
  flex:0 0 24px;height:24px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  font-family:'American Typewriter','Courier New',monospace;
}
.wf-opt.is-picked .wf-opt-key{background:rgba(255,255,255,.28);}
.wf-opt-text{flex:1;min-width:0;}

/* 结果区：头部行 = 左上 50px 冠军头像 + 中列（标题 / 冠军文案）+ 右侧视图切换（两种视图都常显） */
.wf-res-top{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
.wf-res-ava{flex:0 0 50px;width:50px;display:flex;align-items:center;justify-content:center;}
.wf-res-ava img{width:auto;height:auto;max-width:50px;max-height:50px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}
.wf-res-ava span{
  width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:#fff;line-height:1;
  font-family:'American Typewriter','Courier New',monospace;
}
.wf-res-mid{flex:1;min-width:0;}
.wf-res-heading{margin:0;font-size:15px;color:#c9b3f0;font-weight:700;line-height:1.35;}
.wf-res-mid .wf-hero-name{margin:3px 0 0;font-size:17px;font-weight:800;line-height:1.3;}
.wf-view-toggle{display:flex;gap:6px;flex:0 0 auto;}
.wf-view-btn{
  width:30px;height:30px;border-radius:8px;padding:0;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#c9b3f0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.wf-view-btn:hover{background:rgba(155,120,224,.2);border-color:rgba(155,120,224,.5);}
.wf-view-btn.is-active{background:#9b78e0;border-color:#9b78e0;color:#fff;}
.wf-bars{display:block;margin-bottom:20px;}
.wf-bars[hidden]{display:none;}
.wf-bars svg{display:block;width:100%;height:auto;}
.wf-hex-pct{font-size:11px;font-weight:700;font-family:'American Typewriter','Courier New',monospace;}
.wf-res-card{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;}

/* 漂浮展示：六角色头像保留原始形状（不裁圆，防止切头切手），
   宽度∝占比，头顶显示占比；JS 物理模拟漂浮 + AABB 碰撞（头像和数字都不层叠） */
.wf-bubbles{position:relative;width:100%;height:272px;margin:0 0 22px;}   /* 340 × 80% */
.wf-bubbles[hidden]{display:none;}
.wf-sprite{position:absolute;left:0;top:0;will-change:transform;cursor:pointer;}
.wf-sprite.is-pinned img{filter:brightness(1.08) drop-shadow(0 6px 14px rgba(0,0,0,.35));}
.wf-sprite img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
/* 占比最高的头像：外圈浅光呼吸 */
.wf-sprite.is-top img{animation:wfGlow 2.6s ease-in-out infinite;}
@keyframes wfGlow{
  0%,100%{filter:drop-shadow(0 0 5px rgba(255,214,102,.35)) drop-shadow(0 6px 14px rgba(0,0,0,.35));}
  50%{filter:drop-shadow(0 0 16px rgba(255,214,102,.8)) drop-shadow(0 6px 14px rgba(0,0,0,.35));}
}
.wf-sprite-pct{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:4px;font-weight:800;line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:.5px;
  text-shadow:0 1px 5px rgba(0,0,0,.65);pointer-events:none;
}
.wf-res-card h4{margin:0 0 10px;font-size:17px;color:#e0a94a;}
.wf-res-card p{margin:0;font-size:14px;line-height:1.9;color:#f1eafb;white-space:pre-wrap;}
.wf-tip{margin:16px 0 0;font-size:12px;color:#b6a692;text-align:center;}
/* 保存成功弹窗（倒计时自动关闭） */
.wf-toast{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);}
.wf-toast[hidden]{display:none;}
.wf-toast-card{position:relative;background:#241d29;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:24px 30px 20px;box-shadow:0 16px 40px rgba(0,0,0,.5);text-align:center;}
.wf-toast-msg{margin:0;font-size:15px;font-weight:700;color:#f4ede2;}
.wf-toast-count{margin:10px 0 0;font-size:12px;color:#b6a692;}
.wf-toast-x{position:absolute;top:6px;right:10px;border:none;background:none;color:#b6a692;font-size:18px;line-height:1;cursor:pointer;padding:4px;}
/* 结果卡片下方：截图提示 + 再测一次（不占卡片内部空间） */
/* 底部文字导航：答题时保持隐藏。 */
.admin-links[hidden]{display:none;}
.wf-result-foot{padding:6px 3px 0;}
.wf-result-foot[hidden]{display:none;}
.wf-result-foot .wf-tip{margin:6px 0 0;}
.wf-result-foot .wf-actions{margin-top:12px;}
.wf-result-foot .wf-actions .btn{flex:1;}
.wf-empty{text-align:center;color:var(--muted);font-size:14px;padding:30px 10px;}
.wf-empty[hidden]{display:none;}

@media (max-width:520px){
  .wf-card{padding:18px 16px;}
  .wf-q{font-size:17px;}
  .wf-res-heading{font-size:14px;}
  .wf-res-mid .wf-hero-name{font-size:15px;}
  .wf-bubbles{height:244px;}   /* 306 × 80% */
}

/* 底部导航固定后，内容仍可完整滚动到按钮上方。 */
.app--home{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));}

/* 底部导航与安全区之间保留 20px 间距。 */
.fixed-bottom-nav{padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));}