/* 排行榜／登記／對戰彈出視窗（要喺遊戲全螢幕之上） */
.ol-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 1rem; background: rgba(42, 18, 9, .6); animation: fade .2s; }
.ol-card { position: relative; width: min(420px, 100%); max-height: 88vh; overflow-y: auto; background: var(--cream, #fff4dc); border: 4px solid var(--brown, #4a2414); border-radius: 22px; box-shadow: 0 6px 0 var(--brown, #4a2414); padding: 1.2rem 1.1rem 1rem; color: var(--brown, #4a2414); }
.ol-x { position: absolute; top: .55rem; right: .6rem; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--brown, #4a2414); background: #fff; font-weight: 900; }
.ol-h { margin: 0 2rem .3rem 0; font-family: var(--font-cute, inherit); font-weight: 400; font-size: 1.35rem; }
.ol-sub { margin: 0 0 .7rem; font-size: .9rem; color: var(--red, #c4232b); font-weight: 700; }
.ol-form { display: grid; gap: .7rem; }
.ol-form label { display: grid; gap: .25rem; font-weight: 700; font-size: .92rem; }
.ol-form input { font-size: 16px; padding: .6rem .7rem; border: 3px solid var(--brown, #4a2414); border-radius: 12px; background: #fff; color: inherit; }
.ol-note { margin: 0; font-size: .8rem; opacity: .8; }
.ol-err { margin: 0; color: var(--red, #c4232b); font-weight: 700; font-size: .88rem; }
.ol-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.ol-tabs button { flex: 1; padding: .45rem; border: 3px solid var(--brown, #4a2414); border-radius: 12px; background: #fff; font-weight: 900; }
.ol-tabs button.on { background: var(--red, #c4232b); color: #fff; }
.ol-when { margin: .2rem 0 .5rem; font-size: .85rem; font-weight: 700; opacity: .85; }
.ol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ol-list li { display: flex; align-items: center; gap: .6rem; background: #fff; border: 2px solid var(--brown, #4a2414); border-radius: 12px; padding: .4rem .6rem; }
.ol-list li.top { background: #fff6d6; border-color: #d99a00; }
.ol-list li.me { box-shadow: 0 0 0 3px var(--pink, #ff9ec0); }
.ol-rank { width: 1.8rem; text-align: center; font-weight: 900; font-size: 1.05rem; }
.ol-name { flex: 1; display: grid; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.ol-name i { font-style: normal; font-size: .75rem; color: var(--red, #c4232b); }
.ol-name small { font-weight: 400; font-size: .74rem; opacity: .7; }
.ol-list b { font-family: var(--font-sign, inherit); color: var(--red, #c4232b); }
.ol-loading, .ol-me { text-align: center; margin: .8rem 0; font-weight: 700; }
.ol-foot { margin-top: .8rem; display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .9rem; }
.ol-link { border: 0; background: none; text-decoration: underline; font-weight: 700; padding: 0; }

/* 遊戲入面嘅「排行榜／對戰」掣 */
.ol-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: .2rem 0 .1rem; }
.ol-actions .btn { padding: .5em 1em; font-size: .95rem; }
.ol-vs { position: absolute; top: 56px; right: 10px; z-index: 5; background: rgba(255, 244, 220, .94); border: 3px solid var(--brown, #4a2414); border-radius: 14px; padding: .35rem .6rem; font-weight: 900; font-size: .85rem; line-height: 1.25; min-width: 120px; pointer-events: none; color: var(--brown, #4a2414); }
.ol-vs small { display: block; font-weight: 700; opacity: .75; font-size: .72rem; }
.ol-vs b { color: var(--red, #c4232b); font-family: var(--font-sign, inherit); font-size: 1rem; }
.ol-wait { text-align: center; display: grid; gap: .6rem; justify-items: center; padding: 1rem 0; }
.ol-wait .ol-spin { width: 54px; height: 54px; border-radius: 50%; border: 6px solid #f3d9a3; border-top-color: var(--red, #c4232b); animation: olspin 1s linear infinite; }
@keyframes olspin { to { transform: rotate(360deg); } }
.ol-result { margin: .4rem 0; padding: .6rem; border-radius: 14px; background: #fff; border: 3px solid var(--brown, #4a2414); font-weight: 700; text-align: center; }
.ol-result.win { background: #fff6d6; border-color: #d99a00; }