/* Leaderboard overlay (both games) */
.board-layer { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0a0306b8; backdrop-filter: blur(5px); animation: board-fade .2s ease-out; }
.board-card { position: relative; width: min(380px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px 18px; text-align: center; border: 2px solid #c99a2e; border-radius: 8px; background: radial-gradient(ellipse at 50% 0, #4a1420, #1c0a0e 75%); box-shadow: 0 0 0 3px #3a0a14, 0 24px 80px #000a; color: #f4ead2; font: 14px/1.4 Georgia, serif; }
.board-card h2 { margin: 0 0 2px; font: 30px/1.2 "Japanese Style", Georgia, serif; font-weight: normal; color: #ff8fd0; letter-spacing: 1px; }
.board-heading { font: 10px Arial, sans-serif; letter-spacing: 3px; color: #e7c76a; text-transform: uppercase; margin-bottom: 12px; }
.board-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; background: none; color: #e7c76a; font: 24px/1 Georgia, serif; cursor: pointer; }
.board-x:hover { color: #fff; }
.board { text-align: left; }
.board-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #c99a2e55; }
.board-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 6px 6px; border-bottom: 1px solid #c99a2e2a; animation: board-in .35s ease-out backwards; }
.board-rank { font-size: 12px; color: #b09a80; text-align: center; }
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-time { color: #f2d98a; font-variant-numeric: tabular-nums; }
.board-list .medal-1 .board-rank { color: #ffd95a; font-weight: bold; }
.board-list .medal-2 .board-rank { color: #dfe3ea; font-weight: bold; }
.board-list .medal-3 .board-rank { color: #e0a070; font-weight: bold; }
.board-list li.mine { background: linear-gradient(90deg, #ff66cc33, transparent); box-shadow: inset 3px 0 #ff66cc; }
.board-empty { display: block !important; text-align: center; font-style: italic; color: #b9a8a0; }
.board-note { margin: 10px 0 0; text-align: center; font-style: italic; font-size: 13px; color: #d8c4b0; }
.board-note[hidden] { display: none; }
.board-form { margin: 0 0 14px; text-align: center; }
.board-form label { display: block; font: 10px Arial, sans-serif; letter-spacing: 2px; color: #e7c76a; margin-bottom: 7px; }
.board-form label b { color: #fff3b0; font: 18px Georgia, serif; letter-spacing: 0; margin-left: 6px; }
.board-form div { display: flex; gap: 6px; }
.board-form input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #c99a2e; border-radius: 4px; background: #12060a; color: #f4ead2; font: 15px Georgia, serif; }
.board-form input:focus { outline: 2px solid #ff66cc; outline-offset: 1px; }
.board-form button { padding: 9px 16px; border: 2px solid #fff; border-radius: 5px; background: linear-gradient(#ff7ad9, #e0109e); color: #fff; font: bold 14px Georgia, serif; cursor: pointer; }
.board-form button:disabled { opacity: .5; cursor: default; }
.board-result { text-align: center; margin: 0 0 10px; font-style: italic; color: #f2d98a; }
@keyframes board-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes board-fade { from { opacity: 0; } }

#scores-btn { position: absolute; display: none; padding: 0; border: 2px solid #fff; border-radius: 6px; background: linear-gradient(#ffd95a, #c99a2e); color: #3a0a14; font: bold small-caps 18px Georgia, serif; box-shadow: 0 0 0 2px #6a4a10, 0 3px 10px rgba(0, 0, 0, .5); cursor: pointer; transform-origin: 0 0; }
#scores-btn:hover { filter: brightness(1.1); }