#account-panel{margin-bottom:1rem}
#account-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
#account-form [hidden],[hidden]{display:none!important}
#account-form p{grid-column:1/-1}
#account-form button{align-self:end}
select{font:inherit;padding:.65rem;min-height:44px;max-width:100%;border-radius:10px}
details{margin-top:1rem}
summary{cursor:pointer;min-height:44px;padding:.6rem 0}
details form{max-width:460px}
.profile-line{display:flex;align-items:center;gap:1rem}
.profile-line img,#avatar-preview-image{object-fit:cover;border-radius:16px}
#avatar-preview-image{max-width:100%;height:auto;margin:1rem 0}
#recovery-receipt{padding:1rem;background:#fff3ce;color:#292514;border-radius:12px}
#recovery-code{overflow-wrap:anywhere;user-select:all}
.rank-tabs{display:flex;gap:8px;margin:14px 0}
.rank-tab{min-width:88px}
.rank-tab:not(.is-active){background:transparent;color:var(--green);border-color:#9aaca1}
#rank-list{margin:0;padding:0}
.rank-entry{display:grid;grid-template-columns:2rem 44px minmax(0,1fr);align-items:center;gap:10px;min-height:64px;padding:.6rem 0;border-bottom:1px solid #ddd}
.rank-position{text-align:center;font-weight:900;font-variant-numeric:tabular-nums}
.rank-avatar{display:grid;width:44px;height:44px;place-items:center;border-radius:50%;background:#eadfca;color:#163f36;object-fit:contain;font-weight:800}
.rank-entry .rank-copy{display:grid;min-width:0;gap:8px}
.rank-primary{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:10px}
.rank-identity{display:grid;min-width:0;gap:2px}
.rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-game-count{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-rating{flex:0 0 auto;color:#174c40;font-size:clamp(18px,2vw,22px);font-weight:900;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.rank-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.rank-rate{display:grid;min-width:0;gap:2px}
.rank-rate-label{font-size:12px;line-height:1.2;opacity:.82}
.rank-rate-value{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank-coverage{margin:-3px 0 0;font-size:11px;line-height:1.35;opacity:.82;overflow-wrap:anywhere}
.seat-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}
.playing-online #account-panel{display:none}
@media(max-width:600px){#account-form{grid-template-columns:1fr}}
@media(max-width:700px){#ranking-panel .rank-entry{grid-template-columns:1.75rem 40px minmax(0,1fr);gap:7px}#ranking-panel .rank-avatar{width:40px;height:40px}#ranking-panel .rank-entry .rank-copy{gap:7px}#ranking-panel .rank-primary{gap:6px}#ranking-panel .rank-rating{font-size:clamp(16px,5vw,20px)}#ranking-panel .rank-game-count{font-size:13px}#ranking-panel .rank-details{gap:4px}#ranking-panel .rank-rate-label{font-size:10px}#ranking-panel .rank-rate-value{font-size:14px}}

.history-toolbar,.history-game-heading,.history-hand-heading,.history-scores>div{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.history-game{border:1px solid #ddcfb9;border-radius:14px;padding:16px;margin:16px 0;background:#fffdf8;overflow-wrap:anywhere}.history-game h3,.history-game p{margin:8px 0}.history-game-heading>span{font-size:14px;color:#665942}.history-game details{margin-top:8px}.history-game summary{padding:12px 0;min-height:44px}.history-points strong{font-size:22px;color:#174c40}.history-hands{list-style:none;margin:12px 0 0;padding:0}.history-hands>li{border-top:1px solid #ded4c3;padding:14px 0}.history-hands details{padding:0 12px;background:#f6efdf;border-radius:8px}.history-scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 0}.history-scores>div{padding:8px;background:#f3f0e8;border-radius:8px}.history-scores b{white-space:nowrap}.history-toolbar p{flex:1;margin:8px 0}#history-more{min-height:44px}@media(max-width:600px){.history-scores{grid-template-columns:1fr}.history-game{padding:12px}.history-game-heading h3{width:100%}}

.voice-preset-picker{border-bottom:1px solid #d7cdb8;padding:8px 0 18px;margin:0 0 18px}.voice-preset-picker h3{margin:0 0 6px}.voice-preset-picker select{width:100%;margin-top:6px}.voice-preset-picker .actions{margin:10px 0 0}.voice-preset-picker p{margin:6px 0}

/* 保留全身角色比例，避免帳號縮圖被固定寬高拉扁。 */
#account-avatar{display:block;width:auto;height:auto;max-width:72px;max-height:108px;object-fit:contain;flex-shrink:0}

/* 排行榜字級與比例，和首頁及登入首頁保持一致。 */
#ranking-panel { width: min(100%, 1000px); margin-inline: auto; }
#ranking-panel .rank-entry { grid-template-columns: 2rem 56px minmax(0, 1fr); }
#ranking-panel .rank-avatar { width: 56px; height: 56px; object-fit: contain; }
#ranking-panel .rank-name { font-size: 22px; font-weight: 700; }
#ranking-panel .rank-game-count { font-size: 18px; font-weight: 650; }
#ranking-panel .rank-rating { font-size: 26px; font-weight: 900; }
#ranking-panel .rank-rate { grid-template-rows: minmax(2.4em, auto) auto; justify-items: center; text-align: center; }
#ranking-panel .rank-rate-label { font-size: 16px; line-height: 1.2; }
#ranking-panel .rank-rate-value { font-size: 20px; font-weight: 700; }
@media(max-width:700px){
  #ranking-panel .rank-entry { grid-template-columns: 1.75rem 40px minmax(0,1fr); }
  #ranking-panel .rank-avatar { width: 40px; height: 40px; }
  #ranking-panel .rank-name { font-size: 18px; }
  #ranking-panel .rank-game-count { font-size: 15px; }
  #ranking-panel .rank-rating { font-size: 20px; }
  #ranking-panel .rank-rate { grid-template-rows: minmax(2.4em, auto) auto; }
  #ranking-panel .rank-rate-label { font-size: 13px; }
  #ranking-panel .rank-rate-value { font-size: 16px; }
}

#ranking-panel .rank-position,
#ranking-panel .rank-avatar { align-self: center; margin-top: 0; }

/* 排行榜單列：局數與舊紀錄覆蓋資訊保留於輔助文字與提示。 */
#ranking-panel .rank-entry { position: relative; grid-template-columns: 2rem 64px minmax(115px,1.1fr) minmax(0,2.5fr) minmax(130px,auto); gap: 10px; min-height: 88px; }
#ranking-panel .rank-position,
#ranking-panel .rank-avatar { align-self: center; margin-top: 0; }
#ranking-panel .rank-avatar { width: 64px; height: 64px; object-fit: contain; }
#ranking-panel .rank-identity { grid-column: 3; min-width: 0; }
#ranking-panel .rank-name { display: block; font-size: 24px; font-weight: 700; }
#ranking-panel .rank-details { grid-column: 4; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-self: stretch; align-items: stretch; gap: 8px; min-width: 0; }
#ranking-panel .rank-rate { display: grid; grid-template-rows: minmax(2.4em,auto) auto; justify-items: center; align-content: center; gap: 2px; min-width: 0; text-align: center; }
#ranking-panel .rank-rate-label { font-size: 18px; line-height: 1.15; }
#ranking-panel .rank-rate-value { font-size: 20px; font-weight: 800; }
#ranking-panel .rank-rating { grid-column: 5; justify-self: end; font-size: 25px; font-weight: 900; }
#ranking-panel .rank-coverage.sr-only,
#ranking-panel .rank-game-count.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (min-width:701px) and (max-width:999px) {
  #ranking-panel .rank-entry { grid-template-columns: 2rem 52px minmax(105px,1fr) minmax(0,2.3fr) minmax(112px,auto); gap: 7px; }
  #ranking-panel .rank-avatar { width: 52px; height: 52px; }
  #ranking-panel .rank-name { font-size: 20px; }
  #ranking-panel .rank-rate-label { font-size: 15px; }
  #ranking-panel .rank-rate-value { font-size: 18px; }
  #ranking-panel .rank-rating { font-size: 22px; }
}
@media (max-width:700px) {
  #ranking-panel .rank-entry { grid-template-columns: 1.5rem 40px minmax(0,1fr) minmax(78px,auto); grid-template-rows: auto auto; gap: 7px; min-height: 0; padding: 10px 0; }
  #ranking-panel .rank-position,
  #ranking-panel .rank-avatar { grid-row: 1; align-self: center; margin-top: 0; }
  #ranking-panel .rank-avatar { width: 40px; height: 40px; }
  #ranking-panel .rank-identity { grid-column: 3; grid-row: 1; }
  #ranking-panel .rank-name { font-size: 18px; }
  #ranking-panel .rank-rating { grid-column: 4; grid-row: 1; font-size: 20px; }
  #ranking-panel .rank-details { grid-column: 1/-1; grid-row: 2; gap: 4px; }
  #ranking-panel .rank-rate { grid-template-rows: minmax(2.5em,auto) auto; }
  #ranking-panel .rank-rate-label { font-size: 13px; }
  #ranking-panel .rank-rate-value { font-size: 16px; }
}

/* Flat-row identity alignment: keep rank/avatar centered in the row and preserve full avatar framing. */
#ranking-panel .rank-entry > .rank-position { align-self: center; margin-top: 0; font-size: 24px; font-weight: 800; }
#ranking-panel .rank-entry > .rank-avatar { align-self: center; margin-top: 0; object-fit: contain; }
@media (max-width: 700px) {
  #ranking-panel .rank-entry > .rank-position { font-size: 18px; }
}