body {
  margin: 0;

  padding: 0;

  background: #f5e6c8;

  color: #222;

  font-family: sans-serif;

  overflow: hidden;
}

/* タイトル画面 */

/*
 * 背景の画像は縦長のまま、画面の高さに合わせて中央に置く。
 * スマホ（画面が画像より細い）は左右が少し切れて画面いっぱいに、
 * PC（画面が画像より横に広い）は左右が黒になる。
 */
#titleScreen {
  position: fixed;

  inset: 0;

  background: #000 url("title-bg.webp") center top / auto 100% no-repeat;

  text-align: center;
}

/* タイトルの文字は画像に入っているので、画面には出さない（読み上げ用に残す）。 */
#titleScreen h1.visuallyHidden {
  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

  border: 0;
}

/* ボタンは、画像の力士の間の黒い部分（横綱の綱の高さ）に置く。 */
#titleButtons {
  position: absolute;

  top: 49%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  flex-direction: column;

  align-items: center;
}

#titleButtons button {
  width: 160px;

  height: 52px;

  font-size: 24px;

  background: rgba(0, 0, 0, 0.6);

  color: #fff;

  border: 2px solid rgba(255, 215, 120, 0.85);

  border-radius: 10px;

  text-shadow: 0 1px 3px #000;

  cursor: pointer;
}

#titleButtons #continueButton {
  margin-top: 14px;
}

#titleButtons button:active {
  background: rgba(0, 0, 0, 0.8);
}

#startButton {
  width: 200px;

  height: 60px;

  font-size: 24px;

  border: none;

  border-radius: 12px;
}

/* 通常ゲーム画面 */

#gameScreen {
  padding: 10px;

  height: 100vh;

  box-sizing: border-box;
}

/* 日付 */

#dateArea {
  display: flex;

  justify-content: space-between;

  font-size: 18px;

  margin-bottom: 10px;
}

/* 基本情報 */

#statusArea {
  background: white;

  border-radius: 12px;

  padding: 8px;

  margin-bottom: 8px;
}

#statusArea h2 {
  margin: 0 0 6px 0;

  font-size: 22px;

  text-align: center;
}

#statusArea p {
  margin: 4px 0;

  font-size: 16px;
}
.statusRow {
  display: flex;

  justify-content: space-between;

  gap: 4px;

  margin-bottom: 4px;
}

.statusRow p {
  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  font-size: 12px;

  margin: 0;

  gap: 2px;
}

/* 能力 */

#abilityArea {
  background: white;

  border-radius: 12px;

  padding: 10px;

  margin-bottom: 10px;
}

/* 各段 */

.abilityRow {
  display: flex;

  justify-content: space-between;

  gap: 6px;

  margin-bottom: 6px;
}

/* 上4 */

.fourStats p {
  flex: 1;

  text-align: center;

  font-size: 14px;

  margin: 0;
}

/* 下5 */

.fiveStats p {
  flex: 1;

  text-align: center;

  font-size: 13px;

  margin: 0;
}

/* 下部 */

.bottomStats {
  justify-content: space-around;

  margin-top: 8px;
}

.bottomStats p {
  font-size: 13px;

  margin: 0;
}

/* 行動 */

#actionArea {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 10px;
}

#actionArea button {
  flex: 1;

  height: 48px;

  font-size: 18px;

  border: none;

  border-radius: 10px;
}

/* 稽古 */

#trainingMenu {
  display: none;

  grid-template-columns: repeat(4, 1fr);

  gap: 6px;

  margin-bottom: 10px;
}

#trainingMenu button {
  height: 46px;

  font-size: 14px;

  border: none;

  border-radius: 10px;
}

/* 休養 */

#restMenu {
  display: none;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;
}

#restMenu button {
  height: 46px;

  font-size: 17px;

  border: none;

  border-radius: 10px;
}

/* 本場所開催 */

#bashoStartScreen {
  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: #f5e6c8;
}

#bashoStartText {
  position: absolute;

  top: 45%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 38px;

  font-weight: bold;

  text-align: center;

  width: 100%;
}

#bashoStartButton {
  position: absolute;

  right: 20px;

  bottom: 120px;

  width: 120px;

  height: 50px;

  font-size: 20px;

  border: none;

  border-radius: 12px;
}

/* 本場所画面 */

#bashoScreen {
  display: none;
  position: relative;

  padding: 8px;

  height: 100vh;

  box-sizing: border-box;

  text-align: center;

  /* 本場所画面は内容が増えても画面内を縦スクロールできるようにする */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 場所名 */

#bashoTitle {
  font-size: 28px;

  font-weight: bold;

  margin-bottom: 4px;
}

/* 日目 */

#bashoDayText {
  font-size: 22px;

  margin-bottom: 4px;
}

/* 成績 */

#scoreArea {
  font-size: 22px;

  font-weight: bold;

  margin-bottom: 8px;
}

/* 自分 */

#myRikishiArea {
  background: white;

  border-radius: 12px;

  padding: 8px;

  margin-bottom: 6px;
}

#myRikishiArea h2 {
  margin: 0 0 6px 0;

  font-size: 24px;
}

#myRikishiArea p {
  margin: 3px 0;

  font-size: 15px;
}

/* VS */

#versusText {
  font-size: 28px;

  font-weight: bold;

  margin-bottom: 6px;
}

/* 相手 */

#enemyArea {
  background: white;

  border-radius: 12px;

  padding: 8px;

  margin-bottom: 6px;
}

#enemyArea h2 {
  margin: 0 0 6px 0;

  font-size: 24px;
}

#enemyArea p {
  margin: 3px 0;

  font-size: 15px;
}

/* 取組なし */

#noMatchText {
  display: none;

  font-size: 22px;

  margin-top: 20px;

  margin-bottom: 20px;
}

/* 実況欄 */

#battleLog {
  display: none;

  background: black;

  color: white;

  border-radius: 10px;

  padding: 10px;

  min-height: 40px;

  font-size: 18px;

  margin-bottom: 10px;

  justify-content: center;

  align-items: center;
}

/* ボタン */

/* 怪我発生直後の確認ボタン */
#injuryCommentNextButton {
  display: none;
  width: 60%;
  min-width: 180px;
  height: 60px;
  margin: 20px auto;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
}

#rehabButton {
  display: none;
  width: 60%;
  min-width: 180px;
  height: 60px;
  margin: 20px auto;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
}

#bashoButtonArea {
  display: flex;

  justify-content: center;

  gap: 10px;
}

#bashoButtonArea button {
  width: 45%;

  height: 48px;

  font-size: 18px;

  border: none;

  border-radius: 10px;
}

#nextDayButton {
  display: none;
}

/* 場所終了画面 */

#bashoEndScreen {
  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: #f5e6c8;

  text-align: center;
}

/* 終了タイトル */

#bashoEndTitle {
  margin: clamp(36px, 10vh, 90px) 12px 0;

  font-size: clamp(25px, 7vw, 38px);

  font-weight: bold;
}

/* 終了ボタン */

#bashoEndButtons {
  margin-top: clamp(20px, 5vh, 44px);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;
}

#bashoEndButtons button {
  width: min(86vw, 320px);

  min-height: 54px;

  font-size: clamp(18px, 5vw, 23px);

  border: none;

  border-radius: 12px;
}

/* 成績画面 */

#recordScreen {
  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: #f5e6c8;

  text-align: center;
}

/* 成績タイトル */

#recordTitle {
  margin-top: 120px;

  font-size: 38px;

  font-weight: bold;
}

/* 成績内容 */

#recordContent {
  margin-top: 80px;

  font-size: 32px;

  line-height: 2;
}

/* 成績戻る */

#recordBackButton {
  margin-top: 100px;

  width: 220px;

  height: 60px;

  font-size: 24px;

  border: none;

  border-radius: 12px;
}

/* 表彰画面 */

#awardScreen {
  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background: #f5e6c8;

  text-align: center;

  overflow-y: auto;
}

/* 表彰タイトル */

#awardTitle {
  margin-top: 40px;

  font-size: 38px;

  font-weight: bold;
}

/* 表彰内容 */

#awardContent {
  margin-top: 40px;

  font-size: 24px;

  line-height: 2.2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

/* 表彰戻る */

#awardBackButton {
  margin-top: 30px;

  margin-bottom: 40px;

  width: 220px;

  height: 60px;

  font-size: 24px;

  border: none;

  border-radius: 12px;
}
/* CPUデバッグ */

#cpuDebugArea {
  margin-top: 10px;

  background: white;

  border-radius: 12px;

  padding: 10px;
}

#cpuDebugButton {
  width: 100%;

  height: 46px;

  font-size: 18px;

  border: none;

  border-radius: 10px;

  margin-bottom: 10px;
}

#cpuDebugResult {
  white-space: pre-line;

  font-size: 14px;

  line-height: 1.5;
}
#newGameButton,
#continueButton {
  width: 180px;
  height: 60px;
  font-size: 28px;
}

#continueButton {
  margin-top: 30px;
}
#createRikishiScreen {
  height: 100vh;
  overflow-y: auto;
}
#commentLog {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #999;
  min-height: 60px;
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-line;
}
/* デバッグパネル */

#debugToggleButton {
  width: 100%;
  height: 42px;
  margin-top: 8px;
  font-size: 16px;
}

#debugPanel {
  display: none;

  margin-top: 8px;

  height: 220px;

  overflow-y: auto;

  background: #fff;

  border: 2px solid #444;

  border-radius: 10px;

  padding: 8px;

  box-sizing: border-box;
}

#debugLog {
  margin: 0;

  white-space: pre-wrap;

  font-size: 13px;

  line-height: 1.5;
}
/* ==========================
   番付表ボタン
========================== */

#dateArea {
  display: flex;
  align-items: center;
  gap: 8px;
}

#openBanzukeButton {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
}

#bashoHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#openBanzukeButtonBasho {
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
}

/* ==========================
 番付表画面
========================== */

#banzukeScreen {
  display: none;
  padding: 15px;
  box-sizing: border-box;
}

#banzukeScreen h2 {
  text-align: center;
  margin-bottom: 15px;
}

#banzukeContent {
  border: 2px solid #000;
  height: 500px;
  padding: 10px;
  overflow-y: auto;
  white-space: pre-wrap;
  margin-bottom: 15px;
}

#banzukeBackButton {
  display: block;
  margin: 0 auto;
  width: 120px;
  height: 40px;
  font-size: 18px;
}
#profileScreen {
  display: none;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
}

#profileContent {
  white-space: pre-line;
  margin: 20px 0;
}

/* ==========================
   番付表：東西2列表示
========================== */
#banzukeContent {
  white-space: normal;
}

.banzukeDivision {
  margin-bottom: 22px;
}

.banzukeDivision h3 {
  text-align: center;
  margin: 10px 0 6px;
  font-size: 20px;
}

.banzukeEastWestHeader,
.banzukeRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.banzukeEastWestHeader {
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px;
}

.banzukeSideColumn {
  min-width: 0;
}

.banzukeRikishiCard {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 70px;
  margin: 2px 0;
  padding: 7px 8px;
  box-sizing: border-box;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  color: #000;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.banzukeRikishiCard:hover {
  background: #f3f3f3;
}

.banzukeCurrentRank {
  font-size: 12px;
  color: #555;
}

.banzukeNameLine {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.banzukeTalentType {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid #777;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  background: #f5f5f5;
}

.banzukeTalentRank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid #777;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  background: #fff;
}

/* 才能ランク SS～F */
.banzukeTalentRank {
  font-weight: 900;
}
.banzukeTalentRank.talentRank-SS {
  color: #ff69b4 !important;
}
.banzukeTalentRank.talentRank-S {
  color: #ff0000 !important;
}
.banzukeTalentRank.talentRank-A {
  color: #ff8c00 !important;
}
.banzukeTalentRank.talentRank-B {
  color: #ffd700 !important;
}
.banzukeTalentRank.talentRank-C {
  color: #9acd32 !important;
}
.banzukeTalentRank.talentRank-D {
  color: #008000 !important;
}
.banzukeTalentRank.talentRank-E {
  color: #0000ff !important;
}
.banzukeTalentRank.talentRank-F {
  color: #800080 !important;
}

.banzukeShikona {
  font-size: 18px;
  font-weight: bold;
}

/* 所属の部屋（四股名の下に小さく） */
.banzukeHeya {
  font-size: 12px;
  margin-top: 2px;
}

.banzukePrevious {
  font-size: 12px;
  margin-top: 4px;
}

.banzukeRikishiCard.playerRikishiName .banzukeShikona {
  color: #06c;
}

.banzukeRikishiCard.watchedRikishiName .banzukeShikona {
  color: #d00;
}

.banzukeEmptyCard {
  visibility: hidden;
  cursor: default;
}

.profileActionButtons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.profileActionButtons button {
  width: 120px;
  height: 40px;
  font-size: 18px;
}

/* 前相撲：東西に分けず縦一列で表示 */
.banzukeMaezumoRow {
  width: 100%;
  box-sizing: border-box;
}

.commentRikishiLink {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ==================== 取組結果 ==================== */
#kimariteResultPanel {
  display: none;
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: min(92vw, 640px);
  max-height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border-radius: 12px;
  border: 1px solid #cfcfcf;
  padding: 14px 18px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.kimariteResultTitle {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 7px 0;
  margin-bottom: 14px;
  font-size: 19px;
  font-weight: bold;
}

#kimaritePlayerResult,
#kimariteEnemyResult {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
}

#kimariteResultMove {
  margin: 12px 0;
  font-size: 18px;
  font-weight: bold;
}

#kimariteResultMove:before,
#kimariteResultMove:after {
  content: "";
  display: block;
  height: 1px;
  background: #000;
  margin: 10px 0;
}

/* ==================== 限界突破演出 ==================== */
#limitBreakOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: clamp(38px, 12vw, 72px);
  font-weight: 900;
  color: #ff69b4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}


/* ==================== 詳細星取表 ==================== */
.detail-star-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  font-family: sans-serif;
  overflow: hidden;
}

.detail-star-panel,
.history-panel {
  width: 100%;
  max-width: 560px;
  height: 100%;
  max-height: 100vh;
  background: #fff;
  color: #111;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.detail-star-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #ccc;
  background: #fff;
}

.detail-star-header h2 {
  margin: 0;
  font-size: 21px;
}

.detail-close-button {
  min-width: 70px;
  min-height: 38px;
  padding: 6px 10px;
  font-size: 16px;
}

.detail-division-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  background: #f3f3f3;
}

.detail-division-tabs button {
  min-height: 38px;
  padding: 4px 2px;
  font-size: 14px;
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 5px;
}

.detail-division-tabs button.active {
  background: #263b76;
  color: #fff;
  font-weight: bold;
}

.detail-star-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.detail-star-note {
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.4;
  background: #fafafa;
  border-bottom: 1px solid #ddd;
}

.detail-schedule-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 6px 10px;
  font-size: 14px;
}

.detail-day-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 12px;
}

.detail-day-picker button,
.detail-picker-back {
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid #aaa;
  border-radius: 7px;
  background: #fff;
  color: #111;
  font-size: 16px;
}

.detail-day-picker button:disabled {
  background: #e9e9e9;
  color: #999;
}

.detail-picker-back {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 14px;
  background: #f3f3f3;
}

.detail-table-head,
.detail-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
  width: 100%;
  box-sizing: border-box;
}

.detail-table-head {
  min-height: 40px;
  background: #263b76;
  color: #fff;
  font-weight: bold;
  text-align: center;
  align-items: center;
}

.detail-match-row {
  border-bottom: 1px solid #999;
  background: #fff;
}

.detail-side-cell {
  min-width: 0;
  border-right: 1px solid #bbb;
  box-sizing: border-box;
}

.detail-side-cell:last-child {
  border-right: 0;
  border-left: 1px solid #bbb;
}

.detail-kimarite-cell {
  min-width: 0;
  min-height: 94px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  box-sizing: border-box;
  text-align: center;
  border-left: 0;
  border-right: 0;
}

.detail-day {
  font-size: 10px;
  color: #777;
  margin-bottom: 5px;
}

.detail-kimarite {
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-rikishi-button {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 94px;
  padding: 7px 5px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: #111;
  text-align: center;
  font: inherit;
  cursor: pointer;
}

.detail-rikishi-button:active,
.detail-rikishi-button:hover {
  background: #f1f1f1;
}

.detail-rank {
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.detail-name-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  min-width: 0;
}

.detail-name {
  font-size: clamp(15px, 4.4vw, 21px);
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.detail-symbol {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 900;
}

.detail-record {
  margin-top: 4px;
  font-size: 11px;
  font-weight: bold;
}

.detail-empty-rikishi {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
  font-size: 14px;
  color: #555;
  text-align: center;
}

.detail-no-matches {
  padding: 30px 15px;
  text-align: center;
  color: #666;
}

.profile-history-button {
  display: block;
  margin: 6px 0 0;
  padding: 2px 14px;
  font-size: inherit;
  line-height: 1.6;
}

.history-panel {
  max-width: 560px;
}

.history-list,
.history-day-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  box-sizing: border-box;
}

.history-item {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-height: 78px;
  margin-bottom: 8px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #bbb;
  border-radius: 8px;
  background: #fff;
  color: #111;
  text-align: left;
  font: inherit;
}

.history-item:active,
.history-item:hover {
  background: #f3f3f3;
}

.history-item-title {
  font-size: 14px;
  font-weight: bold;
}

.history-item-rank {
  font-size: 13px;
  margin-top: 3px;
}

.history-item-record {
  font-size: 15px;
  font-weight: bold;
  margin-top: 4px;
}

.history-empty {
  padding: 30px 10px;
  text-align: center;
  color: #666;
}

.history-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #ccc;
  background: #fff;
}

.history-footer button {
  flex: 1 1 0;
  min-height: 44px;
  font-size: 16px;
}

.history-detail-summary {
  flex: 0 0 auto;
  padding: 12px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
}

.history-day-row {
  display: grid;
  grid-template-columns: 58px 36px minmax(0, 1fr) minmax(50px, .8fr);
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid #ddd;
  padding: 3px 4px;
  box-sizing: border-box;
  font-size: 13px;
}

.history-day-row strong {
  text-align: center;
  font-size: 20px;
}

.history-day-row span:last-child {
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 380px) {
  .detail-table-head,
  .detail-match-row {
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  }
  .detail-name {
    font-size: 15px;
  }
  .detail-rikishi-button,
  .detail-kimarite-cell,
  .detail-empty-rikishi {
    min-height: 88px;
  }
  .history-day-row {
    grid-template-columns: 52px 32px minmax(0, 1fr) 45px;
    font-size: 12px;
  }
}


#dateArea {
  flex-wrap: wrap;
}

#dateArea > button {
  padding: 4px 7px;
  font-size: 13px;
  white-space: nowrap;
}

#openBanzukeButton {
  margin-left: auto;
}

#bashoHeader {
  flex-wrap: wrap;
  gap: 6px;
}

#bashoHeader > button {
  padding: 4px 8px;
  font-size: 13px;
}

/* スマホ幅では日付と番付表・星取表ボタンを一行に収める */
@media (max-width: 480px) {
  #dateArea {
    flex-wrap: nowrap;
    gap: 4px;
    font-size: clamp(12px, 3.9vw, 18px);
  }

  #dateArea > span {
    white-space: nowrap;
  }

  #dateArea > button {
    padding: 4px;
    font-size: clamp(11px, 3.4vw, 13px);
  }
}

/* タップでプロフィールを開ける力士名 */
.profile-link-name {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* 本場所画面の見出し：番付表・星取表ボタンを右側にまとめる */
#openBanzukeButtonBasho {
  margin-left: auto;
}

@media (max-width: 480px) {
  #bashoHeader {
    flex-wrap: nowrap;
    gap: 4px;
  }

  #bashoTitle {
    font-size: clamp(18px, 6vw, 28px);
    white-space: nowrap;
  }

  #bashoHeader > button {
    padding: 4px;
    font-size: clamp(11px, 3.4vw, 13px);
    white-space: nowrap;
  }
}

/* ==================== 取組実況 ==================== */
/* 相手の欄（総合値・補正後）のすぐ下に置く実況欄 */
#boutCommentaryBox {
  display: none;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border-radius: 12px;
  border: 2px solid #333;
  padding: 6px 10px 8px;
  margin-bottom: 6px;
}

.boutCommentaryTitle {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 3px;
  border-bottom: 1px solid #000;
  margin-bottom: 4px;
}

#boutCommentaryLines {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.commentary-line {
  font-size: 15px;
  line-height: 1.4;
  padding: 3px 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.commentary-line + .commentary-line {
  border-top: 1px dashed #ddd;
}

.commentary-line-past {
  color: #666;
}

.commentary-line-current {
  font-weight: bold;
}


#boutCommentaryButtons {
  display: flex;
  gap: 10px;
}

#boutCommentaryButtons button {
  flex: 1;
  min-height: 44px;
  font-size: 17px;
  border: none;
  border-radius: 10px;
}

#commentaryNextButton {
  font-weight: bold;
}

/* 実況中は結果がわかる操作を止める */
.bout-commentary-locked .profile-link-name {
  cursor: default;
  text-decoration: none;
}

/* ==================== 本場所画面：上下を詰める ==================== */
/* スマホでも、取組ボタンと実況欄がスクロールなしで見えるようにする。 */
#enemyTypeRow {
  display: none;
}

#bashoScreen {
  padding: 6px 8px;
}

#bashoTitle {
  margin-bottom: 0;
}

#bashoDayText {
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 0;
}

#divisionText {
  font-size: 15px;
  line-height: 1.3;
}

#scoreArea {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 4px;
}

#myRikishiArea,
#enemyArea {
  padding: 4px 8px 5px;
  margin-bottom: 5px;
}

#myRikishiArea h2,
#enemyArea h2 {
  margin: 0 0 1px 0;
  font-size: 21px;
  line-height: 1.3;
}

#myRikishiArea p,
#enemyArea p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

#noMatchText {
  font-size: 19px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#bashoButtonArea button {
  height: 44px;
}

/* 高さの低いスマホ（iPhone SE など）では、さらに少し詰める */
@media (max-height: 668px) {
  #bashoDayText {
    font-size: 17px;
  }

  #divisionText {
    font-size: 14px;
  }

  #scoreArea {
    font-size: 18px;
    margin-bottom: 3px;
  }

  #myRikishiArea h2,
  #enemyArea h2 {
    font-size: 19px;
  }

  #myRikishiArea p,
  #enemyArea p {
    font-size: 13px;
    line-height: 1.35;
  }

  .commentary-line {
    font-size: 14px;
    line-height: 1.35;
    padding: 2px 0;
  }

  #boutCommentaryButtons button {
    min-height: 40px;
    font-size: 16px;
  }
}

/* ==================== 優勝決定戦の情報欄（簡略版） ==================== */
#bashoPlayoffInfoPanel {
  display: none;
  width: min(96%, 760px);
  margin: 4px auto 6px;
  padding: 5px 10px;
  box-sizing: border-box;
  border: 2px solid #333;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

#bashoPlayoffInfoPanel .playoff-info-title {
  font-size: 15px;
  font-weight: bold;
}

#bashoPlayoffInfoPanel .playoff-info-match,
#bashoPlayoffInfoPanel .playoff-info-result {
  font-weight: bold;
}

/* ==================== セーブ失敗の知らせ ==================== */
/* 画面の上に固定して表示する（ボタンを隠さないよう、重ねずに上に置く）。 */
#saveErrorBanner {
  position: sticky;
  top: 0;
  z-index: 2000;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  background: #c62828;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
}

/* ==================== 歴代記録 ==================== */
/* 通常画面：日付の行のすぐ下に、右寄せで1つだけ置く */
#recordsButtonRow {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: -4px 0 8px;
}

#openRecordsButton,
#openNetRankingButton,
#openNewspaperButton {
  padding: 4px 10px;
  font-size: 13px;
  white-space: nowrap;
}

#recordsScreen {
  display: none;
  width: 100%;
  /* ページ全体（body）はスクロールしないため、プロフィール画面と同じく画面の中でスクロールする */
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 15px;
}

#recordsScreen h2 {
  text-align: center;
  margin: 0 0 12px;
}

#recordsSelectLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 12px;
}

#recordsSelect {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  padding: 4px;
}

#recordsContent {
  background: white;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 15px;
}

.records-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 4px;
}

.records-note {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.records-table th,
.records-table td {
  border-bottom: 1px solid #e3d6bd;
  padding: 6px 4px;
  text-align: left;
  vertical-align: top;
}

.records-table th {
  font-size: 12px;
  color: #666;
  font-weight: normal;
}

.records-rank {
  width: 3em;
  white-space: nowrap;
}

.records-value {
  white-space: nowrap;
  text-align: right;
}

.records-sub {
  display: block;
  font-size: 12px;
  color: #666;
}

/* プレイヤーの四股名は番付表と同じ色（.banzukeRikishiCard.playerRikishiName と同じ） */
.records-player,
.player-shikona,
.detail-name.player-shikona {
  color: #06c;
}

/* 歴代記録：タップでプロフィールを開く力士名 */
.records-name-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.records-name-link.records-player {
  color: #06c;
}

.records-game-row td {
  background: #fdf6e6;
}

.records-foot {
  margin-top: 8px;
}

.records-empty {
  color: #666;
  font-size: 14px;
  margin: 8px 0;
}

#recordsBackButton,
#netRankingBackButton {
  display: block;
  margin: 0 auto;
  width: 120px;
  height: 40px;
  font-size: 18px;
}

@media (max-width: 480px) {
  /* スマホ幅では、上の行の番付表・星取表ボタンと同じ大きさにそろえる */
  #openRecordsButton,
  #openNetRankingButton,
  #openNewspaperButton {
    padding: 4px;
    font-size: clamp(11px, 3.4vw, 13px);
  }
}

/* ==================== 通常画面（育成画面）：稽古場の背景と黒い半透明パネル ==================== */
/*
 * 背景の写真は通常画面だけに使う。縦長のまま、画面の高さに合わせて中央に置く
 * （スマホは画面いっぱい、PCは中央に置いて左右は黒）。
 * 画面の中身は #gameScreen の中でスクロールし、背景は動かない。
 */
#gameScreen {
  --gold: #d8b25c;
  --gold-light: #f4dc96;
  --gold-line: rgba(216, 178, 92, 0.75);
  --panel-bg: rgba(8, 6, 4, 0.62);
  --text-light: #fbf6ea;

  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* 中身の幅は背景の写真の幅（高さの約0.56倍）までにして、PCでも写真の上に置く */
  padding: 8px max(8px, calc((100% - max(360px, min(500px, 56vh))) / 2)) 12px;

  background:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    url("keiko-bg.webp") center center / auto 100% no-repeat,
    #000;

  color: var(--text-light);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
  font-weight: bold;
}

#gameScreen button {
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

/* 各ブロック共通：黒い半透明パネル＋細い金の枠＋少し丸い角 */
#gameScreen #dateArea,
#gameScreen #statusArea,
#gameScreen #abilityArea,
#gameScreen #commentLog {
  box-sizing: border-box;
  background: var(--panel-bg);
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 0 0 4px rgba(216, 178, 92, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px #000;
}

/* 金枠の小さいボタン（番付表・星取表・歴代記録） */
#gameScreen #dateArea > button,
#gameScreen #openRecordsButton,
#gameScreen #openNetRankingButton,
#gameScreen #openNewspaperButton {
  padding: 4px 7px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

#gameScreen #dateArea > button:active,
#gameScreen #openRecordsButton:active,
#gameScreen #openNetRankingButton:active,
#gameScreen #openNewspaperButton:active {
  background: rgba(216, 178, 92, 0.3);
}

/* 日付の行 */
#gameScreen #dateArea {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 7px 8px;
  color: var(--gold-light);
  font-size: 19px;
}

#gameScreen #dateArea > span {
  white-space: nowrap;
}

#gameScreen #recordsButtonRow {
  margin: 0 0 6px;
}

/* 力士の基本情報：四股名を左上に大きく、左に番付・型・年齢、右に体重・総合・疲労・怪我 */
#gameScreen #statusArea {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: 12px;
  padding: 8px 12px 10px;
  margin-bottom: 6px;
}

#gameScreen #statusArea .statusRow {
  display: contents;
}

#gameScreen #statusArea h2 {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0 0 2px;
  color: var(--text-light);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-align: left;
  text-decoration-color: rgba(216, 178, 92, 0.45);
  text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 0, 0, 0.6);
  overflow-wrap: anywhere;
}

#gameScreen #statusArea .statusRow p {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 3px 0;
  color: var(--gold);
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
}

#gameScreen #statusArea .statusRow p span {
  color: var(--text-light);
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 怪我：1行目に怪我の名前、2行目に「残り◯週間」（ui.js の renderInjuryStatus）。
   右の列は幅が狭いので、「…」で省略せず、それぞれの行は途中で切らない。 */
#gameScreen #statusArea #injury {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  line-height: 1.25;
}

#gameScreen #statusArea #injury .injuryName,
#gameScreen #statusArea #injury .injuryRemaining {
  color: inherit;
  white-space: nowrap;
  overflow: visible;
}

#gameScreen #statusArea #injury .injuryName {
  font-size: 15px;
}

#gameScreen #statusArea #injury .injuryNameLong {
  font-size: clamp(11px, 3.4vw, 15px);
}

#gameScreen #statusArea #injury .injuryRemaining {
  font-size: 13px;
  color: #ffcf9e;
}

/* 左の列（番付・型・年齢）は下に細い線 */
#gameScreen #statusArea .topStatus p:nth-child(1),
#gameScreen #statusArea .topStatus p:nth-child(3),
#gameScreen #statusArea .topStatus p:nth-child(4) {
  grid-column: 1;
  border-bottom: 1px solid rgba(216, 178, 92, 0.28);
}

#gameScreen #statusArea .topStatus p:nth-child(1) {
  grid-row: 3;
}

#gameScreen #statusArea .topStatus p:nth-child(3) {
  grid-row: 4;
}

#gameScreen #statusArea .topStatus p:nth-child(4) {
  grid-row: 5;
  border-bottom: 0;
}

/* 右の列（体重・総合・疲労・怪我）は左に細い区切り線 */
#gameScreen #statusArea .topStatus p:nth-child(2),
#gameScreen #statusArea .bottomStatus p {
  grid-column: 2;
  padding-left: 12px;
  border-left: 1px solid rgba(216, 178, 92, 0.35);
}

#gameScreen #statusArea .topStatus p:nth-child(2) {
  grid-row: 2;
}

#gameScreen #statusArea .bottomStatus p:nth-child(1) {
  grid-row: 3;
}

#gameScreen #statusArea .bottomStatus p:nth-child(2) {
  grid-row: 4;
}

#gameScreen #statusArea .bottomStatus p:nth-child(3) {
  grid-row: 5;
}

/* 能力値：項目名の下に数値を大きく、数値の下に能力に応じた色の線 */
#gameScreen #abilityArea {
  padding: 6px 10px 8px;
  margin-bottom: 8px;
}

#gameScreen #abilityArea::before {
  content: "能力値";
  display: block;
  margin-bottom: 4px;
  padding: 0 2px 3px;
  border-bottom: 1px solid rgba(216, 178, 92, 0.45);
  color: var(--gold-light);
  font-size: 19px;
  letter-spacing: 0.08em;
}

#gameScreen .abilityRow {
  gap: 4px;
  margin-bottom: 0;
}

#gameScreen .abilityRow + .abilityRow.fiveStats:nth-child(3) {
  margin-top: 8px;
}

#gameScreen .abilityRow p {
  min-width: 0;
  color: var(--gold);
  font-size: 16px;
  line-height: 1.3;
}

#gameScreen .abilityRow p span {
  display: inline-block;
  box-sizing: border-box;
  width: min(2.6em, 100%);
  padding: 0 0 1px;
  /* 文字は白、下線は今までの文字の色（能力値に応じた色分け）を使う */
  -webkit-text-fill-color: var(--text-light);
  border-bottom: 3px solid currentColor;
  border-radius: 1px;
  font-size: 24px;
  line-height: 1.2;
}

/* 稽古（赤）・休養（青）：金の枠と少し立体感のある大きいボタン */
#gameScreen #actionArea {
  gap: 12px;
  margin-bottom: 8px;
}

#gameScreen #actionArea button {
  height: 58px;
  border: 2px solid var(--gold);
  border-radius: 6px;
  color: #fff8e4;
  font-size: 26px;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 3px rgba(255, 255, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.6);
}

#gameScreen #trainingButton {
  background: linear-gradient(#b3261e, #7a0f0c 55%, #5a0806);
}

#gameScreen #restButton {
  background: linear-gradient(#2348a8, #102a6e 55%, #0a1b4c);
}

/* 本場所へ（本場所が始まった週に、稽古・休養の代わりに出す）：金茶の大きいボタン */
#gameScreen #goBashoButton {
  background: linear-gradient(#b8892a, #7a5512 55%, #553a08);
}

#gameScreen #actionArea button:active {
  transform: translateY(1px);
  filter: brightness(1.15);
}

/* 稽古メニュー・休養メニュー：金枠の黒い半透明ボタン（文字だけ） */
#gameScreen #trainingMenu,
#gameScreen #restMenu {
  gap: 6px;
  margin-bottom: 8px;
}

#gameScreen #trainingMenu button,
#gameScreen #restMenu button,
#gameScreen #bashoReturnChoice button,
#gameScreen #rehabButton,
#gameScreen #injuryCommentNextButton {
  background: var(--panel-bg);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px #000;
}

#gameScreen #trainingMenu button,
#gameScreen #restMenu button {
  min-width: 0;
  height: 46px;
  padding: 2px 1px;
  font-size: 15px;
  line-height: 1.2;
}

#gameScreen #trainingMenu button:active,
#gameScreen #restMenu button:active,
#gameScreen #bashoReturnChoice button:active,
#gameScreen #rehabButton:active,
#gameScreen #injuryCommentNextButton:active {
  background: rgba(216, 178, 92, 0.3);
}

#gameScreen #bashoReturnChoice button {
  min-width: 120px;
  height: 48px;
  margin: 4px;
  font-size: 18px;
}

/* コメント：見出しは金色の小さな札、パネルの中に文章 */
#gameScreen #commentLog {
  margin-top: 0;
  padding: 8px 12px 10px;
  color: var(--text-light);
  font-size: 15px;
  line-height: 1.55;
}

#gameScreen #commentLog::before {
  content: "コメント";
  display: table;
  margin: 0 0 6px -4px;
  padding: 1px 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: 3px 10px 3px 3px;
  color: var(--gold-light);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

#gameScreen #commentLog .commentRikishiLink {
  color: var(--gold-light);
}

/* コメント履歴（自分の力士の稽古・休養・能力の変化）。新しいものが上。
   増減は色でも分けるが、意味は「＋」「－」の文字で伝える。
   件数が多いときは、コメント欄の中でスクロールする（#commentLog の max-height）。 */
#commentLog .commentNotice {
  margin-bottom: 4px;
}

#commentLog .commentNotice + .playerEventLog {
  padding-top: 4px;
  border-top: 1px solid rgba(216, 178, 92, 0.35);
}

#commentLog .playerEventLog {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: normal;
}

#commentLog .playerEventLog li {
  margin: 0;
  padding: 1px 0;
}

#commentLog .playerEventLog li + li {
  border-top: 1px dotted rgba(216, 178, 92, 0.25);
}

#commentLog .playerEventDate {
  display: inline-block;
  margin-right: 0.6em;
  font-size: 0.82em;
  color: var(--gold-light, #8a6a2a);
  opacity: 0.85;
  white-space: nowrap;
}

#commentLog .playerEventChange {
  white-space: nowrap;
}

#gameScreen #commentLog .playerEventChange-up {
  color: #c4f0a6;
}

#gameScreen #commentLog .playerEventChange-down {
  color: #ffab9e;
}

#gameScreen #commentLog .playerEventChange-fatigue {
  color: #e2d8c2;
}

/* スマホ幅：日付と3つのボタンを1行に収める */
@media (max-width: 480px) {
  #gameScreen #dateArea {
    gap: 4px;
    padding: 6px;
    font-size: clamp(13px, 4.3vw, 19px);
  }

  #gameScreen #dateArea > button,
  #gameScreen #openRecordsButton,
  #gameScreen #openNetRankingButton,
  #gameScreen #openNewspaperButton {
    padding: 4px;
    font-size: clamp(10px, 3.2vw, 13px);
  }

  #gameScreen #statusArea h2 {
    font-size: clamp(30px, 10vw, 40px);
  }

  #gameScreen #statusArea .statusRow p {
    gap: clamp(5px, 2vw, 10px);
    font-size: clamp(13px, 4vw, 16px);
  }

  #gameScreen #statusArea .statusRow p span {
    font-size: clamp(13px, 4.2vw, 17px);
  }

  #gameScreen #trainingMenu button,
  #gameScreen #restMenu button {
    font-size: clamp(11px, 3.3vw, 15px);
  }
}

/* 高さの低いスマホ（iPhone SE など）では上下を詰める */
@media (max-height: 668px) {
  #gameScreen #statusArea {
    padding: 5px 10px 6px;
  }

  #gameScreen #statusArea h2 {
    font-size: 30px;
  }

  #gameScreen #statusArea .statusRow p {
    padding: 1px 0;
  }

  #gameScreen #abilityArea {
    padding: 4px 8px 6px;
    margin-bottom: 6px;
  }

  #gameScreen #abilityArea::before {
    font-size: 16px;
    margin-bottom: 2px;
  }

  #gameScreen .abilityRow p {
    font-size: 14px;
  }

  #gameScreen .abilityRow p span {
    font-size: 20px;
  }

  #gameScreen .abilityRow + .abilityRow.fiveStats:nth-child(3) {
    margin-top: 2px;
  }

  #gameScreen #actionArea {
    margin-bottom: 6px;
  }

  #gameScreen #recordsButtonRow {
    margin-bottom: 4px;
  }

  #gameScreen #actionArea button {
    height: 46px;
    font-size: 23px;
  }

  #gameScreen #trainingMenu button,
  #gameScreen #restMenu button {
    height: 38px;
  }

  #gameScreen #commentLog::before {
    margin-bottom: 3px;
    font-size: 12px;
  }

  #gameScreen #commentLog {
    padding: 5px 10px 6px;
    font-size: 14px;
    line-height: 1.45;
  }
}

/* ==================== 本場所画面：国技館の背景と黒い半透明パネル ==================== */
/*
 * 背景の写真は本場所画面だけに使う。画面いっぱいに広げて（cover）中央に置く。
 * 画面の中身は #bashoScreen の中でスクロールし、背景は動かない。
 * 写真が読み込めないときは、今までの背景色（#f5e6c8）のまま表示する。
 */
#bashoScreen {
  --gold: #d8b25c;
  --gold-light: #f4dc96;
  --gold-line: rgba(216, 178, 92, 0.75);
  --panel-bg: rgba(8, 6, 4, 0.62);
  --panel-bg-strong: rgba(8, 6, 4, 0.8);
  --text-light: #fbf6ea;

  height: 100vh;
  height: 100dvh;

  /* 中身の幅はスマホでは画面いっぱい、PCでは中央に寄せる */
  padding: 6px max(8px, calc((100% - 540px) / 2)) 12px;

  background: #f5e6c8 url("basho_bg.webp") center center / cover no-repeat;

  color: var(--text-light);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
  font-weight: bold;
}

#bashoScreen button {
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

/* パネル共通：黒い半透明＋細い金の枠＋少し丸い角 */
#bashoScreen #bashoHeader,
#bashoScreen #myRikishiArea,
#bashoScreen #enemyArea,
#bashoScreen #boutCommentaryBox,
#bashoScreen #bashoPlayoffInfoPanel,
#bashoScreen #noMatchText,
#bashoScreen #kimariteResultPanel {
  box-sizing: border-box;
  background: var(--panel-bg);
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 0 0 4px rgba(216, 178, 92, 0.22), 0 2px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px #000;
}

/* ヘッダー：場所名と番付表・星取表ボタン */
#bashoScreen #bashoHeader {
  padding: 6px 8px;
  margin-bottom: 0;
  border-radius: 6px 6px 0 0;
  border-bottom: 0;
}

#bashoScreen #bashoTitle {
  color: var(--gold-light);
  letter-spacing: 0.06em;
}

/* 金枠の小さいボタン（番付表・全体星取表・詳細星取表）：文字だけ */
#bashoScreen #bashoHeader > button {
  background: rgba(0, 0, 0, 0.55);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

#bashoScreen #bashoHeader > button:active {
  background: rgba(216, 178, 92, 0.3);
}

#bashoScreen #bashoHeader > button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 日目・階級・成績は、ヘッダーと続けて1枚のパネルに見せる */
#bashoScreen #bashoDayText,
#bashoScreen #divisionText,
#bashoScreen #scoreArea {
  box-sizing: border-box;
  margin: 0;
  background: var(--panel-bg);
  border-left: 1px solid var(--gold-line);
  border-right: 1px solid var(--gold-line);
  text-shadow: 0 1px 2px #000;
}

#bashoScreen #bashoDayText {
  padding-top: 4px;
  border-top: 1px solid rgba(216, 178, 92, 0.35);
  color: var(--gold-light);
}

#bashoScreen #divisionText {
  color: var(--gold);
}

#bashoScreen #scoreArea {
  margin-bottom: 6px;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--gold-line);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  color: var(--text-light);
  font-size: 24px;
  letter-spacing: 0.04em;
}

/* 力士のカード（自分・対戦相手）：土俵が少し透けて見える濃さ */
#bashoScreen #myRikishiArea,
#bashoScreen #enemyArea {
  background: rgba(8, 6, 4, 0.55);
  padding: 5px 10px 6px;
}

#bashoScreen #myRikishiArea h2,
#bashoScreen #enemyArea h2 {
  color: var(--text-light);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration-color: rgba(216, 178, 92, 0.5);
  text-shadow: 0 2px 4px #000, 0 0 10px rgba(0, 0, 0, 0.6);
  overflow-wrap: anywhere;
}

#bashoScreen #myRikishiArea p,
#bashoScreen #enemyArea p {
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bashoScreen #myRikishiArea p span,
#bashoScreen #enemyArea p span {
  color: var(--text-light);
}

/* 項目は今までどおり縦に並べ、数値を大きく */
#bashoScreen #enemyScore {
  color: var(--text-light);
}

#bashoScreen #myTotal,
#bashoScreen #myAdjustedTotal,
#bashoScreen #enemyTotal,
#bashoScreen #enemyAdjustedTotal {
  font-size: 20px;
  letter-spacing: 0.02em;
}

#bashoScreen #myRank,
#bashoScreen #enemyRank {
  font-size: 15px;
}

/* 実況：文字が背景に埋もれないよう、ほかのパネルより濃くする */
#bashoScreen #boutCommentaryBox {
  background: var(--panel-bg-strong);
  color: var(--text-light);
}

#bashoScreen .boutCommentaryTitle {
  display: table;
  margin: 0 auto 4px;
  padding: 1px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  color: var(--gold-light);
  font-size: 13px;
  letter-spacing: 0.15em;
}

#bashoScreen .commentary-line {
  font-size: 16px;
}

#bashoScreen .commentary-line + .commentary-line {
  border-top: 1px dashed rgba(216, 178, 92, 0.3);
}

#bashoScreen .commentary-line-past {
  color: #c9bfa8;
}

#bashoScreen .commentary-line-current {
  color: var(--gold-light);
}

#bashoScreen #boutCommentaryButtons button,
#bashoScreen #nextDayButton {
  background: var(--panel-bg);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px #000;
}

#bashoScreen #commentaryNextButton {
  border: 2px solid var(--gold);
}

/* 取組ボタン：目立つ金の枠 */
#bashoScreen #matchButton {
  background: linear-gradient(#4a3512, #24180a 55%, #140d05);
  color: #fff3cf;
  border: 2px solid var(--gold-light);
  border-radius: 6px;
  font-size: 22px;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4),
    inset 0 0 0 3px rgba(244, 220, 150, 0.35), 0 0 10px rgba(216, 178, 92, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.6);
}

#bashoScreen #nextDayButton {
  font-size: 18px;
}

#bashoScreen #bashoButtonArea button:active,
#bashoScreen #boutCommentaryButtons button:active {
  transform: translateY(1px);
  filter: brightness(1.2);
}

/* 取組なし */
#bashoScreen #noMatchText {
  padding: 10px 8px;
  color: var(--gold-light);
}

/* 優勝決定戦の情報欄 */
#bashoScreen #bashoPlayoffInfoPanel {
  width: 100%;
  margin: 0 0 6px;
  color: var(--text-light);
}

#bashoScreen #bashoPlayoffInfoPanel .playoff-info-title {
  color: var(--gold-light);
}

/* 取組結果（画面の上に重ねて出すパネル） */
#bashoScreen #kimariteResultPanel {
  background: rgba(8, 6, 4, 0.9);
  color: var(--text-light);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 0 0 4px rgba(216, 178, 92, 0.3), 0 4px 18px rgba(0, 0, 0, 0.7);
}

#bashoScreen .kimariteResultTitle {
  border-color: var(--gold-line);
  color: var(--gold-light);
  letter-spacing: 0.15em;
}

#bashoScreen #kimariteResultMove {
  color: var(--gold-light);
  font-size: 22px;
}

#bashoScreen #kimariteResultMove:before,
#bashoScreen #kimariteResultMove:after {
  background: rgba(216, 178, 92, 0.45);
}

/* デバッグ欄（ふだんは出ない）も読めるように */
#bashoScreen #debugPanel {
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-light);
}

/* 高さの低いスマホ（iPhone SE など）では上下を詰める */
@media (max-height: 668px) {
  #bashoScreen #bashoHeader {
    padding: 4px 6px;
  }

  #bashoScreen #scoreArea {
    font-size: 20px;
    padding-bottom: 3px;
  }

  #bashoScreen #myRikishiArea,
  #bashoScreen #enemyArea {
    padding: 3px 8px 4px;
  }

  #bashoScreen #myRikishiArea h2,
  #bashoScreen #enemyArea h2 {
    font-size: 20px;
  }

  #bashoScreen #myTotal,
  #bashoScreen #myAdjustedTotal,
  #bashoScreen #enemyTotal,
  #bashoScreen #enemyAdjustedTotal {
    font-size: 17px;
  }

  #bashoScreen .commentary-line {
    font-size: 14px;
  }

  #bashoScreen #matchButton {
    font-size: 20px;
  }
}

/* ==================== 場所終了画面（「初場所終了！」）：満員御礼の国技館の写真と金の文字 ==================== */
/*
 * 本場所開始画面と同じ作り。写真の上に黒のグラデーションを重ね、文字とボタンを読みやすくする。
 * 写真が読み込めないときは、今までの背景色（#f5e6c8）の上にグラデーションが重なるだけで、画面はそのまま動く。
 */
#bashoEndScreen {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.42) 40%,
      rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.62) 100%),
    url("basho_end_bg.webp") center center / cover no-repeat,
    #f5e6c8;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

/* タイトル：開始画面と同じ、黒の半透明の帯に金の文字 */
#bashoEndTitle {
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px 12px 16px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.72) 18%,
      rgba(0, 0, 0, 0.72) 82%, rgba(0, 0, 0, 0.45));
  border-top: 2px solid #d8b25c;
  border-bottom: 2px solid #d8b25c;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  color: #e8c15a;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  white-space: nowrap;
  text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000,
    2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000,
    0 4px 10px rgba(0, 0, 0, 0.85);
}

/* ボタン：開始画面の「次へ」と同じ、金の枠と黒の半透明 */
#bashoEndButtons button {
  background: rgba(8, 6, 4, 0.72);
  color: #f4dc96;
  border: 2px solid #d8b25c;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.6);
  font-family: inherit;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#bashoEndButtons button:active {
  transform: translateY(1px);
  filter: brightness(1.2);
}

/* ==================== 本場所開始画面（「初場所開催！」）：国技館の写真と金の文字 ==================== */
/*
 * 背景の写真は画面いっぱいに中央に置く（この画面は fixed なので背景も動かない）。
 * 写真の上に、上下を濃く中央をやや薄くした黒のグラデーションを重ねて明るさをそろえる。
 * 写真が読み込めないときは、今までの背景色（#f5e6c8）の上に同じグラデーションが重なるだけで、
 * 画面はそのまま動く。
 */
#bashoStartScreen {
  height: 100vh;
  height: 100dvh;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.38) 38%,
      rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.6) 100%),
    url("basho_open_bg.webp") center center / cover no-repeat,
    #f5e6c8;
}

/*
 * 文字の後ろに、左右に余白を持たせた黒の半透明の帯（上下に細い金の線）を敷く。
 * 場所名が変わっても、同じ帯の中に表示される。
 */
#bashoStartText {
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 620px;
  padding: 18px 12px 20px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.72) 18%,
      rgba(0, 0, 0, 0.72) 82%, rgba(0, 0, 0, 0.45));
  border-top: 2px solid #d8b25c;
  border-bottom: 2px solid #d8b25c;
  border-radius: 8px;
  box-shadow: inset 0 4px 0 -2px rgba(0, 0, 0, 0.6),
    inset 0 5px 0 -2px rgba(232, 193, 90, 0.45),
    inset 0 -4px 0 -2px rgba(0, 0, 0, 0.6),
    inset 0 -5px 0 -2px rgba(232, 193, 90, 0.45), 0 6px 22px rgba(0, 0, 0, 0.55);

  color: #e8c15a;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
  /* いちばん長い「名古屋場所開催！」も1行に収まる大きさ */
  font-size: clamp(28px, 9.5vw, 68px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  white-space: nowrap;

  /* 黒い縁取り（細い影を八方に重ねる）と、下に落ちる影 */
  text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000,
    2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000,
    0 4px 10px rgba(0, 0, 0, 0.85), 0 0 18px rgba(232, 193, 90, 0.25);
}

/* 次へ：金の枠と黒の半透明のボタン */
#bashoStartButton {
  background: rgba(8, 6, 4, 0.72);
  color: #f4dc96;
  border: 2px solid #d8b25c;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.6);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#bashoStartButton:active {
  transform: translateY(1px);
  filter: brightness(1.2);
}

/* ==================== プロフィール・歴代記録・番付表：暗い和風の背景と和紙のカード ==================== */
/*
 * 3画面で同じ見た目にする。
 * - 背景（profile_frame_bg.webp）は、画面に固定した背景専用の層（::before）に表示する。
 *   スマホでは background-attachment: fixed が効かないことがあるため使わない。
 *   ::before は画面が表示されている間だけ存在するので、他の画面には残らない。
 * - 内容は背景の層の上（z-index: 1）に載せ、内容だけがスクロールする。
 * - 和紙のカード（.washi-card）の背景は profile_bg.webp。
 * - 画像が読み込めないときは、背景は黒、カードは薄いベージュの単色になる。
 */
#profileScreen,
#recordsScreen,
#netRankingScreen,
#banzukeScreen {
  --washi-ink: #1a130b;
  --washi-ink-soft: #5a4630;
  --washi-note: #7a6a58;
  --washi-gold: #b88a35;
  --washi-gold-line: rgba(184, 138, 53, 0.55);
  --washi-gold-text: #e8c15a;

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: 16px 14px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* 背景の層の下も黒にして、画面の端に白い隙間が見えないようにする */
  background: #000;
  color: var(--washi-ink);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

/* 画面に固定した背景専用の層 */
#profileScreen::before,
#recordsScreen::before,
#netRankingScreen::before,
#banzukeScreen::before {
  content: "";
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  background: #000 url("profile_frame_bg.webp") center center / cover no-repeat;
}

/* 内容は背景の層の上に載せる */
#profileScreen > *,
#recordsScreen > *,
#netRankingScreen > *,
#banzukeScreen > * {
  position: relative;
  z-index: 1;
}

#profileScreen button,
#recordsScreen button,
#netRankingScreen button,
#banzukeScreen button,
#recordsScreen select,
#netRankingScreen select {
  font-family: inherit;
}

/* 和紙のカード：画面幅より少し小さく、角丸・薄い金の細枠・控えめな影。高さは内容に合わせて伸びる */
.washi-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 18px 22px;
  /* 写真の金の円・弧はカードの右端に寄せ、文字のある左側には薄い和紙色を重ねて目立たなくする */
  background:
    linear-gradient(90deg, rgba(241, 236, 224, 0.78) 0%, rgba(241, 236, 224, 0.7) 62%,
      rgba(241, 236, 224, 0) 94%),
    #efe6d2 url("profile_bg.webp") right center / cover no-repeat;
  border: 1px solid rgba(201, 160, 70, 0.7);
  /* 見出しの帯から右へ伸ばす金の線を、カードの中で止める */
  overflow: hidden;
  border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(150, 115, 60, 0.18), 0 6px 20px rgba(0, 0, 0, 0.55);
}

/* 見出し（プロフィール・歴代記録・番付表）：大きな太い明朝と金色の筆の線 */
.washi-card > h2 {
  position: relative;
  display: table;
  margin: 0 0 14px;
  padding: 0 8px 10px 2px;
  color: #120d07;
  font-size: clamp(28px, 8.5vw, 38px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: left;
}

.washi-card > h2::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -22px;
  bottom: 1px;
  height: 7px;
  border-radius: 60% 40% 70% 30% / 100%;
  background: linear-gradient(90deg, rgba(150, 105, 35, 0.15), #d4a24a 14%,
      #b8862f 45%, #8a6224 75%, rgba(138, 98, 36, 0));
  transform: rotate(-1.2deg);
}

/*
 * 見出しの帯（プロフィールの「基本情報」など・歴代記録の表の見出し・番付表の階級）：
 * 黒〜濃い茶の筆のかすれ風の帯に金色の太い明朝。帯の右に細い金の線を伸ばす。
 */
#profileContent .profile-section,
#recordsContent .records-title,
#netRankingScreen .records-title,
#banzukeContent .banzukeDivision h3 {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: calc(100% - 40px);
  margin: 18px 0 8px -8px;
  padding: 3px 34px 3px 14px;
  color: var(--washi-gold-text);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

#profileContent .profile-section::before,
#recordsContent .records-title::before,
#netRankingScreen .records-title::before,
#banzukeContent .banzukeDivision h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  bottom: -2px;
  right: 0;
  z-index: -1;
  /* 横向きの細いすじで筆のかすれを出し、右端は不ぞろいに切って薄くする */
  background:
    repeating-linear-gradient(0deg, rgba(239, 230, 210, 0) 0 3px,
      rgba(239, 230, 210, 0.16) 3px 4px, rgba(239, 230, 210, 0) 4px 7px),
    linear-gradient(90deg, #120c06 0%, #2a1c0c 40%, #4a3314 72%, rgba(74, 51, 20, 0) 100%);
  clip-path: polygon(1% 14%, 10% 2%, 55% 0, 88% 10%, 100% 34%, 93% 50%, 100% 70%,
      84% 92%, 50% 100%, 8% 96%, 0 64%);
}

#profileContent .profile-section::after,
#recordsContent .records-title::after,
#netRankingScreen .records-title::after,
#banzukeContent .banzukeDivision h3::after {
  content: "";
  position: absolute;
  left: calc(100% - 6px);
  top: 50%;
  width: 100vw;
  max-width: 520px;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 138, 53, 0.9), rgba(184, 138, 53, 0.15) 60%);
}

/* 戻るボタン（3画面とも）：カードの下に置く。金の細枠・黒の半透明・金の文字 */
#profileScreen .profileActionButtons {
  margin-top: 16px;
}

#profileScreen .profileActionButtons button,
#recordsBackButton,
#netRankingBackButton,
#banzukeBackButton {
  background: rgba(0, 0, 0, 0.62);
  color: #f0d488;
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
  font-weight: bold;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#recordsBackButton,
#netRankingBackButton,
#banzukeBackButton {
  margin: 16px auto 0;
}

#profileScreen .profileActionButtons button:active,
#recordsBackButton:active,
#netRankingBackButton:active,
#banzukeBackButton:active {
  background: rgba(216, 178, 92, 0.3);
}

/* ---------- プロフィール画面 ---------- */
#profileScreen #profileContent {
  margin: 0;
  white-space: normal;
  line-height: 1.5;
}

/* 力士名 */
#profileContent .profile-name {
  margin: 0 0 6px 4px;
  color: #120d07;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* 項目名（左揃え）と値（決まった位置にそろえる）の2列 */
#profileContent .profile-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  column-gap: 8px;
  padding: 1px 0 1px 6px;
  font-size: 17px;
}

#profileContent .profile-label {
  color: var(--washi-ink);
}

#profileContent .profile-value,
#profileContent .profile-line {
  color: var(--washi-ink);
  overflow-wrap: anywhere;
}

#profileContent .profile-line {
  padding: 1px 0 1px 6px;
  font-size: 16px;
}

#profileScreen .profile-history-button {
  margin: 6px 0 0 6px;
  padding: 2px 16px;
  background: rgba(255, 250, 235, 0.6);
  color: var(--washi-ink);
  border: 1px solid var(--washi-gold);
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

#profileScreen .profile-history-button:active {
  background: rgba(184, 138, 53, 0.25);
}

/* ---------- 歴代記録画面（ネットランキングも同じ見た目） ---------- */
#recordsSelectLabel,
#netRankingSelectLabel {
  color: var(--washi-ink);
  font-size: 16px;
  font-weight: bold;
}

#recordsSelect,
#netRankingSelect {
  padding: 6px 8px;
  background-color: #f3ead6;
  color: var(--washi-ink);
  border: 1px solid var(--washi-gold);
  border-radius: 6px;
  font-size: 15px;
}

/* 表は白いカードをやめ、和紙のカードに直接載せる */
#recordsScreen #recordsContent {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

#recordsContent .records-title,
#netRankingScreen .records-title {
  margin-top: 14px;
}

#recordsContent .records-note,
#recordsContent .records-empty,
#netRankingScreen .records-note,
#netRankingScreen .records-empty {
  color: var(--washi-note);
}

#recordsContent .records-table,
#netRankingScreen .records-table {
  color: var(--washi-ink);
  font-size: 16px;
}

#recordsContent .records-table th,
#recordsContent .records-table td,
#netRankingScreen .records-table th,
#netRankingScreen .records-table td {
  border-bottom: 1px solid var(--washi-gold-line);
}

#recordsContent .records-table th,
#netRankingScreen .records-table th {
  color: var(--washi-note);
}

#recordsContent .records-sub,
#netRankingScreen .records-sub {
  color: var(--washi-ink-soft);
}

#recordsContent .records-game-row td,
#netRankingScreen .records-game-row td {
  background: rgba(184, 138, 53, 0.12);
}

/* ネットランキング：自分が登録した力士の行は青 */
#netRankingScreen .net-own-row td {
  background: rgba(54, 104, 196, 0.14);
}

#netRankingScreen .net-own-row .records-name-link,
#netRankingScreen .net-own-row .records-value {
  color: #1f4fa8;
}

/* ネットランキング：読み込めないときの文・小さなボタン・自分の力士の登録欄 */
#netRankingScreen .net-ranking-error {
  white-space: pre-line;
}

#netRankingScreen .net-ranking-small-button {
  padding: 4px 12px;
  background: rgba(255, 250, 235, 0.6);
  color: var(--washi-ink);
  border: 1px solid var(--washi-gold);
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

#netRankingScreen .net-ranking-small-button:active {
  background: rgba(184, 138, 53, 0.25);
}

#netRankingEntry {
  margin-top: 18px;
}

#netRankingEntry .net-entry-done,
#netRankingEntry .net-entry-blocked {
  font-size: 14px;
  color: var(--washi-ink-soft);
}

#netRankingEntry .net-entry-reason {
  white-space: pre-line;
}

/* ---------- 番付表画面 ---------- */
/*
 * 番付表は人数が多いので、カードの高さを画面に合わせ、カードの中の一覧（#banzukeContent）を
 * スクロールさせる（プロフィールから戻ったときに一覧の位置を戻す今までの動きをそのまま使う）。
 * 今までの黒い太い枠はやめ、和紙のカードがその役割を持つ。
 */
#banzukeScreen {
  overflow-y: hidden;
}

#banzukeScreen .washi-card {
  display: flex;
  flex-direction: column;
  /* 画面の高さから、上下の余白と戻るボタンの分を引いた高さ */
  height: calc(100vh - 16px - 20px - 40px - 16px);
  height: calc(100dvh - 16px - 20px - 40px - 16px);
  padding-bottom: 10px;
}

#banzukeScreen .washi-card > h2 {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-bottom: 6px;
  text-align: left;
}

#banzukeScreen #banzukeContent {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin: 0 -8px;
  padding: 0 8px 8px;
  border: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  white-space: normal;
}

#banzukeContent .banzukeDivision h3 {
  margin-top: 12px;
}

/* 東・西：黒の太い明朝 */
#banzukeContent .banzukeEastWestHeader {
  color: var(--washi-ink);
  font-size: 17px;
  font-weight: 900;
}

/* 力士カード：和紙より少し濃いベージュに細い金茶の枠 */
#banzukeContent .banzukeRikishiCard {
  background: rgba(226, 211, 180, 0.88);
  color: var(--washi-ink);
  border: 1px solid #a8823f;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(90, 60, 20, 0.18);
  font-family: inherit;
}

#banzukeContent .banzukeRikishiCard:hover {
  background: rgba(214, 196, 160, 0.92);
}

#banzukeContent .banzukeCurrentRank {
  color: var(--washi-ink-soft);
}

#banzukeContent .banzukePrevious,
#banzukeContent .banzukeHeya {
  color: var(--washi-ink-soft);
  overflow-wrap: anywhere;
}

#banzukeContent .banzukeShikona {
  min-width: 0;
  color: #120d07;
  font-size: 20px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

/* 赤い名前（気になる力士）は、和紙の上でも読める濃い赤にする */
#banzukeContent .banzukeRikishiCard.watchedRikishiName .banzukeShikona {
  color: #b3141a;
}

/* 小さなアイコン（M・N・L と才能ランク）：色の意味は今のまま、枠を金茶の細線に */
#banzukeContent .banzukeTalentType,
#banzukeContent .banzukeTalentRank {
  background: rgba(255, 251, 242, 0.92);
  border: 1px solid #a8823f;
  font-family: inherit;
}

#banzukeContent .banzukeTalentType {
  color: var(--washi-ink);
}

@media (max-width: 360px) {
  .washi-card {
    padding: 16px 12px 18px;
  }

  #profileContent .profile-row {
    grid-template-columns: 6.8em minmax(0, 1fr);
    font-size: 15px;
  }

  #profileContent .profile-line {
    font-size: 14px;
  }

  #recordsContent .records-table,
  #netRankingScreen .records-table {
    font-size: 14px;
  }

  /* 長い表の見出し（ゲーム内歴代横綱・大関など）も帯の中で1行に収める */
  #recordsContent .records-title,
  #netRankingScreen .records-title {
    font-size: 16px;
    letter-spacing: 0.06em;
  }

  #banzukeContent .banzukeShikona {
    font-size: 17px;
  }
}

/* ==================== 新弟子登録画面：稽古場の写真を背景にする ==================== */
/*
 * 文字や入力欄は今までのまま、背景だけを写真にする。
 * 背景は画面に固定した専用の層（::before）に表示し、スクロールしても動かない。
 * ::before は画面が表示されている間だけ存在するので、他の画面には残らない。
 * 写真が読み込めないときは、今までの背景色（#f5e6c8）で表示する。
 */
#createRikishiScreen {
  position: relative;
  height: 100vh;
  height: 100dvh;
}

#createRikishiScreen::before {
  content: "";
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  background: #f5e6c8 url("create_bg.webp") center center / cover no-repeat;
}

#createRikishiScreen > * {
  position: relative;
  z-index: 1;
}

/*
 * 見出しと項目名は、写真の暗い木の部分で黒い文字が見えなくなるため、
 * 文字の色だけ明るいクリーム色にして影をつける（大きさ・位置・入力欄は今までのまま）。
 */
#createRikishiScreen > h2,
#createRikishiScreen > p {
  color: #fff6e0;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.85);
}

/* 文字を大きく見やすく：見出し・項目名は明朝の太字、入力欄とボタンも大きくする */
#createRikishiScreen {
  box-sizing: border-box;
  padding: 8px 16px 24px;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

#createRikishiScreen > h2 {
  margin: 12px 0 14px;
  color: #f4dc96;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#createRikishiScreen > p {
  margin: 14px 0 6px;
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

#createRikishiScreen input,
#createRikishiScreen select {
  box-sizing: border-box;
  min-height: 44px;
  padding: 6px 10px;
  font-size: 20px;
  color: #1a130b;
  background-color: #fffaf0;
  border: 1px solid #b88a35;
  border-radius: 6px;
}

#createRikishiScreen #newShikona {
  width: min(100%, 260px);
}

#createRikishiScreen #newWeight {
  width: 120px;
}

#createRikishiScreen select {
  min-width: 120px;
}

#createRikishiScreen hr {
  margin: 20px 0 16px;
  border: 0;
  border-top: 1px solid rgba(244, 220, 150, 0.7);
}

#createRikishiScreen #createRikishiButton {
  min-width: 180px;
  height: 52px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #f4dc96;
  background: rgba(0, 0, 0, 0.62);
  border: 2px solid #d8b25c;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#createRikishiScreen #createRikishiButton:active {
  background: rgba(216, 178, 92, 0.3);
}

/* 高さの低いスマホでは、見出しと項目の間を少し詰める */
@media (max-height: 668px) {
  #createRikishiScreen > h2 {
    margin: 6px 0 8px;
    font-size: 30px;
  }

  #createRikishiScreen > p {
    margin: 8px 0 4px;
    font-size: 19px;
  }

  #createRikishiScreen input,
  #createRikishiScreen select {
    min-height: 40px;
    font-size: 18px;
  }
}

/* ==================== 過去対戦成績（本場所画面のボタンとポップアップ） ==================== */

/* ボタンは取組ボタンの上の段に置く（同じ幅の横に余白を付けて1段を占める） */
#bashoButtonArea {
  flex-wrap: wrap;
  row-gap: 8px;
}

#bashoScreen #bashoButtonArea #pastRecordButton {
  flex: 0 0 45%;
  width: 45%;
  margin: 0 27.5%;
  height: 34px;
  padding: 0 4px;
  background: var(--panel-bg);
  color: var(--gold-light);
  border: 1px solid var(--gold-line);
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

#bashoScreen #bashoButtonArea #pastRecordButton:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ポップアップ：画面の上に重ね、外側は暗くする */
#pastMatchRecordScreen {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

/* 和紙のカードに金の細枠（プロフィール画面と同じ雰囲気）。画像がなくても薄いベージュで表示する */
#pastMatchRecordScreen .pmr-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 12px 12px;
  background:
    linear-gradient(90deg, rgba(241, 236, 224, 0.82) 0%, rgba(241, 236, 224, 0.74) 62%,
      rgba(241, 236, 224, 0.2) 100%),
    #efe6d2 url("profile_bg.webp") right center / cover no-repeat;
  border: 1px solid rgba(201, 160, 70, 0.8);
  border-radius: 10px;
  box-shadow: inset 0 0 24px rgba(150, 115, 60, 0.18), 0 6px 20px rgba(0, 0, 0, 0.55);
  color: #1a130b;
  font-weight: bold;
  text-align: center;
}

/* 上段：自分 ｜ 見出し ｜ 相手 */
#pastMatchRecordScreen .pmr-top,
#pastMatchRecordScreen .pmr-total {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}

#pastMatchRecordScreen .pmr-side {
  min-width: 0;
}

#pastMatchRecordScreen .pmr-name {
  color: #120d07;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* 自分の力士名は、番付表などと同じ濃い青 */
#pastMatchRecordScreen .pmr-player-name {
  color: #06c;
}

#pastMatchRecordScreen .pmr-rank {
  margin-top: 2px;
  color: #5a4630;
  font-size: 12px;
  overflow-wrap: anywhere;
}

#pastMatchRecordScreen .pmr-title,
#pastMatchRecordScreen .pmr-total-label {
  color: #5a4630;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

#pastMatchRecordScreen .pmr-total {
  margin: 10px 0 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(184, 138, 53, 0.55);
  border-bottom: 1px solid rgba(184, 138, 53, 0.55);
}

#pastMatchRecordScreen .pmr-total-value {
  font-size: 20px;
  font-weight: 900;
}

/* 6場所の表：見出しは黒に金文字、行は和紙、中央の列は少し濃い色 */
#pastMatchRecordScreen .pmr-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid rgba(184, 138, 53, 0.75);
}

#pastMatchRecordScreen .pmr-table th {
  padding: 5px 2px;
  background: #15100a;
  color: #e8c15a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.3;
  border: 1px solid rgba(184, 138, 53, 0.6);
}

/* 列の幅：決まり手 ｜ ○● ｜ 場所 ｜ ○● ｜ 決まり手 */
#pastMatchRecordScreen .pmr-col-kimarite {
  width: 27%;
}

#pastMatchRecordScreen .pmr-col-result {
  width: 10%;
}

#pastMatchRecordScreen .pmr-col-basho {
  width: 26%;
}

#pastMatchRecordScreen .pmr-table td {
  height: 34px;
  padding: 2px 3px;
  background: rgba(250, 245, 232, 0.88);
  border: 1px solid rgba(184, 138, 53, 0.45);
  font-size: 12.5px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#pastMatchRecordScreen .pmr-table td.pmr-basho {
  background: rgba(222, 205, 168, 0.95);
  font-size: 13px;
}

#pastMatchRecordScreen .pmr-year {
  display: block;
  color: #5a4630;
  font-size: 10px;
}

#pastMatchRecordScreen .pmr-none {
  color: #7a6a58;
}

/* ○は白抜きの黒縁、●は黒の塗りつぶし */
#pastMatchRecordScreen .pmr-mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #111;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
}

#pastMatchRecordScreen .pmr-win {
  background: #fff;
}

#pastMatchRecordScreen .pmr-lose {
  background: #111;
}

#pastMatchRecordScreen .pmr-footer {
  margin-top: 12px;
}

#pastMatchRecordScreen .pmr-close {
  min-width: 120px;
  height: 38px;
  padding: 0 16px;
  background: #15100a;
  color: #f4dc96;
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 5px;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* 幅の狭いスマホ（320px など）：表の文字を少し小さくする */
@media (max-width: 359px) {
  #pastMatchRecordScreen .pmr-table th {
    font-size: 10px;
  }

  #pastMatchRecordScreen .pmr-table td {
    font-size: 11.5px;
    padding: 2px 1px;
  }

  #pastMatchRecordScreen .pmr-name {
    font-size: 20px;
  }
}

/* ==================== 確認・お知らせの小窓（引退の確認など） ==================== */

/* 画面の上に重ね、外側は暗くする（黒の半透明に金の細枠・金の文字） */
#gameDialog {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

#gameDialog .game-dialog-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 340px;
  padding: 22px 16px 18px;
  background: rgba(12, 9, 5, 0.94);
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.6);
  text-align: center;
}

#gameDialog #gameDialogMessage {
  margin: 0 0 18px;
  color: #f4dc96;
  font-size: 19px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px #000;
  white-space: pre-line;
}

#gameDialog #gameDialogButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

#gameDialog #gameDialogButtons button {
  min-width: 108px;
  height: 42px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.62);
  color: #f0d488;
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

/* 「はい」など、決める方のボタンは金の地に黒い文字 */
#gameDialog #gameDialogButtons button.game-dialog-primary {
  background: linear-gradient(#e6c574, #c79a3e);
  color: #1a130b;
  text-shadow: none;
}

#gameDialog #gameDialogButtons button:active {
  background: rgba(216, 178, 92, 0.3);
}

#gameDialog #gameDialogButtons button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 新弟子登録：引退した力士の後に登録するときのお知らせと、四股名が使えないときの知らせ */
#createRikishiScreen #createRikishiNote {
  margin: 0 0 6px;
  padding: 8px 10px;
  max-width: 420px;
  color: #f4dc96;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
  text-shadow: 0 1px 2px #000;
  white-space: pre-line;
}

#createRikishiScreen #newShikonaError,
#createRikishiScreen #newHeyaError {
  margin: 6px 0 0;
  max-width: 420px;
  color: #ffd0c4;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.85);
}

/* 部屋の選択欄：いちばん長い部屋の名前（佐渡ヶ峰部屋など）が入る幅にする */
#createRikishiScreen #newHeya {
  min-width: 220px;
}

/* 「どの部屋を選んでも能力は変わりません」（項目名と同じクリーム色で、少し小さく） */
#createRikishiScreen #newHeyaNote {
  margin: 6px 0 0;
  max-width: 420px;
  color: #fff6e0;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.85);
}

/* 部屋のない以前のセーブで、部屋だけを選ぶときは、四股名などの欄を出さない */
#createRikishiScreen.heyaOnly .createProfileField {
  display: none;
}

/* ==================== 横綱の強制引退（画面全体を覆い、閉じる方法はない） ==================== */

#forcedRetirementScreen {
  position: fixed;
  inset: 0;
  /* 確認の小窓（#gameDialog）よりも上に重ねる */
  z-index: 2000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: #000 url("profile_frame_bg.webp") center center / cover no-repeat;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

#forcedRetirementScreen .forced-retirement-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 20px 24px;
  background: rgba(10, 7, 4, 0.9);
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 8px 26px rgba(0, 0, 0, 0.7);
  text-align: center;
}

#forcedRetirementScreen .forced-retirement-title {
  margin: 0 0 14px;
  color: #f4dc96;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-shadow: 0 2px 4px #000;
}

#forcedRetirementScreen #forcedRetirementMessage {
  margin: 0 0 22px;
  color: #fbf6ea;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px #000;
  white-space: pre-line;
}

#forcedRetirementScreen #forcedRetirementError {
  margin: -8px 0 16px;
  color: #ffd0c4;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
}

#forcedRetirementScreen #forcedRetirementButton {
  min-width: 180px;
  height: 50px;
  padding: 0 20px;
  background: linear-gradient(#e6c574, #c79a3e);
  color: #1a130b;
  border: 1px solid rgba(216, 178, 92, 0.95);
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  font-family: inherit;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
}

/* 強制引退を待つ間も新聞を読めるボタン（控えめな金枠） */
#forcedRetirementScreen #forcedRetirementNewspaperButton {
  display: block;
  margin: 14px auto 0;
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.55);
  color: #f4dc96;
  border: 1px solid rgba(216, 178, 92, 0.75);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

#forcedRetirementScreen #forcedRetirementButton:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ==================== 引退した力士の経歴 ==================== */

/* プロフィール・歴代記録と同じ黒い背景と和紙のカード。画面の中でスクロールする */
#careerScreen {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  padding: 16px 14px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #000;
  color: #1a130b;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

#careerScreen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000 url("profile_frame_bg.webp") center center / cover no-repeat;
}

#careerScreen > * {
  position: relative;
  z-index: 1;
}

#careerScreen .career-name {
  margin: 4px 0 2px;
  font-size: clamp(30px, 9vw, 40px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

#careerScreen .career-reason {
  display: inline-block;
  margin: 6px 0 12px;
  padding: 3px 12px;
  background: #15100a;
  color: #f4dc96;
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

#careerScreen .career-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  font-weight: bold;
}

#careerScreen .career-table th,
#careerScreen .career-table td {
  padding: 5px 4px;
  border-bottom: 1px solid rgba(184, 138, 53, 0.35);
  text-align: left;
  vertical-align: top;
}

#careerScreen .career-table th {
  width: 7.5em;
  color: #5a4630;
  font-weight: bold;
  white-space: nowrap;
}

#careerScreen .career-links-title {
  margin: 18px 0 8px;
  color: #5a4630;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

#careerScreen #careerLinks,
#careerScreen #careerNetRanking {
  display: grid;
  gap: 8px;
}

#careerScreen #careerLinks button,
#careerScreen #careerNetRanking button,
#careerScreen #careerToTitleButton {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.78);
  color: #f0d488;
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: left;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#careerScreen #careerLinks button span,
#careerScreen #careerNetRanking button span {
  display: block;
  margin-top: 2px;
  color: #d8c79c;
  font-size: 12px;
  letter-spacing: 0.02em;
}

#careerScreen #careerToTitleButton {
  display: block;
  width: min(100%, 260px);
  margin: 18px auto 0;
  padding: 0;
  height: 50px;
  background: linear-gradient(#e6c574, #c79a3e);
  color: #1a130b;
  text-align: center;
  text-shadow: none;
  font-size: 20px;
  font-weight: 900;
}

#careerScreen #careerLinks button:active,
#careerScreen #careerNetRanking button:active {
  background: rgba(216, 178, 92, 0.3);
}

/* 登録済み・登録できないときは押せない見た目にする */
#careerScreen #careerNetRanking button:disabled {
  opacity: 0.55;
  cursor: default;
}

#careerScreen #careerNetRankingReason {
  margin: 0;
  padding: 6px 10px;
  background: rgba(255, 250, 235, 0.65);
  border: 1px solid rgba(184, 138, 53, 0.6);
  border-radius: 4px;
  color: #5a2a14;
  font-size: 13.5px;
  font-weight: bold;
  line-height: 1.5;
  white-space: pre-line;
}

/* 経歴の画面の「対戦成績」一覧 */
.career-opponent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  margin: 0 0 6px;
  box-sizing: border-box;
  background: #fffaf0;
  border: 1px solid #d8c9a4;
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.career-opponent-row .career-opponent-rank {
  display: block;
  color: #6a5a46;
  font-size: 12px;
}

.career-opponent-row .career-opponent-record {
  align-self: center;
  font-weight: bold;
  white-space: nowrap;
}

/* ==================== 表彰画面（「初場所表彰」）：場所終了画面と同じ満員御礼の写真と金の文字 ==================== */
/*
 * 背景・見出し・ボタンは場所終了画面と同じ作り。
 * 表彰の内容は黒の半透明の枠に入れ、賞の名前（金）と力士（番付・四股名・成績）に分けて並べる。
 * 写真が読み込めないときは、今までの背景色（#f5e6c8）の上にグラデーションが重なるだけで、画面はそのまま動く。
 */
#awardScreen {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  padding: 0 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.42) 40%,
      rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.62) 100%),
    url("basho_end_bg.webp") center center / cover no-repeat,
    #f5e6c8;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

/* 見出し：場所終了画面の「初場所終了！」と同じ、黒の半透明の帯に金の文字 */
#awardTitle {
  box-sizing: border-box;
  width: 100%;
  max-width: 620px;
  margin: clamp(24px, 6vh, 60px) auto 0;
  padding: 14px 12px 16px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.72) 18%,
      rgba(0, 0, 0, 0.72) 82%, rgba(0, 0, 0, 0.45));
  border-top: 2px solid #d8b25c;
  border-bottom: 2px solid #d8b25c;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  color: #e8c15a;
  font-size: clamp(25px, 7vw, 38px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  white-space: nowrap;
  text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000,
    2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000,
    0 4px 10px rgba(0, 0, 0, 0.85);
}

/* 表彰の内容：黒の半透明の枠（金の細枠）に並べる */
#awardContent {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  margin: clamp(16px, 3vh, 28px) auto 0;
  padding: 6px 14px;
  background: rgba(8, 6, 4, 0.72);
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.55);
  line-height: 1.4;
  text-align: left;
}

#awardContent .award-section + .award-section {
  margin-top: 4px;
  border-top: 1px solid rgba(216, 178, 92, 0.85);
}

#awardContent .award-row {
  display: grid;
  grid-template-columns: 6.2em 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(216, 178, 92, 0.3);
}

#awardContent .award-section .award-row:last-child {
  border-bottom: none;
}

/* 賞の名前：金の文字 */
#awardContent .award-label {
  color: #e8c15a;
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

/* 力士：番付は小さく、四股名は大きく、成績は番付と同じ大きさ */
#awardContent .award-value {
  min-width: 0;
  color: #fbf6ea;
  font-size: clamp(14px, 3.9vw, 17px);
  font-weight: bold;
  text-shadow: 0 1px 2px #000;
  overflow-wrap: anywhere;
}

#awardContent .award-rank,
#awardContent .award-score {
  color: #d8c79c;
}

/* 番付は1行目に小さく、四股名と成績は2行目。四股名・成績の途中では折り返さない */
#awardContent .award-rank {
  display: block;
  white-space: nowrap;
}

#awardContent .award-name {
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#awardContent .award-score {
  white-space: nowrap;
}

/* 戻る：場所終了画面のボタンと同じ、金の枠と黒の半透明 */
#awardBackButton {
  display: block;
  width: min(86vw, 320px);
  height: auto;
  min-height: 54px;
  margin: clamp(20px, 4vh, 36px) auto 32px;
  background: rgba(8, 6, 4, 0.72);
  color: #f4dc96;
  border: 2px solid #d8b25c;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.6);
  font-family: inherit;
  font-size: clamp(18px, 5vw, 23px);
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#awardBackButton:active {
  transform: translateY(1px);
  filter: brightness(1.2);
}

/* ==================== 新聞「角界新報」の「NEW」の印 ==================== */

#openNewspaperButton {
  position: relative;
}

#openNewspaperButton .newspaperNewBadge {
  position: absolute;
  top: -7px;
  right: -6px;
  padding: 0 4px;
  background: #a3171c;
  color: #fff;
  border-radius: 3px;
  font-family: sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ==================== 新聞「角界新報」（画面の上に重ねる。新聞だけがスクロールする） ==================== */

/* 強制引退の画面（z-index: 2000000）よりも上に重ねる */
#newspaperScreen {
  --np-paper: #e6e0cf;
  --np-ink: #1d1b17;
  --np-red: #a3171c;
  --np-rule: rgba(29, 27, 23, 0.85);

  position: fixed;
  inset: 0;
  z-index: 2100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

/* 紙：#e6e0cf に、細かい点と薄い繊維の筋を重ねてざらつきを出す */
#newspaperScreen .np-paper {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 14px 14px;
  background-color: var(--np-paper);
  background-image:
    radial-gradient(rgba(29, 27, 23, 0.07) 0.6px, transparent 0.8px),
    radial-gradient(rgba(29, 27, 23, 0.05) 0.6px, transparent 0.8px),
    repeating-linear-gradient(
      90deg,
      rgba(120, 100, 60, 0.035) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(120, 100, 60, 0.08));
  background-size: 3px 3px, 5px 5px, auto, auto;
  background-position: 0 0, 1px 2px, 0 0, 0 0;
  color: var(--np-ink);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7);
  font-size: 15px;
  line-height: 1.65;
}

/* 号の切り替え（場所結果号／番付発表号） */
#newspaperScreen .np-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

#newspaperScreen .np-tab {
  flex: 1;
  padding: 6px 4px;
  background: transparent;
  color: var(--np-ink);
  border: 1px solid var(--np-rule);
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

#newspaperScreen .np-tab-active {
  background: var(--np-ink);
  color: var(--np-paper);
}

/* 題字：太く大きく、字間をあけ、下に二重線 */
#newspaperScreen .np-masthead {
  margin-bottom: 10px;
  border-bottom: 5px double var(--np-ink);
}

#newspaperScreen .np-masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--np-rule);
  font-size: 12px;
}

#newspaperScreen .np-issue-name {
  color: var(--np-red);
  font-weight: bold;
  letter-spacing: 0.1em;
}

#newspaperScreen .np-title {
  margin: 2px 0 0;
  font-size: clamp(36px, 12vw, 52px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-align: center;
}

/* 見出し：大きく、力士名だけ赤 */
#newspaperScreen .np-headline {
  margin: 4px 0 2px;
  font-size: clamp(22px, 6.6vw, 28px);
  font-weight: 900;
  line-height: 1.3;
}

#newspaperScreen .np-subhead {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: bold;
}

#newspaperScreen .np-lead {
  margin: 0 0 8px;
  text-indent: 1em;
}

#newspaperScreen .np-red {
  color: var(--np-red);
}

#newspaperScreen .np-self-mark {
  font-size: 0.8em;
  font-weight: bold;
}

#newspaperScreen .np-rank {
  margin-left: 0.4em;
  font-size: 12px;
  white-space: nowrap;
}

#newspaperScreen .np-label {
  display: inline-block;
  margin-right: 0.5em;
  font-weight: bold;
  white-space: nowrap;
}

/* 記事 */
#newspaperScreen .np-article {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 2px solid var(--np-ink);
}

#newspaperScreen .np-article-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 900;
}

#newspaperScreen .np-article p {
  margin: 0 0 4px;
}

/* 小さな記事は2段組にし、縦の罫線で区切る */
#newspaperScreen .np-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#newspaperScreen .np-columns > .np-article {
  min-width: 0;
}

#newspaperScreen .np-columns > .np-article:first-child {
  padding-right: 10px;
}

#newspaperScreen .np-columns > .np-article + .np-article {
  padding-left: 10px;
  border-left: 1px solid var(--np-rule);
}

/* 記事の中の小見出し（大関獲りに挑戦／綱取りに挑戦） */
#newspaperScreen .np-subtitle {
  margin: 6px 0 2px;
  padding-left: 6px;
  border-left: 4px solid var(--np-red);
  font-size: 15px;
  font-weight: 900;
}

#newspaperScreen .np-list,
#newspaperScreen .np-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

#newspaperScreen .np-list li,
#newspaperScreen .np-notes li {
  padding: 2px 0;
}

#newspaperScreen .np-list li + li,
#newspaperScreen .np-notes li + li {
  border-top: 1px dotted rgba(29, 27, 23, 0.4);
}

/* 表は枠で囲む */
#newspaperScreen .np-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--np-ink);
  font-size: 14px;
  line-height: 1.45;
}

#newspaperScreen .np-table th,
#newspaperScreen .np-table td {
  padding: 3px 5px;
  border: 1px solid var(--np-rule);
  text-align: left;
  vertical-align: top;
}

#newspaperScreen .np-table th {
  background: rgba(29, 27, 23, 0.1);
  font-weight: bold;
  white-space: nowrap;
}

#newspaperScreen .np-empty {
  margin: 24px 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

#newspaperScreen .np-footer {
  margin-top: 14px;
  padding-top: 6px;
  border-top: 3px double var(--np-ink);
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.1em;
}

#newspaperScreen .np-close-row {
  margin-top: 10px;
  text-align: center;
}

#newspaperScreen .np-close {
  min-width: 140px;
  padding: 8px 18px;
  background: var(--np-ink);
  color: var(--np-paper);
  border: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

/* とても狭い画面では、2段組をやめて1段にする */
@media (max-width: 340px) {
  #newspaperScreen .np-columns {
    grid-template-columns: 1fr;
  }

  #newspaperScreen .np-columns > .np-article + .np-article {
    padding-left: 0;
    border-left: 0;
  }
}

/* ==================== メニュー（設定・利用規約・クレジット。menu.js） ==================== */

/* 「メニュー」ボタン：タイトル・通常ゲーム画面・本場所画面の、前に音の設定欄があった場所に置く */
.openMenuButton,
#titleButtons button.openMenuButton {
  display: block;
  width: auto;
  height: auto;
  min-height: 32px;
  margin: 8px auto 0;
  padding: 4px 18px;
  background: rgba(8, 6, 4, 0.8);
  color: #f4dc96;
  border: 1px solid rgba(216, 178, 92, 0.6);
  border-radius: 999px;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#titleButtons button.openMenuButton {
  margin-top: 16px;
}

.openMenuButton:active,
#titleButtons button.openMenuButton:active {
  background: rgba(216, 178, 92, 0.3);
}

/* タイトル画面の下の版（バージョン）。©表示のすぐ上に、さらに控えめに出す。 */
#titleVersion {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 16px);
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* タイトル画面の下の©表示 */
#titleCopyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(8px, env(safe-area-inset-bottom));
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* 画面の上に重ね、外側は暗くする（確認の小窓と同じ見た目。強制引退の画面よりは下） */
#gameMenu {
  position: fixed;
  inset: 0;
  z-index: 1500000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.72);
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
    YuMincho, "BIZ UDPMincho", "MS PMincho", "Noto Serif JP",
    "Noto Serif CJK JP", "Source Han Serif JP", serif;
}

#gameMenu .game-menu-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  padding: 18px 16px 16px;
  background: rgba(12, 9, 5, 0.95);
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.6);
  color: #f4dc96;
  text-align: center;
}

#gameMenu .game-menu-panel.game-menu-legal {
  max-width: 560px;
}

#gameMenu .game-menu-title {
  margin: 0 0 14px;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px #000;
}

#gameMenu button {
  min-height: 42px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.62);
  color: #f0d488;
  border: 1px solid rgba(216, 178, 92, 0.85);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.5);
  font-family: inherit;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
}

#gameMenu button:active {
  background: rgba(216, 178, 92, 0.3);
}

#gameMenu .game-menu-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#gameMenu .game-menu-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

#gameMenu .game-menu-footer button {
  min-width: 108px;
}

/* 設定：項目名と、オン・オフのボタン（選んでいる方を金の地にする） */
#gameMenu .game-menu-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#gameMenu .game-menu-setting-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-size: 17px;
  font-weight: bold;
}

#gameMenu .game-menu-setting-row button {
  padding: 0;
}

#gameMenu .game-menu-setting-row button[aria-pressed="true"] {
  background: linear-gradient(#e6c574, #c79a3e);
  color: #1a130b;
  text-shadow: none;
}

/* 利用規約・クレジット：中身だけをスクロールする（スマホでも読める） */
#gameMenuLegalContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 4px;
  text-align: left;
  color: #f4ead2;
  font-size: 14px;
  line-height: 1.7;
}

#gameMenuLegalContent h3 {
  margin: 4px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(216, 178, 92, 0.5);
  color: #f4dc96;
  font-size: 16px;
  letter-spacing: 0.1em;
}

#gameMenuLegalContent h3 + ul {
  margin-bottom: 14px;
}

#gameMenuLegalContent ul {
  margin: 0;
  padding-left: 1.3em;
}

#gameMenuLegalContent li + li {
  margin-top: 4px;
}

#gameMenuLegalContent ul ul {
  margin-top: 2px;
}

#gameMenuLegalContent a {
  color: #ffd27a;
  word-break: break-all;
}

#gameMenuLegalContent .game-menu-version {
  margin: 12px 0 0;
  text-align: center;
  color: rgba(244, 220, 150, 0.8);
  font-size: 12px;
}

#gameMenuLegalContent .game-menu-copyright {
  margin: 4px 0 2px;
  text-align: center;
  color: rgba(244, 220, 150, 0.8);
  font-size: 12px;
}

/* ご意見・ご感想：Google フォームを開く前の説明 */
#gameMenuFeedbackContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  text-align: left;
  color: #f4ead2;
  font-size: 15px;
  line-height: 1.7;
}

#gameMenuFeedbackContent p {
  margin: 0;
  overflow-wrap: anywhere;
}

#gameMenuFeedbackContent p + p {
  margin-top: 10px;
}

#gameMenuFeedbackContent .game-menu-feedback-note {
  font-size: 14px;
  color: rgba(244, 234, 210, 0.85);
}

#gameMenuFeedbackContent .game-menu-feedback-now {
  padding: 6px 10px;
  border: 1px solid rgba(216, 178, 92, 0.5);
  border-radius: 6px;
  color: #f4dc96;
  font-size: 14px;
}

#gameMenuFeedbackContent .game-menu-feedback-offline {
  text-align: center;
  font-weight: bold;
  color: #f4dc96;
}

/* ネットランキング：登録すると公開されることの注意書き */
#careerNetRanking .net-ranking-public-note {
  margin: 6px 0 0;
  font-size: 13px;
  text-align: center;
}

.net-ranking-public-note {
  font-weight: bold;
}

/* ==================== チュートリアル（tutorial.js） ==================== */
/*
 * 画面の下にマスコット、その横に吹き出し。光らせるもの以外は薄暗くする（SVGで穴をあけた暗幕）。
 * 暗幕・光る枠は押せない（pointer-events: none）。ほかのボタンを押せないようにするのは tutorial.js。
 * 新聞（z-index: 2100000）よりは下、ゲームのほかの画面・小窓よりは上に重ねる。
 */
#tutorialLayer {
  position: fixed;
  inset: 0;
  z-index: 2050000;
  pointer-events: none;
}

#tutorialLayer .tutorial-dim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#tutorialLayer .tutorial-dim path {
  fill: rgba(0, 0, 0, 0.62);
}

/* 光らせる枠：ふちが金色に光り、ゆっくり点滅する */
#tutorialLayer .tutorial-glow {
  position: fixed;
  box-sizing: border-box;
  border: 3px solid #ffd95a;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 10px 3px rgba(255, 214, 90, 0.85), inset 0 0 8px rgba(255, 214, 90, 0.55);
  animation: tutorialGlow 1.6s ease-in-out infinite;
}

/* 説明のために見せるだけ（押せない）ところは、点滅させずに細い枠だけ */
#tutorialLayer .tutorial-glow.tutorial-glow-soft {
  border-width: 2px;
  border-color: rgba(255, 228, 150, 0.9);
  box-shadow: 0 0 6px 1px rgba(255, 214, 90, 0.5);
  animation: none;
}

@keyframes tutorialGlow {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 14px 5px rgba(255, 214, 90, 0.95), inset 0 0 10px rgba(255, 214, 90, 0.6);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 4px 1px rgba(255, 214, 90, 0.4), inset 0 0 2px rgba(255, 214, 90, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tutorialLayer .tutorial-glow {
    animation-duration: 3.2s;
  }
}

/* マスコットと吹き出し（ふだんは画面の下。光らせるものと重なるときだけ上へ） */
.tutorial-panel {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  box-sizing: border-box;
  width: calc(100% - 16px);
  max-width: 560px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: auto;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
    "Noto Sans JP", sans-serif;
}

.tutorial-panel.tutorial-panel-top {
  top: max(8px, env(safe-area-inset-top));
  bottom: auto;
  align-items: flex-start;
}

.tutorial-mascot {
  flex: 0 0 auto;
  width: clamp(76px, 24vw, 128px);
  height: auto;
  max-height: 34vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.tutorial-mascot.tutorial-mascot-missing {
  display: none;
}

.tutorial-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 12px 14px 10px;
  background: #fffaf0;
  color: #241a0e;
  border: 3px solid #c99a3c;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

.tutorial-panel-top .tutorial-bubble {
  margin-top: 10px;
  margin-bottom: 0;
}

/* 吹き出しのしっぽ（マスコットのほうへ） */
.tutorial-bubble::before,
.tutorial-bubble::after {
  content: "";
  position: absolute;
  left: -14px;
  bottom: 22px;
  border-style: solid;
  border-width: 9px 14px 9px 0;
  border-color: transparent #c99a3c transparent transparent;
}

.tutorial-bubble::after {
  left: -9px;
  border-color: transparent #fffaf0 transparent transparent;
}

.tutorial-panel-top .tutorial-bubble::before,
.tutorial-panel-top .tutorial-bubble::after {
  bottom: auto;
  top: 22px;
}

.tutorial-mascot-missing + .tutorial-bubble::before,
.tutorial-mascot-missing + .tutorial-bubble::after {
  display: none;
}

.tutorial-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: bold;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.tutorial-page {
  margin: 0 0 4px;
  font-size: 12px;
  color: #7a6a58;
}

.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.tutorial-actions button {
  min-height: 40px;
  min-width: 64px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
}

.tutorial-actions .tutorial-next {
  background: linear-gradient(#b3261e, #7e1510);
  color: #fff;
  border: 2px solid #e6c46d;
}

.tutorial-actions .tutorial-skip {
  background: #efe6d4;
  color: #4a3a26;
  border: 1px solid #b9a27a;
}

.tutorial-actions .tutorial-skip:first-child {
  margin-right: auto;
}

.tutorial-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 吹き出しの後ろに隠れないよう、スクロールできる画面の下に余白を足す */
body.tutorial-on #gameScreen,
body.tutorial-on #bashoEndScreen,
body.tutorial-on #awardScreen,
body.tutorial-on #banzukeScreen {
  padding-bottom: 210px;
}

/* メニューから読み直す（ゲームは進めない） */
#tutorialReplay {
  position: fixed;
  inset: 0;
  z-index: 2200000;
  background: rgba(0, 0, 0, 0.62);
}

/*
 * 「チュートリアル中」の印（tutorial.js）。吹き出しが消えている間（本場所を自由に進める間・新聞を読んでいる間）
 * だけ、画面の左の端に小さく出す。押すと一言とスキップのボタンが出る。新聞（2100000）より上に重ねる。
 */
#tutorialBadge {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 2150000;
  pointer-events: none;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
    "Noto Sans JP", sans-serif;
}

#tutorialBadge .tutorial-badge-button {
  pointer-events: auto;
  display: block;
  padding: 8px 4px;
  min-width: 26px;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  color: #241a0e;
  background: #ffe9a8;
  border: 2px solid #c99a3c;
  border-left: none;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 0.92;
  cursor: pointer;
  transform: translateY(-50%);
}

#tutorialBadge .tutorial-badge-label span {
  display: block;
  text-align: center;
  line-height: 1.15;
}

#tutorialBadge .tutorial-badge-popup {
  pointer-events: auto;
  position: fixed;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: min(300px, calc(100vw - 48px));
  padding: 12px 14px 10px;
  background: #fffaf0;
  color: #241a0e;
  border: 3px solid #c99a3c;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

#tutorialBadge .tutorial-badge-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: bold;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ==================== 番付表：並び替え・絞り込み ==================== */
/*
 * 番付表の上の「並び替え」「上下を入れかえる」「絞り込み」と、並び替えた後の縦1列の一覧。
 * ボタンはスマホで押しやすいよう、高さ44px以上にする。
 */

/* 自分の力士の名前は青（和紙・ベージュのカードの上でも読める濃い青） */
#banzukeContent .banzukeRikishiCard.playerRikishiName .banzukeShikona,
#banzukeContent .banzukeSortRow.playerRikishiName .banzukeSortName {
  color: #0b4ea2;
}

#banzukeScreen #banzukeToolbar {
  flex: 0 0 auto;
  margin: 0 0 8px;
}

#banzukeToolbar .banzukeToolbarButtons {
  display: flex;
  gap: 6px;
}

#banzukeToolbar .banzukeToolbarButtons button,
#banzukeFilterClearButton,
#banzukeScreen .banzukePanelBox button {
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid #a8823f;
  border-radius: 6px;
  background: rgba(255, 251, 242, 0.92);
  color: var(--washi-ink);
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}

#banzukeToolbar .banzukeToolbarButtons button {
  flex: 1 1 0;
  min-width: 0;
}

#banzukeToolbar .banzukeToolbarButtons button:active,
#banzukeFilterClearButton:active,
#banzukeScreen .banzukePanelBox button:active {
  background: rgba(214, 196, 160, 0.95);
}

/* ボタンの下の小さい字（今の向き・今の並び） */
#banzukeScreen .banzukeButtonNote {
  display: block;
  margin-top: 2px;
  color: var(--washi-ink-soft);
  font-size: 11px;
  font-weight: normal;
  overflow-wrap: anywhere;
}

#banzukeSortStatus {
  margin-top: 6px;
  color: var(--washi-ink);
  font-size: 14px;
  font-weight: bold;
}

#banzukeFilterStatus {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #a8823f;
  border-radius: 6px;
  background: rgba(255, 244, 214, 0.9);
  font-size: 14px;
  font-weight: bold;
}

#banzukeFilterStatusText {
  flex: 1 1 12em;
  min-width: 0;
  overflow-wrap: anywhere;
}

#banzukeFilterClearButton {
  flex: 0 0 auto;
  font-size: 14px;
}

/* 並び替えた後：縦1列。1行＝番付・しこ名・並び替えに使った値 */
#banzukeContent .banzukeSortList {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}

#banzukeContent .banzukeSortRow {
  display: grid;
  grid-template-columns: minmax(0, 8.4em) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid #a8823f;
  border-radius: 6px;
  background: rgba(226, 211, 180, 0.88);
  color: var(--washi-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* 人数が多いので、画面の外の行は描かない（スマホでも重くならない） */
  content-visibility: auto;
  contain-intrinsic-size: auto 46px;
}

#banzukeContent .banzukeSortRow:active {
  background: rgba(214, 196, 160, 0.92);
}

#banzukeContent .banzukeSortRank {
  color: var(--washi-ink-soft);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#banzukeContent .banzukeSortName {
  min-width: 0;
  color: #120d07;
  font-size: 18px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

#banzukeContent .banzukeSortRow.watchedRikishiName .banzukeSortName {
  color: #b3141a;
}

#banzukeContent .banzukeSortValue {
  max-width: 9em;
  font-size: 15px;
  font-weight: bold;
  text-align: right;
  overflow-wrap: anywhere;
}

#banzukeContent .banzukeSortValue .banzukeTalentRank {
  width: 28px;
  height: 24px;
  font-size: 13px;
}

#banzukeContent .banzukeNoMatch {
  margin: 24px 0;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
}

/* 並び替え・絞り込みのパネル（画面の上に重ねる） */
#banzukeScreen > .banzukePanel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.55);
}

#banzukeScreen .banzukePanelBox {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 14px;
  box-sizing: border-box;
  border: 1px solid rgba(201, 160, 70, 0.8);
  border-radius: 10px;
  background: #efe6d2;
  color: var(--washi-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

#banzukeScreen .banzukePanelBox h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
}

#banzukeScreen .banzukePanelGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

#banzukeScreen .banzukeAbilityGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 8px;
  border: 1px dashed #a8823f;
  border-radius: 6px;
}

#banzukeScreen .banzukePanelBox button[aria-pressed="true"] {
  background: #3a2a14;
  color: #f0d488;
  border-color: #3a2a14;
}

#banzukeScreen .banzukePanelBox .banzukePanelWide {
  display: block;
  width: 100%;
  margin-top: 8px;
}

#banzukeScreen .banzukePanelBox .banzukePanelClose {
  background: rgba(0, 0, 0, 0.72);
  color: #f0d488;
}

#banzukeFilterBody .banzukeFilterNote {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
}

#banzukeFilterBody .banzukeRangeRow {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 10px;
}

#banzukeFilterBody .banzukeRangeField {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  font-weight: bold;
}

#banzukeFilterBody .banzukeRangeInput {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* 16px以上にして、スマホで入力欄を押したときに画面が拡大されないようにする */
#banzukeFilterBody input[type="number"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 4px 8px;
  box-sizing: border-box;
  border: 1px solid #a8823f;
  border-radius: 6px;
  background: #fffdf7;
  color: var(--washi-ink);
  font-size: 18px;
}

#banzukeFilterBody .banzukeRangeTilde {
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

#banzukeFilterBody .banzukeIchimon {
  margin: 10px 0 0;
  padding: 6px 8px 8px;
  border: 1px solid #a8823f;
  border-radius: 6px;
}

#banzukeFilterBody .banzukeIchimon legend {
  padding: 0 4px;
  font-weight: 900;
}

#banzukeScreen #banzukeFilterBody .banzukeIchimonToggle {
  width: 100%;
  margin-bottom: 6px;
  font-size: 14px;
}

#banzukeFilterBody .banzukeCheckGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

#banzukeFilterBody .banzukeTalentGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#banzukeFilterBody .banzukeCheck {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 2px 6px;
  box-sizing: border-box;
  border: 1px solid rgba(168, 130, 63, 0.6);
  border-radius: 6px;
  background: rgba(255, 251, 242, 0.85);
  font-size: 15px;
  cursor: pointer;
}

#banzukeFilterBody .banzukeCheck input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
}

#banzukeFilterBody .banzukeCheck span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-weight: bold;
  overflow-wrap: anywhere;
}

#banzukeFilterBody .banzukeCheck small {
  color: var(--washi-ink-soft);
  font-size: 11px;
  font-weight: normal;
}

#banzukeFilterBody .banzukeCheck .banzukeTalentRank {
  width: 28px;
  height: 22px;
}

#banzukeFilterError {
  margin: 8px 0 0;
  padding: 8px;
  border: 1px solid #b3141a;
  border-radius: 6px;
  background: #fff0f0;
  color: #9a0f14;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}

@media (max-width: 360px) {
  #banzukeToolbar .banzukeToolbarButtons button {
    font-size: 13px;
    padding: 4px 4px;
  }

  #banzukeContent .banzukeSortRow {
    grid-template-columns: minmax(0, 7.2em) minmax(0, 1fr) minmax(0, auto);
    padding: 6px;
  }

  #banzukeContent .banzukeSortRank {
    font-size: 12px;
  }

  #banzukeContent .banzukeSortName {
    font-size: 16px;
  }
}