/* overlays.css — 暱稱 modal、排行榜、name chip、win rank */

/* 標題的名字 chip */
.name-chip{margin-top:22px;border:none;background:#fff;color:var(--sub);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  border-radius:999px;padding:8px 16px;box-shadow:0 3px 0 #f0dcc6, inset 0 0 0 1.5px #f0dcc6}
.name-chip #name-label{color:var(--accent-d);font-weight:800}

/* 通用 modal 卡 */
.modal-card{background:#fffaf2;border-radius:24px;padding:26px 24px;text-align:center;width:100%;max-width:320px;
  box-shadow:0 24px 60px rgba(120,80,30,.3);animation:pop .25s ease}
.modal-card h2{margin:2px 0 4px;font-size:22px;font-weight:900}
.modal-sub{color:var(--sub);font-size:13px;margin:0 0 16px}
#name-input{width:100%;border:2px solid #f0dcc6;border-radius:14px;padding:13px 14px;font-size:18px;
  font-family:inherit;text-align:center;outline:none;background:#fff;color:var(--ink)}
#name-input:focus{border-color:var(--accent)}

/* win rank 行 */
.win-rank{font-size:14px;color:var(--ink);margin:2px 0 6px}
.win-rank b{color:var(--accent-d);font-size:17px}

/* 排行榜卡 */
.lb-card{background:#fffaf2;border-radius:24px;padding:20px 20px 22px;width:100%;max-width:360px;
  box-shadow:0 24px 60px rgba(120,80,30,.3);animation:pop .25s ease;display:flex;flex-direction:column}
.lb-head{display:flex;align-items:center;justify-content:space-between;color:var(--sub);font-size:13px;font-weight:700}
.lb-card h2{margin:4px 0 14px;font-size:22px;font-weight:900;text-align:center}
.lb-list{list-style:none;margin:0 0 16px;padding:0;max-height:52vh;overflow:auto}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;margin-bottom:8px;
  background:#fff;box-shadow:inset 0 0 0 1.5px #f0e3d2}
.lb-row .lb-rank{width:30px;text-align:center;font-weight:900;font-size:16px}
.lb-row .lb-name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .lb-time{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;font-weight:800;color:var(--accent-d)}
.lb-row.me{background:linear-gradient(180deg,#fff3e3,#ffe8cf);box-shadow:inset 0 0 0 2px var(--accent)}
.lb-empty{text-align:center;color:var(--sub);padding:24px 0;list-style:none}