.miji-ranking-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 20, 30, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-sizing: border-box;
  /* 長押しでのメニュー・選択を抑える（ゲーム画面の作法に合わせる） */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.miji-ranking-card {
  width: 100%;
  max-width: 360px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 18px;
  background: rgba(28, 34, 48, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  color: #f4f6fb;
  font-family: inherit;
  text-align: center;
}

.miji-ranking-title {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}

.miji-ranking-offer-score {
  margin: 0 0 14px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffd66b;
}

.miji-ranking-name-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: #c7cede;
  text-align: left;
}

.miji-ranking-name-input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 1rem;
  font-family: inherit;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.miji-ranking-name-input:focus {
  outline: 2px solid #7cc9a8;
  outline-offset: 1px;
}

.miji-ranking-note {
  margin: 8px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #ffb4b4;
  text-align: left;
}

.miji-ranking-error {
  min-height: 1.1em;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #ff8a8a;
  text-align: left;
}

.miji-ranking-error:empty { margin: 0; }

.miji-ranking-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.miji-ranking-submit,
.miji-ranking-skip,
.miji-ranking-close {
  flex: 1;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  font: 700 0.92rem/1 inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.miji-ranking-submit {
  background: #7cc9a8;
  color: #10261d;
}
.miji-ranking-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.miji-ranking-skip {
  background: rgba(255, 255, 255, 0.12);
  color: #f4f6fb;
}

.miji-ranking-close {
  width: 100%;
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #f4f6fb;
}

.miji-ranking-result-line {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #e4e8f2;
}

.miji-ranking-error-text {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: #ffb4b4;
}

.miji-ranking-tabs {
  display: flex;
  margin: 8px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  overflow: hidden;
}

.miji-ranking-tab {
  flex: 1;
  box-sizing: border-box;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: #c7cede;
  font: 700 0.85rem/1 inherit;
  cursor: pointer;
}

.miji-ranking-tab + .miji-ranking-tab {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.miji-ranking-tab.is-active {
  background: #7cc9a8;
  color: #10261d;
}

.miji-ranking-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  text-align: left;
}

.miji-ranking-row {
  display: grid;
  grid-template-columns: 2.6em 1fr auto 2.8em;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
}

.miji-ranking-row:last-child { border-bottom: 0; }

.miji-ranking-rank {
  color: #9fb3ff;
  font-weight: 700;
}

.miji-ranking-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
}

.miji-ranking-score {
  font-weight: 700;
  color: #ffd66b;
  white-space: nowrap;
}

.miji-ranking-date {
  color: #8b93a7;
  font-size: 0.76rem;
  text-align: right;
  white-space: nowrap;
}

.miji-ranking-empty {
  padding: 14px 4px;
  color: #8b93a7;
  font-size: 0.86rem;
  text-align: center;
}

/* ランキング呼び出しボタン（☰やスタート画面に置く用の共通見た目） */
.miji-ranking-open-btn {
  display: inline-block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 36px;
  border: none;
  border-radius: 14px;
  background: var(--rk-btn-bg, #e8b04a);
  color: var(--rk-btn-text, #3a2410);
  font: 700 0.95rem/1 'LINE Seed JP', sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--rk-btn-shadow, #8b6a3e);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.miji-ranking-open-btn:hover { filter: brightness(1.06); }
.miji-ranking-open-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--rk-btn-shadow, #8b6a3e); }

/* ===== テーマあり：表彰台つきの見た目（既定は森パネル） =====
   色は theme.colors で上書きできる（JSが .miji-rk-skin に --rk-* を設定する）。
   --rk-panel-bg / --rk-border / --rk-accent / --rk-accent-text / --rk-plank-text /
   --rk-plank-score / --rk-plaque-bg / --rk-plaque-border
   ランキングを開くボタンは overlay の外にあるため --rk-btn-bg / --rk-btn-text / --rk-btn-shadow を
   :root に設定する。 */

.miji-ranking-card.miji-rk-skin {
  max-width: 360px;
  max-height: 97dvh;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--rk-panel-bg, rgba(22, 40, 28, 0.94));
  border: 2px solid var(--rk-border, #8b6a3e);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  color: #fff8e6;
}

.miji-rk-head {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #fff8e6;
}
.miji-rk-head b {
  color: #f2c14e;
  font-size: 22px;
}
.miji-rk-head-plain {
  font-size: 20px;
  font-weight: bold;
  color: #fff8e6;
}

.miji-rk-diff-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 6px;
}
.miji-rk-diff-pill {
  box-sizing: border-box;
  height: 26px;
  padding: 0 10px;
  line-height: 24px;
  border-radius: 13px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: rgba(255, 248, 230, 0.75);
  border: 1px solid rgba(255, 248, 230, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.miji-rk-diff-pill.is-active {
  background: #fff8e6;
  color: #22341f;
  font-weight: bold;
  border-color: #fff8e6;
}

.miji-rk-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
}
.miji-rk-tab {
  flex: 1;
  box-sizing: border-box;
  height: 32px;
  line-height: 29px;
  border-radius: 16px;
  text-align: center;
  font-size: 14px;
  border: 1.5px solid rgba(255, 248, 230, 0.35);
  background: transparent;
  color: rgba(255, 248, 230, 0.8);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.miji-rk-tab.is-active {
  background: var(--rk-accent, #e8b04a);
  color: var(--rk-accent-text, #3a2410);
  font-weight: bold;
  border-color: var(--rk-accent, #e8b04a);
}

/* 表彰台＋名札の塊。ふだんは何もしない（今までと同じ並び）。
   背の低い画面では JS が .is-fit を付け、--rk-fit の倍率でまとめて縮める
   （キャラ・順位の数字・名札の位置関係は倍率が同じなので崩れない） */
.miji-rk-stage.is-fit {
  position: relative;
}
.miji-rk-stage.is-fit .miji-rk-stage-inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rk-podium-w, 279px);
  transform: translateX(-50%) scale(var(--rk-fit, 1));
  transform-origin: 50% 0;
}

.miji-rk-podium {
  position: relative;
  width: var(--rk-podium-w, 279px);
  height: var(--rk-podium-h, 180px);
  margin: 0 auto 4px;
  max-width: 100%;
}
.miji-rk-podium-base {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--rk-podium-w, 279px);
}
.miji-rk-bird {
  position: absolute;
  transform: translateX(-50%);
}
.miji-rk-face {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  width: 60px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.5);
}
.miji-rk-face-n {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  /* 2026-10-01 明るい台（雲・氷・光る窓）の上で金銀銅の数字が薄かった（ミスターホリチ選択A）＝濃い縁取りを外側に付ける */
  -webkit-text-stroke: 5px rgba(28, 20, 12, 0.92);
  paint-order: stroke fill;
}
.miji-rk-face-dash {
  opacity: 0.45;
  color: #fff8e6;
}

.gold { color: #f2c14e; }
.silver { color: #dfe5ea; }
.bronze { color: #f3ad72; }

.miji-rk-plaques {
  position: relative;
  width: var(--rk-podium-w, 279px);
  max-width: 100%;
  height: 44px;
  margin: var(--rk-plaque-gap, -8px) auto 8px;
}
.miji-rk-plaque {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: var(--rk-plaque-w, 86px);
  height: 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--rk-plaque-bg, rgba(40, 22, 10, 0.88));
  border: 1px solid var(--rk-plaque-border, #8b6a3e);
  border-radius: 8px;
  padding: 3px 4px;
  text-align: center;
}
.miji-rk-plaque-nm {
  width: 100%;
  flex: none;
  line-height: 1.2;
  font-size: 12px;
  font-weight: bold;
  color: #fff8e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.miji-rk-plaque-sc {
  flex: none;
  line-height: 1.2;
  font-size: 15px;
  font-weight: bold;
  margin-top: 1px;
}
.miji-rk-plaque-sc small { font-size: 10px; margin-left: 1px; font-weight: normal; }
.miji-rk-plaque.is-me { border: 2px solid #f2c14e; }
.miji-rk-plaque.is-me .miji-rk-plaque-nm { color: #f2c14e; }
.miji-rk-plaque-empty .miji-rk-plaque-nm { opacity: 0.5; }

.miji-rk-board {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.miji-rk-plank {
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  color: var(--rk-plank-text, #4a2a12);
  text-align: left;
  border-style: solid;
  border-width: 0 12px;
  margin: 0 -2px;
}
.miji-rk-plank-r {
  flex: 0 0 auto;
  width: 26px;
  font-size: 15px;
  font-weight: 900;
}
.miji-rk-plank-nm {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.miji-rk-plank-sc {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 900;
  color: var(--rk-plank-score, #6b3410);
  white-space: nowrap;
}
.miji-rk-plank-sc small { font-size: 11px; margin-left: 2px; }
.miji-rk-plank.is-me { filter: drop-shadow(0 0 3px #f2c14e); }

.miji-rk-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  background: var(--rk-accent-text, #3a2410);
  color: #f2c14e;
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

.miji-rk-empty-msg {
  padding: 20px 8px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #e7dcc0;
}

.miji-rk-close {
  margin-top: 10px;
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff8e6;
  text-align: center;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* テーマあり：登録モーダル */
.miji-rk-offer-title {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff8e6;
  text-align: center;
}
.miji-rk-offer-score {
  margin: 0 0 14px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #f2c14e;
  text-align: center;
}
.miji-rk-name-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: #d9c9a3;
  text-align: left;
}
.miji-rk-name-input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--rk-border, #8b6a3e);
  background: #fff3dc;
  color: var(--rk-accent-text, #3a2410);
  font-size: 1rem;
  font-family: inherit;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.miji-rk-name-input:focus {
  outline: 2px solid var(--rk-accent, #e8b04a);
  outline-offset: 1px;
}
.miji-rk-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #f3ad72;
  text-align: left;
}
.miji-rk-error {
  min-height: 1.1em;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: #ff8a8a;
  text-align: left;
}
.miji-rk-error:empty { margin: 0; }
.miji-rk-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.miji-rk-submit,
.miji-rk-skip {
  flex: 1;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  font: 700 0.92rem/1 inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.miji-rk-submit { background: var(--rk-accent, #e8b04a); color: var(--rk-accent-text, #3a2410); }
.miji-rk-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.miji-rk-skip { background: rgba(255, 255, 255, 0.12); color: #fff8e6; }

.miji-ranking-name-taken,
.miji-rk-name-taken {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #ff9b7a;
  text-align: left;
}
.miji-ranking-name-taken:empty,
.miji-rk-name-taken:empty { margin: 0; }

/* 背の低い画面：表彰台を縮めるだけでは足りない時に、余白と板の行の高さを詰める。
   文字の大きさは変えない（4〜10位の文字は 14〜16px のまま） */
.miji-ranking-card.miji-rk-skin.miji-rk-compact { padding: 8px 14px; }
.miji-rk-compact .miji-rk-head { margin-bottom: 4px; }
.miji-rk-compact .miji-rk-diff-switch { margin-bottom: 4px; }
.miji-rk-compact .miji-rk-tabs { margin-bottom: 4px; }
.miji-rk-compact .miji-rk-tab { height: 30px; line-height: 27px; }
.miji-rk-compact .miji-rk-plank { height: 23px; }
.miji-rk-compact .miji-rk-close { margin-top: 6px; }