/* The "Rütbe Puanların" page (public/js/rank-page.js): the home page modal and the game window share it */
.rkp { color: #b9c8d6; font-size: 13px; line-height: 1.45; }
.rkp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; background: linear-gradient(180deg, #16314d, #0b1a2b); border: 1px solid #2f5a82; }
.rkp-head span { color: #9fc0de; letter-spacing: .5px; text-transform: uppercase; font-size: 12px; }
.rkp-head b { color: #ffcf6a; font-size: 28px; letter-spacing: 1px; }
.rkp-rows { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.rkp-rows td { padding: 4px 8px; border-bottom: 1px solid rgba(58, 83, 103, .45); }
.rkp-rows .rkp-s { width: 18px; text-align: center; font-weight: 700; }
.rkp-rows .rkp-v, .rkp-rows .rkp-f, .rkp-rows .rkp-p { text-align: right; white-space: nowrap; }
.rkp-rows .rkp-f { color: #7288a0; }
.rkp-rows .rkp-p { font-weight: 700; color: #dbe9f6; }
.rkp-rows tr.pos .rkp-s { color: #8ff0ae; }
.rkp-rows tr.neg td { color: #ff6b6b; }
.rkp-rows tr.neg .rkp-f { color: #c25a5a; }
.rkp-rows tr.rkp-total td { border-top: 2px solid #3a5367; border-bottom: 0; color: #ffcf6a; font-weight: 700; }
.rkp-rows tr.rkp-total .rkp-p { color: #ffcf6a; font-size: 1.1em; }
.rkp-text { padding: 8px 12px; background: rgba(13, 22, 32, .8); border: 1px solid #22323f; }
.rkp-text p { margin: 3px 0; }
.rkp-me { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rkp-me .rkp-ico { width: 48px; height: 48px; }
.rkp-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
.rkp-row .rkp-ico { width: 28px; height: 28px; }
.rkp-k { color: #7288a0; }
.rkp-name { color: #eef4fa; font-weight: 700; }
.rkp-me .rkp-name { font-size: 17px; }
.rkp-need { color: #ffcf6a; font-weight: 700; }
.rkp-sub { color: #9fb6cc; font-size: 12px; }
.rkp-pos { margin-top: 8px !important; color: #eef4fa; }
.rkp-h { margin: 12px 0 4px; color: #9fc0de; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }
.rkp-tab { width: 100%; border-collapse: collapse; }
.rkp-tab th { padding: 3px 6px; color: #7288a0; font-weight: 400; font-size: 11px; text-align: right; border-bottom: 1px solid #3a5367; }
.rkp-tab th:first-child, .rkp-tab td:first-child { text-align: left; }
.rkp-tab td { padding: 2px 6px; text-align: right; border-bottom: 1px solid rgba(34, 50, 63, .8); white-space: nowrap; }
.rkp-tab td .rkp-r { display: flex; align-items: center; gap: 6px; white-space: normal; }
.rkp-tab .rkp-ico { width: 22px; height: 22px; flex: none; }
.rkp-tab tr.me td { background: rgba(240, 180, 60, .14); color: #ffd877; }
.rkp-crowd { margin: 10px 0 0; color: #7288a0; font-size: 12px; }
.rkp-err, .rkp-load { padding: 18px 12px; text-align: center; color: #9fb6cc; }
.rkp-open { cursor: pointer; }
@media (max-width: 600px) { .rkp-head b { font-size: 22px; } .rkp-tab { font-size: 12px; } .rkp-tab td, .rkp-tab th { padding: 2px 4px; } }

/* the pop-up window of the home page */
.rkp-modal .modal-card { width: min(620px, 96vw); }
.rkp-modal .panel-body { padding: 10px; }
.rkp-modal .panel-head { display: flex; align-items: center; }
/* the game window */
#win-rankpts .rankpts-body { width: min(560px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 120px)); overflow-y: auto; padding: 8px 10px 12px; }