:root {
  --bg: #f4f7f5;
  --surface: #fff;
  --ink: #17211f;
  --muted: #66736e;
  --line: #d9e1dc;
  --accent: #0f766e;
  --accent-strong: #0b5c56;
  --soft: #e7f4f1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); margin: 0; }
button, input, select { font: inherit; }

.shell { min-height: 100vh; padding: 24px; }
.login-view { display: grid; min-height: calc(100vh - 48px); place-items: center; }
.login-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(24, 33, 31, .09);
  display: grid;
  gap: 14px;
  padding: 26px;
  width: min(420px, 100%);
}
.login-panel h1, .login-panel p { margin: 0; }
.login-panel p, label, .topbar p { color: var(--muted); font-size: 12px; }
label { display: grid; gap: 6px; }
input, select {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}
button {
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-weight: 800;
  min-height: 42px;
  padding: 0 16px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
button:hover { background: var(--accent-strong); }
button:disabled { cursor: wait; opacity: .65; }
.message { color: #b91c1c; font-size: 13px; min-height: 20px; }

.topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.topbar h1 { font-size: 28px; margin: 0; }
.topbar p { margin: 0 0 4px; }
.topbar button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.user-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}
#userBadge {
  background: var(--soft);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  padding: 16px;
}
.mypage-section .filters {
  background: #fbfcfb;
  margin-bottom: 12px;
  padding: 12px;
}
.filters button { align-self: end; }

.rank-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.mypage-panel {
  overflow: visible;
}
.mypage-view[hidden],
.mypage-menu-shell[hidden],
.mypage-menu-drawer[hidden] {
  display: none !important;
}
.mypage-menu-shell {
  margin-left: auto;
  position: relative;
  z-index: 40;
}
.mypage-menu-button {
  align-items: center;
  background: #183a37 !important;
  border: 0 !important;
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  height: 42px;
  justify-content: center;
  padding: 0;
  width: 42px;
}
.mypage-menu-button span {
  background: #fff;
  border-radius: 999px;
  display: block;
  height: 2px;
  width: 18px;
}
.mypage-menu-drawer {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(24, 33, 31, .16);
  display: grid;
  gap: 6px;
  min-width: 220px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
}
.mypage-menu-drawer button {
  background: #fbfcfb !important;
  border: 1px solid var(--line) !important;
  border-radius: 7px;
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 800;
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 12px;
  text-align: left;
}
.mypage-menu-drawer button.is-active {
  background: #183a37 !important;
  border-color: #183a37 !important;
  color: #fff !important;
}
.mypage-section {
  border-bottom: 1px solid var(--line);
  padding: 16px;
}
.mypage-section:last-child {
  border-bottom: 0;
}
.subsection-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.subsection-head h3 {
  font-size: 15px;
  margin: 0;
}
.compact-head {
  margin-top: 4px;
}
.myhall-rank-grid {
  padding: 16px;
}
.myhall-rank-grid .mypage-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.mypage-custom-view h4 {
  font-size: 14px;
  margin: 0 0 10px;
}
.mypage-card-grid,
.mypage-split-grid,
.mypage-board-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}
.mypage-board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mypage-mini-card,
.mypage-board-card,
.mypage-state-box,
.mypage-list-item {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.mypage-mini-card span,
.mypage-board-card > span,
.mypage-list-item span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.mypage-mini-card strong,
.mypage-board-card strong,
.mypage-list-item strong {
  color: var(--accent-strong);
  display: block;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.mypage-mini-card p,
.mypage-board-card p,
.mypage-list-item p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 6px 0 0;
}
.mypage-board-card.caution strong {
  color: #b45309;
}
.mypage-list {
  display: grid;
  gap: 8px;
}

.analysis-section {
  display: grid;
  gap: 12px;
}

.analysis-overview {
  display: grid;
  gap: 8px;
}

.analysis-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analysis-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.analysis-card-wide {
  grid-column: 1 / -1;
}

.analysis-card h4 {
  font-size: 13px;
  margin: 0 0 8px;
}

.analysis-list {
  display: grid;
  gap: 8px;
}

.analysis-rank-item {
  align-items: center;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 8px;
}

.analysis-rank-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.analysis-rank-item > strong {
  color: var(--accent-strong);
  font-size: 13px;
  white-space: nowrap;
}

.analysis-pie {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
}

.analysis-pie-ring {
  align-items: center;
  aspect-ratio: 1;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), #e7eeee 0);
  border-radius: 50%;
  display: grid;
  justify-items: center;
  position: relative;
  width: 44px;
}

.analysis-pie-ring::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 30px;
  position: absolute;
  width: 30px;
}

.analysis-pie-ring span {
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.analysis-pie strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.analysis-pie p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  margin: 2px 0 0;
}

@media (max-width: 520px) {
  .analysis-grid {
    grid-template-columns: 1fr;
  }
}
.mypage-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mypage-form label {
  min-width: 0;
}
.mypage-form-wide {
  grid-column: 1 / -1;
}
.mypage-form button[type="submit"] {
  align-self: end;
}
.mypage-state-box {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 12px;
}
.realtime-setting-form {
  align-items: end;
  margin-top: 12px;
}
.realtime-setting-result {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.realtime-result-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.realtime-result-main strong {
  color: #0f766e;
  font-size: 24px;
}
.realtime-reason-card,
.realtime-setting-meter {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.realtime-reason-card span,
.realtime-setting-meter > span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}
.realtime-reason-card p {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
  margin: 0;
}
.realtime-setting-meter {
  display: grid;
  gap: 9px;
}
.realtime-setting-meter-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 52px minmax(0, 1fr);
}
.realtime-setting-meter-row span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}
.realtime-setting-meter-row div {
  background: #e8f1ee;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.realtime-setting-meter-row i {
  background: linear-gradient(90deg, #10b981, #0f766e);
  border-radius: 999px;
  display: block;
  height: 100%;
}
.activity-area-current-card {
  background: linear-gradient(180deg, #ffffff, #f7fbfa);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  padding: 12px;
}
.activity-area-current-card.is-empty {
  background: #fbfcfb;
}
.activity-area-current-card.is-empty p {
  color: var(--muted);
  margin: 8px 0 0;
}
.activity-area-current-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.activity-area-current-head span,
.activity-area-current-grid span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px;
}
.activity-area-current-head strong {
  color: var(--accent-strong);
  display: block;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.activity-area-current-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity-area-current-grid div {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-width: 0;
  padding: 9px;
}
.activity-area-current-grid strong {
  color: var(--ink);
  display: block;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.danger-action-button {
  background: #fff0ee !important;
  border: 1px solid #ffd2ca !important;
  color: #a52012 !important;
  flex: 0 0 auto;
}
.primary-action-button {
  background: #148779 !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 900;
}
.activity-area-topbar {
  align-items: flex-start;
}
.activity-area-topbar > div,
.current-location-topbar > div {
  min-width: 0;
}
.current-location-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
}
.current-location-privacy {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0 0 12px;
  padding: 10px;
}
.activity-area-modal[hidden] {
  display: none !important;
}
.activity-area-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
  position: fixed;
  z-index: 10030;
}
.activity-area-modal-backdrop {
  background: rgba(14, 25, 23, .58);
  inset: 0;
  position: absolute;
}
.activity-area-modal-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(14, 25, 23, .28);
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-width: 560px;
  overflow: auto;
  position: relative;
  width: min(560px, calc(100vw - 20px));
}
.activity-area-modal-head {
  align-items: center;
  background: #fbfcfb;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}
.activity-area-modal-head span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
}
.activity-area-modal-head h3 {
  font-size: 17px;
  margin: 2px 0 0;
}
.activity-area-modal-close {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  font-size: 22px;
  height: 36px;
  line-height: 1;
  min-height: 36px;
  padding: 0 !important;
  width: 36px;
}
.activity-area-form {
  padding: 12px;
}
.activity-area-modal-actions {
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
}
.activity-area-modal-actions button {
  flex: 1 1 0;
}
.nearby-ranking-section {
  margin-top: 16px;
}
.nearby-ranking-window {
  margin-top: 8px;
}
.nearby-ranking-list {
  display: grid;
  gap: 8px;
}
.nearby-ranking-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin: 0;
}
.nearby-ranking-card {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.nearby-ranking-card span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.nearby-ranking-card strong {
  color: var(--accent-strong);
  display: block;
  font-size: 16px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.nearby-ranking-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 6px 0 0;
}
body.activity-area-modal-open {
  overflow: hidden;
}
.mypage-myhall-summary {
  margin: 0 0 12px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(24, 33, 31, .07);
  margin-bottom: 18px;
  overflow: hidden;
}
.panel-head {
  align-items: center;
  background: #fbfcfb;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}
.panel-head h2 { font-size: 16px; margin: 0; }
.panel-head span { color: var(--muted); font-size: 12px; font-weight: 700; }
.panel-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.panel-meta span {
  background: var(--soft);
  border-radius: 999px;
  color: var(--accent-strong);
  padding: 6px 9px;
}

.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.ranking-window {
  max-height: 315px;
  overflow-x: auto;
  overflow-y: auto;
}
.filtered-window {
  max-height: 380px;
}
table {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 760px;
  width: 100%;
}
th, td {
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.35;
  min-height: 54px;
  overflow-wrap: anywhere;
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
}
th {
  background: #fbfcfb;
  color: var(--muted);
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 2;
}
th:nth-child(1), td:nth-child(1) { width: 12%; }
th:nth-child(2), td:nth-child(2) { width: 13%; }
th:nth-child(3), td:nth-child(3) { width: 16%; }
th:nth-child(4), td:nth-child(4) { width: 19%; }
th:nth-child(5), td:nth-child(5) { width: 28%; }
th:nth-child(6), td:nth-child(6) { width: 12%; }
.rank {
  background: #183a37;
  border-radius: 999px;
  color: #fff;
  display: inline-grid;
  font-size: 12px;
  font-weight: 800;
  height: 28px;
  place-items: center;
  width: 28px;
}
.score { color: var(--accent-strong); font-weight: 900; }
.ranking-window td:first-child,
.ranking-window th:first-child {
  text-align: center;
}
.wide-ranking td:nth-child(3),
.wide-ranking th:nth-child(3),
.filtered-window td:nth-child(3),
.filtered-window th:nth-child(3) {
  text-align: center;
}
.score-trend {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 2px;
  margin-left: 6px;
  white-space: nowrap;
}
.score-up { color: #266fc5; }
.score-same { color: #138553; }
.score-down { color: #cc4037; }
.setting-sort-controls {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.setting-sort-controls button {
  background: transparent;
  border: 0;
  color: #83938e;
  font-size: 10px;
  font-weight: 800;
  height: 18px;
  line-height: 18px;
  min-height: 18px;
  padding: 0 2px;
}
.setting-sort-controls button.active {
  color: var(--accent-strong);
}
.hall-reason-mobile {
  display: none;
}
.reason { line-height: 1.55; min-width: 360px; }
.table-no { font-weight: 800; }
.empty { color: var(--muted); text-align: center; }
.selectable-row { cursor: pointer; }
.selectable-row:hover td { background: #f0faf7; }
.row-hint {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 800;
  margin-top: 6px;
}

.strategy-box {
  display: grid;
  gap: 16px;
  padding: 16px;
}
.strategy-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.strategy-grid div,
.strategy-section {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.strategy-grid span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.strategy-grid strong {
  color: var(--ink);
  font-size: 16px;
}
.strategy-section h3 {
  font-size: 14px;
  margin: 0 0 8px;
}
.strategy-section p {
  color: var(--ink);
  line-height: 1.75;
  margin: 0;
}
.strategy-time-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.strategy-time-grid div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.strategy-time-grid h4 {
  font-size: 13px;
  margin: 0 0 8px;
}
.graph-compare-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.graph-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}
.graph-card h3 {
  margin-bottom: 10px;
}
.graph-image-frame {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 220px;
  overflow: auto;
  padding: 8px;
  position: relative;
}
.graph-image-frame img {
  display: block;
  height: auto;
  max-width: 100%;
}
.graph-image-frame::after {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 999px #fff;
  color: #8a9a95;
  content: "";
  display: flex;
  height: min(78%, 190px);
  justify-content: center;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 8px);
  transform: translate(-50%, -50%);
  width: min(64%, 330px);
  z-index: 2;
}
.graph-section img {
  background: #fff;
  display: block;
  height: auto;
  max-height: 420px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}
.previous-empty-graph-svg {
  background: #fff;
  display: block;
  height: auto;
  max-width: 100%;
  width: 200px;
}
.forecast-graph-card {
  display: flex;
  flex-direction: column;
}
.forecast-graph-svg {
  background: #fff;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 200px;
}
.forecast-summary {
  color: var(--text);
  font-size: 12px;
  line-height: 1.7;
  margin: 6px 0 0;
  text-align: center;
}
.event-bb { color: #c83f36; font-weight: 700; }
.event-rb { color: #2268ad; font-weight: 700; }
.forecast-events {
  border-top: 1px solid var(--line);
  font-size: 12px;
  margin-top: 8px;
  padding-top: 8px;
}
.forecast-events summary {
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}
.forecast-events p {
  line-height: 1.8;
  margin: 8px 0 0;
}
@media (max-width: 700px) {
  .compact-ranking td,
  .compact-ranking th {
    padding-left: 4px;
    padding-right: 4px;
  }
  .compact-ranking .rank {
    margin: 0 auto;
  }
  .compact-ranking .score {
    white-space: nowrap;
  }
  .score-trend {
    display: block;
    line-height: 1.15;
    margin-left: 0;
    margin-top: 3px;
  }
  .hall-reason-mobile {
    color: var(--ink);
    display: block;
    font-size: 11px;
    margin-top: 5px;
  }
  .hall-reason-mobile summary {
    color: var(--accent-strong);
    cursor: pointer;
    font-weight: 800;
  }
  .hall-reason-mobile p {
    line-height: 1.55;
    margin: 6px 0 0;
  }
}
@media (max-width: 860px) {
  .graph-compare-grid {
    grid-template-columns: 1fr;
  }
}
.muted-text { color: var(--muted) !important; }
.myhall-search {
  display: grid;
  gap: 10px;
}
.myhall-results {
  display: grid;
  gap: 8px;
}
.myhall-result {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
}
.myhall-confirm {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  padding: 10px;
}
.myhall-confirm span {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  margin-right: auto;
}
.confirm-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  white-space: nowrap;
}
.confirm-actions .small-action-button {
  background: #fff;
  border: 1px solid var(--line);
}
.confirm-actions .confirm-yes {
  color: #16a34a;
}
.confirm-actions .confirm-no {
  color: #dc2626;
}
.myhall-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.myhall-chip {
  background: #183a37;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 0;
  padding: 7px 10px;
}
.myhall-chip:hover {
  background: #0f766e;
}
.small-action-button {
  min-height: 34px;
  padding: 0 12px;
}

@media (max-width: 1100px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mypage-board-grid { grid-template-columns: 1fr; }
  .strategy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strategy-time-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .filters,
  .strategy-grid { grid-template-columns: 1fr; }
  .shell { padding: 14px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .mypage-menu-shell { margin-left: 0; width: 100%; }
  .mypage-menu-button { margin-left: auto; }
  .mypage-menu-drawer {
    max-width: calc(100vw - 32px);
    min-width: min(220px, calc(100vw - 32px));
    right: 0;
  }
  .mypage-card-grid,
  .mypage-split-grid,
  .realtime-result-grid,
  .mypage-form { grid-template-columns: 1fr; }
  .activity-area-current-grid { grid-template-columns: 1fr; }
  .activity-area-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .current-location-topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .current-location-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .activity-area-topbar .primary-action-button {
    width: 100%;
  }
  .activity-area-modal {
    align-items: flex-start;
  }
  .activity-area-modal-actions {
    flex-direction: column;
  }
  .mypage-form button[type="submit"] { width: 100%; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .panel-meta { justify-content: flex-start; }
}

/* ===== Profit Calendar / 収支計算 ===== */
.secondary-action-button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}

.profit-toolbar {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.profit-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  padding: 16px;
}

.profit-weekdays,
.profit-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.profit-weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 8px;
  text-align: center;
}

.profit-calendar {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.profit-day {
  background: #fbfcfb;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 8px;
  text-align: left;
}

.profit-day:hover {
  background: #f0faf7;
}

.profit-day.empty {
  background: #f5f7f6;
  cursor: default;
}

.profit-day strong {
  font-size: 14px;
}

.profit-day span {
  font-size: 12px;
  font-weight: 900;
}

.profit-day.plus span,
.profit-plus {
  color: #0f766e;
}

.profit-day.minus span,
.profit-minus {
  color: #b91c1c;
}

.profit-day.selected {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  background: var(--soft);
}

.profit-plus-badge,
.profit-minus-badge {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.profit-plus-badge {
  background: var(--soft);
  color: var(--accent-strong);
}

.profit-minus-badge {
  background: #fee2e2;
  color: #991b1b;
}

.profit-editor {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 14px;
  padding: 16px;
  align-self: start;
}

.profit-editor h3 {
  margin: 0;
  font-size: 18px;
}

.profit-day-result {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.profit-day-result span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.profit-day-result strong {
  font-size: 22px;
}

@media (max-width: 900px) {
  .profit-layout {
    grid-template-columns: 1fr;
  }

  .profit-day {
    min-height: 70px;
  }
}

/* Phase 6S: topbar profit button */
.user-actions .secondary-action-button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}

/* ===== Phase 6X: Responsive Web App Layout ===== */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.shell {
  width: 100%;
  max-width: 100%;
}

.app-view,
.login-view,
.panel,
.filters,
.rank-grid,
.strategy-box {
  max-width: 100%;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

.filters {
  width: 100%;
}

.filters label,
.filters button {
  min-width: 0;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.ranking-window {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

table {
  min-width: 760px;
  width: 100%;
}

td,
th {
  word-break: break-word;
}

.reason {
  white-space: normal;
}

.user-actions {
  flex-wrap: wrap;
}

@media (max-width: 1200px) {
  .shell {
    padding: 18px;
  }

  .topbar h1 {
    font-size: 34px;
  }

  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  table {
    min-width: 760px;
  }
}

@media (max-width: 768px) {
  .shell {
    padding: 12px;
  }

  .topbar {
    gap: 10px;
  }

  .topbar h1 {
    font-size: 30px;
    line-height: 1.15;
  }

  .user-actions {
    width: 100%;
  }

  .user-actions button,
  .user-actions span {
    flex: 1 1 auto;
    text-align: center;
  }

  .filters {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .filters button {
    width: 100%;
  }

  .panel-head {
    gap: 10px;
    padding: 12px;
  }

  .panel-head h2 {
    font-size: 18px;
  }

  .panel-meta {
    width: 100%;
  }

  .panel-meta span {
    font-size: 12px;
    max-width: 100%;
  }

  .ranking-window {
    max-height: 290px;
  }

  table {
    min-width: 720px;
  }

  th,
  td {
    font-size: 11px;
    padding: 8px 6px;
  }

  .reason {
    min-width: 260px;
  }

  .strategy-grid {
    grid-template-columns: 1fr;
  }

  .strategy-box {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .shell {
    padding: 10px;
  }

  .login-panel {
    padding: 18px;
  }

  .topbar h1 {
    font-size: 26px;
  }

  button {
    min-height: 40px;
    padding: 0 12px;
  }

  input,
  select {
    min-height: 38px;
  }

  .panel {
    border-radius: 8px;
  }

  .panel-head h2 {
    font-size: 16px;
  }

  .ranking-window {
    max-height: 260px;
  }

  table {
    min-width: 680px;
  }

  th,
  td {
    font-size: 10px;
    padding: 7px 4px;
  }

  .rank {
    height: 22px;
    width: 22px;
    font-size: 10px;
  }

  .score {
    font-size: 11px;
  }

  .reason {
    min-width: 220px;
  }

  .row-hint {
    font-size: 9px;
  }
}

/* PREVIOUS_GRAPH_LONGPRESS_PROTECT_CSS_START */
/*
  前日グラフ画像の閲覧専用化。
  目的:
  - iPhone/Safari等で長押しした時に画像単体プレビューや保存メニューを出にくくする
  - グラフ画像そのものを選択・ドラッグ対象にしない
  - 見た目、取得処理、分析処理、保存処理は変更しない
*/
.graph-card.previous-graph-protected,
.graph-card.previous-graph-protected *,
.graph-image-frame.previous-graph-protected,
.graph-image-frame.previous-graph-protected * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* 前日グラフの画像本体はタッチ対象にしない */
.graph-card.previous-graph-protected img,
.graph-image-frame.previous-graph-protected img,
img.previous-graph-protected {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/*
  透明保護レイヤー。
  白い紙/穴あきマスクの上からさらに透明な板を置き、
  長押しイベントを画像本体へ届かせない。
*/
.graph-image-frame.previous-graph-protected {
  position: relative !important;
}

.graph-image-frame.previous-graph-protected::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
  background: transparent !important;
  pointer-events: auto !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
}
/* PREVIOUS_GRAPH_LONGPRESS_PROTECT_CSS_END */

/* LOW_GAMES_GRAPH_PLACEHOLDER_START */
.low-games-graph-placeholder {
  width: 100%;
  min-height: 180px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.low-games-graph-placeholder-main {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.low-games-graph-placeholder-sub,
.low-games-graph-placeholder-table {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.78;
  line-height: 1.4;
}
/* LOW_GAMES_GRAPH_PLACEHOLDER_END */

/* DEDAMA_DATA_ABOVE_PREVIOUS_GRAPH_START */
.dedama-data-card {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7faf8;
}

.dedama-data-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.dedama-data-card-head span {
  font-size: 12px;
  opacity: 0.74;
}

.dedama-data-card-head strong {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent-strong);
}

.dedama-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dedama-data-grid div {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dedama-data-grid span {
  display: block;
  font-size: 11px;
  opacity: 0.68;
  margin-bottom: 3px;
}

.dedama-data-grid strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.ui-tag {
  align-items: center;
  background: var(--soft);
  border: 1px solid #c5e6df;
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 30px;
  padding: 4px 10px;
  white-space: nowrap;
}

.history-section {
  overflow: hidden;
}

.history-section-head {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.history-section-head h3 {
  margin-bottom: 4px;
}

.history-section-head p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.history-scroll {
  display: flex;
  gap: 12px;
  margin: 0 -12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 12px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.history-day-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  flex: 0 0 min(70vw, 232px);
  gap: 7px;
  min-height: 0;
  padding: 10px;
  scroll-snap-align: start;
}

.history-day-card.is-empty {
  background: #f8faf9;
  color: var(--muted);
}

.history-day-head {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.history-day-head span {
  background: #eef6f3;
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  white-space: nowrap;
}

.history-day-head strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.history-machine-line {
  display: grid;
  gap: 2px;
}

.history-machine-line span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

.history-machine-line strong {
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.25;
}

.history-metric-grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.history-metric-grid div,
.history-payout {
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 6px;
}

.history-metric-grid span,
.history-payout span {
  color: var(--muted);
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  margin-bottom: 2px;
}

.history-metric-grid strong,
.history-payout strong {
  color: var(--ink);
  display: block;
  font-size: 11.5px;
  line-height: 1.25;
}

.history-graph-frame {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  margin-top: auto;
  min-height: 0;
  height: 152px;
  overflow: hidden;
  padding: 5px;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.history-graph-frame img {
  display: block;
  height: auto;
  max-height: 148px;
  max-width: 100%;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.history-graph-frame.previous-graph-protected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76%, 154px);
  height: min(74%, 136px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(217, 225, 220, .85);
  box-shadow: 0 0 0 999px #fff;
  z-index: 2;
  pointer-events: none;
}

.history-graph-frame.previous-graph-protected::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-x pan-y;
}

.history-graph-frame.is-empty,
.history-empty {
  align-items: center;
  background: #eef2f0;
  border: 1px dashed #cfd8d3;
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  min-height: 160px;
  text-align: center;
}

.history-missing {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (min-width: 960px) {
  .history-day-card {
    flex-basis: 232px;
  }
}

@media (max-width: 640px) {
  .history-section-head {
    flex-direction: column;
  }

  .history-day-card {
    flex-basis: 70vw;
  }

  .history-metric-grid strong,
  .history-payout strong {
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .dedama-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* DEDAMA_DATA_ABOVE_PREVIOUS_GRAPH_END */




/* APP_ONLY_BOTTOM_FIXED_NAV_START */
/*
  ログイン後画面専用の下固定ナビ。
  実際のボタン入れ物 .topbar .user-actions を対象にする。
  取得処理・AI分析・保存データには影響しない。
*/

/* 下固定ボタンで本文が隠れないよう、アプリ画面だけ下余白を作る */
#appView:not([hidden]) {
  padding-bottom: 78px !important;
}

/* 実際のボタン入れ物を、画面下に一列固定する */
#appView:not([hidden]) .topbar .user-actions {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;

  width: calc(100vw - 18px) !important;
  max-width: 760px !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 7px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(9, 14, 24, 0.90) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.32) !important;
}

/* ユーザー表示は小さくする */
#appView:not([hidden]) .topbar .user-actions #userBadge {
  max-width: 92px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  opacity: 0.75 !important;
}

/* 下固定バー内のボタンを小さめに統一する */
#appView:not([hidden]) .topbar .user-actions button,
#appView:not([hidden]) .topbar .user-actions a,
#appView:not([hidden]) #mypageWindowButton,
#appView:not([hidden]) #profitWindowButton,
#appView:not([hidden]) #masterRoomTopButton,
#appView:not([hidden]) #logoutButton {
  position: static !important;
  transform: none !important;

  min-width: 0 !important;
  width: auto !important;
  height: 33px !important;

  padding: 0 9px !important;
  border-radius: 999px !important;

  font-size: 10.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* スマホではさらに詰める */
@media (max-width: 640px) {
  #appView:not([hidden]) {
    padding-bottom: 70px !important;
  }

  #appView:not([hidden]) .topbar .user-actions {
    bottom: 0 !important;
    width: calc(100vw - 10px) !important;
    gap: 4px !important;
    padding: 6px !important;
    justify-content: stretch !important;
  }

  #appView:not([hidden]) .topbar .user-actions #userBadge {
    display: none !important;
  }

  #appView:not([hidden]) .topbar .user-actions button,
  #appView:not([hidden]) .topbar .user-actions a,
  #appView:not([hidden]) #mypageWindowButton,
  #appView:not([hidden]) #profitWindowButton,
  #appView:not([hidden]) #masterRoomTopButton,
  #appView:not([hidden]) #logoutButton {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 7px 6px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    text-align: center !important;
  }
}

@media (min-width: 641px) {
  #appView:not([hidden]) {
    padding-bottom: 0 !important;
  }

  #appView:not([hidden]) .topbar .user-actions {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #appView:not([hidden]) .topbar .user-actions #userBadge {
    max-width: none !important;
    font-size: 12px !important;
    opacity: 1 !important;
  }

  #appView:not([hidden]) .topbar .user-actions button,
  #appView:not([hidden]) .topbar .user-actions a,
  #appView:not([hidden]) #mypageWindowButton,
  #appView:not([hidden]) #profitWindowButton,
  #appView:not([hidden]) #masterRoomTopButton,
  #appView:not([hidden]) #logoutButton {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
}
/* APP_ONLY_BOTTOM_FIXED_NAV_END */

/* APP_BOTTOM_NAV_EQUAL_WIDTH_FINAL_START */
@media (max-width: 640px) {
  #appView:not([hidden]) .topbar .user-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    bottom: 0 !important;
    width: calc(100vw - 10px) !important;
    gap: 4px !important;
    padding: 6px !important;
  }

  #appView:not([hidden]) .topbar .user-actions #userBadge {
    display: none !important;
  }

  #appView:not([hidden]) .topbar .user-actions button,
  #appView:not([hidden]) .topbar .user-actions a,
  #appView:not([hidden]) #mypageWindowButton,
  #appView:not([hidden]) #profitWindowButton,
  #appView:not([hidden]) #masterRoomTopButton,
  #appView:not([hidden]) #logoutButton {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 7px 6px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}
/* APP_BOTTOM_NAV_EQUAL_WIDTH_FINAL_END */

/* SLOTSCOPE_UI_V2_START */
:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --surface-2: #f9fbfa;
  --ink: #101917;
  --muted: #5f6f6b;
  --line: #d7e2dd;
  --accent: #148779;
  --accent-strong: #0d5f57;
  --soft: #e8f5f2;
  --blue-soft: #eef5ff;
  --blue-ink: #205b9f;
  --warn-soft: #fff6dc;
  --danger-soft: #fff0f0;
  --shadow-soft: 0 12px 34px rgba(20, 36, 32, .08);
}

body {
  background:
    linear-gradient(180deg, #f7faf8 0, #eef4f1 100%) !important;
  color: var(--ink) !important;
  font-size: 15px;
}

.shell {
  margin: 0 auto !important;
  max-width: 1180px !important;
  padding: 22px clamp(12px, 2.4vw, 28px) 96px !important;
}

#appView:not([hidden]) {
  display: grid;
  gap: 14px;
}

.topbar {
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0 0 12px !important;
}

.topbar h1 {
  color: #101917 !important;
  font-size: clamp(30px, 5vw, 42px) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}

.topbar p {
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

button,
.secondary-action-button,
.small-action-button,
.myhall-chip,
.master-room-nav-btn {
  border-radius: 8px !important;
  min-height: 42px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

button:active,
.secondary-action-button:active,
.master-room-nav-btn:active {
  transform: translateY(1px);
}

input,
select {
  border-radius: 8px !important;
  min-height: 44px !important;
}

.panel,
.filters,
.strategy-grid div,
.strategy-section,
.strategy-time-grid div,
.graph-card,
.dedama-data-card,
.history-day-card,
.myhall-confirm,
.myhall-rank-grid .mypage-section {
  border-color: var(--line) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-soft) !important;
}

.panel {
  background: rgba(255, 255, 255, .94) !important;
  margin-bottom: 14px !important;
}

.panel-head {
  background: linear-gradient(180deg, #ffffff 0, #f8fbfa 100%) !important;
  gap: 10px !important;
  padding: 16px 18px !important;
}

.panel-head h2 {
  color: #101917 !important;
  font-size: clamp(20px, 4.3vw, 28px) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

.panel-meta span,
.ui-tag,
#userBadge {
  background: var(--soft) !important;
  border: 1px solid #d2ebe5 !important;
  border-radius: 999px !important;
  color: var(--accent-strong) !important;
  font-weight: 900 !important;
}

.filters {
  align-items: end !important;
  background: rgba(255, 255, 255, .94) !important;
  gap: 10px !important;
  padding: 14px !important;
}

.filters label {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.ranking-window {
  background: #fff !important;
  max-height: 360px !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  background: #f4f8f6 !important;
  color: #687874 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

td {
  background: #fff !important;
  color: #14211e !important;
}

tbody tr:nth-child(even) td {
  background: #fbfdfc !important;
}

.selectable-row:hover td {
  background: #eef8f5 !important;
}

.rank {
  background: #17221f !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.12);
}

.score {
  color: var(--accent-strong) !important;
  font-size: 13px !important;
}

.strategy-box {
  gap: 14px !important;
  padding: 14px !important;
}

.strategy-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.strategy-grid div {
  background: #fff !important;
  padding: 12px !important;
}

.strategy-grid span,
.dedama-data-grid span,
.history-metric-grid span,
.history-payout span {
  color: var(--muted) !important;
  font-weight: 900 !important;
}

.strategy-grid strong {
  color: #101917 !important;
  font-size: clamp(15px, 3.4vw, 20px) !important;
  font-weight: 950 !important;
}

.strategy-section {
  background: #fff !important;
  padding: 14px !important;
}

.strategy-section h3 {
  color: #101917 !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

.strategy-time-grid {
  gap: 10px !important;
}

.dedama-data-card {
  background: #fff !important;
  margin: 8px 0 12px !important;
  padding: 10px !important;
}

.dedama-data-grid {
  gap: 6px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.dedama-data-grid div {
  background: #f8fbfa !important;
  border-radius: 8px !important;
  padding: 7px !important;
}

.dedama-data-grid strong {
  font-size: 12px !important;
}

.graph-image-frame,
.history-graph-frame {
  border-radius: 8px !important;
  background: #fff !important;
}

.history-section {
  background: #fff !important;
}

.history-section-head {
  margin-bottom: 8px !important;
}

.history-scroll {
  gap: 8px !important;
  margin: 0 -8px !important;
  padding: 2px 8px 10px !important;
  scroll-snap-type: x mandatory !important;
}

.history-day-card {
  flex-basis: min(58vw, 190px) !important;
  gap: 6px !important;
  padding: 8px !important;
  box-shadow: none !important;
}

.history-day-head span {
  font-size: 10px !important;
  padding: 3px 7px !important;
}

.history-day-head strong,
.history-machine-line strong {
  font-size: 11px !important;
}

.history-machine-line span {
  font-size: 10px !important;
}

.history-metric-grid {
  gap: 4px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.history-metric-grid div,
.history-payout {
  border-radius: 8px !important;
  padding: 5px !important;
}

.history-metric-grid strong,
.history-payout strong {
  font-size: 10.5px !important;
}

.history-graph-frame {
  height: 126px !important;
  padding: 4px !important;
}

.history-graph-frame img {
  max-height: 122px !important;
}

.history-empty,
.history-graph-frame.is-empty {
  min-height: 126px !important;
}

#appView:not([hidden]) .topbar .user-actions {
  background: rgba(18, 26, 31, .94) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}

#appView:not([hidden]) .topbar .user-actions button,
#appView:not([hidden]) .topbar .user-actions a,
#appView:not([hidden]) #mypageWindowButton,
#appView:not([hidden]) #profitWindowButton,
#appView:not([hidden]) #masterRoomTopButton,
#appView:not([hidden]) #logoutButton {
  background: #fff !important;
  border: 1px solid rgba(18, 32, 28, .18) !important;
  color: #111b18 !important;
}

#appView:not([hidden]) #masterRoomTopButton {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}

@media (max-width: 900px) {
  .shell {
    padding: 18px 12px 92px !important;
  }

  .topbar {
    margin-bottom: 14px !important;
  }

  .panel-head {
    align-items: flex-start !important;
  }

  .panel-meta {
    justify-content: flex-start !important;
  }

  .strategy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .strategy-time-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .shell {
    padding: 20px 10px 88px !important;
  }

  .panel {
    margin-bottom: 12px !important;
  }

  .panel-head {
    padding: 14px !important;
  }

  .panel-head h2 {
    font-size: 25px !important;
  }

  .ranking-window {
    max-height: 470px !important;
    overflow-x: hidden !important;
  }

  .table-wrap,
  .ranking-window {
    -webkit-overflow-scrolling: touch !important;
  }

  .ranking-window table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .ranking-window thead {
    display: none !important;
  }

  .ranking-window tbody,
  .ranking-window tr,
  .ranking-window td {
    display: block !important;
    width: 100% !important;
  }

  .ranking-window tr.selectable-row {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(20, 36, 32, .06) !important;
    display: grid !important;
    gap: 0 10px !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    margin: 0 0 8px !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  .ranking-window td {
    background: transparent !important;
    border-bottom: 1px solid #edf3f0 !important;
    color: #14211e !important;
    display: block !important;
    font-size: 13px !important;
    min-height: 0 !important;
    padding: 7px 0 !important;
    text-align: left !important;
  }

  .ranking-window td[data-label="ランキング"] {
    align-content: center !important;
    align-items: center !important;
    background: #f5f9f7 !important;
    border: 1px solid #e2ebe7 !important;
    border-radius: 8px !important;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    justify-items: center !important;
    min-height: 112px !important;
    padding: 8px 4px !important;
  }

  .ranking-window td:not([data-label="ランキング"]) {
    grid-column: 2 !important;
  }

  .ranking-window td .cell-value {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    word-break: normal !important;
  }

  .ranking-window td:last-child {
    border-bottom: 0 !important;
  }

  .ranking-window td::before {
    color: var(--muted) !important;
    content: attr(data-label) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
    display: block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .ranking-window td:first-child {
    display: grid !important;
  }

  .ranking-window td:first-child::before {
    content: attr(data-label) !important;
  }

  .ranking-window .rank {
    height: 30px !important;
    width: 30px !important;
  }

  .ranking-window td[data-label="ランキング"]::before {
    margin-bottom: 10px !important;
  }

  .ranking-window .score {
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  .ranking-window .score .cell-value {
    color: var(--accent-strong) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  .ranking-window .score-number {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .ranking-window .score-trend {
    display: inline-flex !important;
    margin-left: 6px !important;
  }

  .ranking-window .reason-cell {
    display: none !important;
  }

  .hall-reason-mobile {
    display: block !important;
  }

  .strategy-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .strategy-grid div:first-child {
    grid-column: 1 / -1;
  }

  .dedama-data-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dedama-data-grid span {
    font-size: 9.5px !important;
  }

  .history-day-card {
    flex-basis: 54vw !important;
  }

  .history-graph-frame {
    height: 116px !important;
  }

  .history-graph-frame img {
    max-height: 112px !important;
  }
}

@media (max-width: 390px) {
  #appView:not([hidden]) .topbar .user-actions button,
  #appView:not([hidden]) .topbar .user-actions a,
  #appView:not([hidden]) #mypageWindowButton,
  #appView:not([hidden]) #profitWindowButton,
  #appView:not([hidden]) #masterRoomTopButton,
  #appView:not([hidden]) #logoutButton {
    font-size: 11px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}
/* SLOTSCOPE_UI_V2_END */

/* SLOTSCOPE_MOBILE_UX_V3_START */
.mobile-rank-card-cell {
  display: none;
}

.detail-disclosure {
  padding: 0 !important;
}

.detail-disclosure > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  padding: 14px;
}

.detail-disclosure > summary::-webkit-details-marker {
  display: none;
}

.detail-disclosure > summary::after {
  background: var(--soft);
  border: 1px solid #d2ebe5;
  border-radius: 999px;
  color: var(--accent-strong);
  content: "▼";
  display: inline-grid;
  flex: 0 0 30px;
  font-size: 12px;
  font-weight: 950;
  height: 30px;
  place-items: center;
  transition: transform .18s ease;
  width: 30px;
}

.detail-disclosure[open] > summary::after {
  transform: rotate(180deg);
}

.detail-disclosure > summary span {
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}

.detail-disclosure > summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  margin-left: auto;
}

.detail-disclosure > p,
.detail-disclosure > .strategy-time-grid,
.detail-disclosure > .history-section-head,
.detail-disclosure > .history-scroll {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.detail-disclosure > p,
.detail-disclosure > .strategy-time-grid,
.detail-disclosure > .history-scroll {
  margin-bottom: 14px !important;
}

@media (max-width: 640px) {
  .ranking-window {
    background: transparent !important;
    max-height: 520px !important;
    padding: 0 4px 8px !important;
  }

  .ranking-window table,
  .ranking-window tbody,
  .ranking-window tr,
  .ranking-window td {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .ranking-window table {
    border-spacing: 0 !important;
  }

  .ranking-window tr.selectable-row {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  .ranking-window td.desktop-rank-cell {
    display: none !important;
  }

  .ranking-window td.mobile-rank-card-cell {
    border: 0 !important;
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .ranking-window td.mobile-rank-card-cell::before {
    display: none !important;
  }

  .rank-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(20, 36, 32, .06);
    display: grid;
    gap: 10px;
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 0;
    padding: 10px;
    width: calc(100vw - 44px) !important;
  }

  .rank-card-rank {
    align-items: center;
    background: #f3f8f6;
    border: 1px solid #e2ebe7;
    border-radius: 8px;
    display: grid;
    justify-items: center;
    padding: 8px 4px;
  }

  .rank-card-rank span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 950;
  }

  .rank-card-rank strong {
    background: #121d1a;
    border-radius: 999px;
    color: #fff;
    display: inline-grid;
    font-size: 15px;
    font-weight: 950;
    height: 34px;
    place-items: center;
    width: 34px;
  }

  .rank-card-main {
    min-width: 0;
  }

  .rank-card-kicker,
  .rank-card-hall-name {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
    margin: 0 0 4px;
  }

  .rank-card h3 {
    color: var(--ink);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.35;
    margin: 0 0 7px;
    overflow-wrap: anywhere;
  }

  .rank-card-metrics {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 7px;
  }

  .rank-card-metrics > span {
    background: var(--soft);
    border: 1px solid #d2ebe5;
    border-radius: 999px;
    color: var(--accent-strong);
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    gap: 5px;
    min-height: 28px;
    padding: 4px 9px;
  }

  .rank-card-metrics strong {
    font-size: 16px;
  }

  .rank-card-metrics .score-trend {
    background: var(--blue-soft);
    border: 1px solid #d6e6fb;
    border-radius: 999px;
    margin: 0 !important;
    min-height: 28px;
    padding: 4px 9px;
  }

  .rank-card-detail {
    border-top: 1px solid #edf3f0;
    margin-top: 4px;
    padding-top: 6px;
  }

  .rank-card-detail summary {
    color: var(--accent-strong);
    cursor: pointer;
    font-size: 13px;
    font-weight: 950;
    list-style: none;
  }

  .rank-card-detail summary::-webkit-details-marker {
    display: none;
  }

  .rank-card-detail summary::before {
    content: "▶ ";
  }

  .rank-card-detail[open] summary::before {
    content: "▼ ";
  }

  .rank-card-detail p {
    color: #2b3835;
    font-size: 12px;
    line-height: 1.65;
    margin: 7px 0 0;
  }

  .rank-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .rank-card-actions a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #17211f;
    display: inline-flex;
    font-size: 12px;
    font-weight: 950;
    min-height: 30px;
    padding: 5px 10px;
    text-decoration: none;
  }

  .strategy-grid {
    gap: 6px !important;
  }

  .strategy-grid div {
    min-height: 82px;
  }

  .detail-disclosure > summary {
    padding: 12px !important;
  }

  .detail-disclosure > summary span {
    font-size: 16px;
  }

  .detail-disclosure > summary small {
    display: none;
  }

  .detail-disclosure > p,
  .detail-disclosure > .strategy-time-grid,
  .detail-disclosure > .history-section-head,
  .detail-disclosure > .history-scroll {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .history-section-head {
    margin-top: -4px !important;
  }
}
/* SLOTSCOPE_MOBILE_UX_V3_END */

/* HALL_INFO_SECTION_START */
.hall-info-body {
  display: grid;
  gap: 12px;
  margin: 0 14px 14px;
}

.hall-info-description {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
  margin: 0;
}

.hall-link-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hall-link-grid a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #14211e;
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  justify-content: center;
  min-height: 38px;
  padding: 7px 10px;
  text-align: center;
  text-decoration: none;
}

.hall-link-grid a:first-child {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.monthly-notices {
  display: grid;
  gap: 8px;
}

.monthly-notices-head {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.monthly-notices-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.monthly-notices-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.notice-card,
.notice-empty {
  background: #f9fbfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  padding: 10px;
  text-decoration: none;
}

.notice-card span {
  background: var(--soft);
  border: 1px solid #d2ebe5;
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 11px;
  font-weight: 950;
  justify-self: start;
  padding: 3px 8px;
}

.notice-card strong,
.notice-empty strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.4;
}

.notice-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.notice-card p,
.notice-empty p {
  color: #34423f;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .hall-info-body {
    margin: 0 12px 12px;
  }

  .hall-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hall-link-grid a {
    font-size: 12px;
    min-height: 36px;
    padding: 6px 8px;
  }
}
/* HALL_INFO_SECTION_END */

/* RANKING_HORIZONTAL_SCROLL_UI_START */
.rank-card-open {
  align-items: center;
  background: linear-gradient(180deg, #0f766e, #0a5f58);
  border: 1px solid #0a5f58;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  justify-content: center;
  line-height: 1;
  margin-top: 10px;
  min-height: 38px;
  padding: 8px 13px;
  width: 100%;
}

.rank-card-open:hover {
  background: #093f3b;
}

@media (max-width: 640px) {
  :root {
    --casino-bg: #10151b;
    --casino-panel: #17202a;
    --casino-card: #fffdf7;
    --casino-gold: #d6a84f;
    --casino-red: #c63f38;
    --casino-blue: #245f9f;
  }

  body {
    background:
      linear-gradient(180deg, #f5f7f5 0%, #eef4f1 42%, #f7f8f6 100%) !important;
  }

  .panel {
    border-color: #dce5df !important;
    box-shadow: 0 14px 36px rgba(17, 31, 28, .08) !important;
  }

  .panel-head {
    background:
      linear-gradient(135deg, #17211f 0%, #173d39 72%, #755c25 100%) !important;
    color: #fff !important;
  }

  .panel-head h2,
  .panel-head span {
    color: #fff !important;
  }

  .panel-meta span {
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #f3f9f7 !important;
  }

  .ranking-window {
    background:
      linear-gradient(90deg, rgba(15,118,110,.12), transparent 24px),
      linear-gradient(270deg, rgba(15,118,110,.16), transparent 28px) !important;
    border-top: 1px solid #e3ebe7 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    padding: 12px 10px 14px !important;
    scroll-padding-inline: 12px !important;
    scroll-snap-type: x proximity !important;
    touch-action: pan-x pan-y !important;
  }

  .ranking-window::before {
    color: #6a7a75;
    content: "横にスライドしてランキングを見る";
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
    margin: 0 0 8px;
    padding-left: 2px;
  }

  .ranking-window table {
    display: block !important;
    min-width: 0 !important;
    width: max-content !important;
  }

  .ranking-window tbody {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(42vw, 166px) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 10px !important;
    min-width: max-content !important;
    width: max-content !important;
  }

  .ranking-window tr.selectable-row {
    display: block !important;
    flex: 0 0 min(42vw, 166px) !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start !important;
    width: min(42vw, 166px) !important;
  }

  .ranking-window td.mobile-rank-card-cell,
  .ranking-window td.mobile-rank-card-cell:first-child,
  .ranking-window td.mobile-rank-card-cell:nth-child(1) {
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    inline-size: min(42vw, 166px) !important;
    min-width: min(42vw, 166px) !important;
    max-width: min(42vw, 166px) !important;
    width: min(42vw, 166px) !important;
    padding: 0 !important;
  }

  .ranking-window tr.selectable-row > td.mobile-rank-card-cell {
    grid-column: 1 / -1 !important;
    inline-size: min(42vw, 166px) !important;
    min-width: min(42vw, 166px) !important;
    width: min(42vw, 166px) !important;
  }

  .rank-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,253,247,.98)) !important;
    border: 1px solid #d8c08a !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(22, 30, 28, .12) !important;
    display: grid !important;
    gap: 5px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    min-height: 158px !important;
    max-height: 176px !important;
    inline-size: min(42vw, 166px) !important;
    overflow: hidden !important;
    padding: 7px !important;
    position: relative !important;
    width: min(42vw, 166px) !important;
  }

  .rank-card::after {
    background: linear-gradient(90deg, var(--casino-gold), transparent);
    bottom: 0;
    content: "";
    height: 3px;
    left: 10px;
    opacity: .8;
    position: absolute;
    right: 10px;
  }

  .rank-card-rank {
    align-items: center !important;
    background: #17211f !important;
    border-color: #2a3a35 !important;
    color: #fff !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 3px 6px !important;
  }

  .rank-card-rank strong {
    background: linear-gradient(180deg, #d6a84f, #8a681f) !important;
    color: #10140f !important;
    font-size: 17px !important;
    height: 24px !important;
    width: 36px !important;
  }

  .rank-card-main {
    display: grid !important;
    align-content: stretch !important;
    gap: 4px !important;
    justify-items: center !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .rank-card-score {
    align-items: center !important;
    background: #edf7f4 !important;
    border: 1px solid #cbe6de !important;
    border-radius: 8px !important;
    color: #0f5f58 !important;
    display: flex !important;
    font-size: 20px !important;
    font-weight: 950 !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 30px !important;
    width: 100% !important;
  }

  .rank-card-hall-title,
  .rank-card-table {
    color: #5f706c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: 100% !important;
  }

  .rank-card-table {
    color: #17211f !important;
    font-size: 11px !important;
  }

  .rank-card h3 {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    text-align: center !important;
  }

  .rank-card-kicker,
  .rank-card-hall-name {
    display: none !important;
    font-size: 10.5px !important;
  }

  .rank-card-metrics {
    display: grid !important;
    gap: 5px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 0 !important;
  }

  .rank-card-metrics > span {
    background: #edf7f4 !important;
    border-color: #cbe6de !important;
    border-radius: 8px !important;
    display: grid !important;
    font-size: 10px !important;
    gap: 2px !important;
    justify-items: center !important;
    min-height: 30px !important;
    padding: 4px 5px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .rank-card-metrics strong {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  .rank-card-hall .rank-card-metrics {
    grid-template-columns: 1fr !important;
  }

  .rank-card-hall .rank-card-metrics > span {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
  }

  .rank-card-detail {
    display: none !important;
    max-height: 88px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .rank-card-detail summary,
  .rank-card-actions a,
  .rank-card-open {
    min-height: 26px !important;
  }

  .rank-card-open {
    align-items: center !important;
    align-self: end !important;
    font-size: 11px !important;
    height: 28px !important;
    line-height: 1 !important;
    margin-top: auto !important;
    padding: 2px 8px !important;
    width: 100% !important;
  }

  .rank-card-actions a {
    display: none !important;
    flex: 1 1 auto;
    justify-content: center;
  }

  .selectable-row {
    cursor: default !important;
  }

  .selectable-row:hover td {
    background: transparent !important;
  }

  .rank-card-detail,
  .rank-card-actions,
  .rank-card-open {
    touch-action: manipulation;
  }

  .rank-grid {
    gap: 16px !important;
  }

  .detail-panel,
  #detailPanel {
    margin-top: 18px !important;
  }
}

@media (min-width: 641px) {
  .rank-card-open {
    display: none;
  }
}
/* RANKING_HORIZONTAL_SCROLL_UI_END */

/* WEB_COLOR_REFRESH_20260602_START */
:root {
  --bg: #f6f5ef;
  --surface: #ffffff;
  --surface-2: #fbfaf6;
  --ink: #18211f;
  --muted: #64716c;
  --line: #dce4df;
  --accent: #0f766e;
  --accent-strong: #0a5f58;
  --soft: #edf7f3;
  --blue-soft: #eef6ff;
  --blue-ink: #2563a8;
  --warn-soft: #fff7df;
  --danger-soft: #fff0ee;
  --shadow-soft: 0 10px 26px rgba(31, 39, 36, .07);
}

body {
  background:
    radial-gradient(circle at top left, rgba(216, 179, 92, .14), transparent 34%),
    linear-gradient(180deg, #fbfaf6 0%, #f3f6f1 52%, #fbfaf7 100%) !important;
  color: var(--ink) !important;
}

.panel,
.filters,
.login-panel,
.strategy-section,
.strategy-grid div,
.strategy-time-grid div,
.graph-card,
.dedama-data-card,
.history-day-card,
.myhall-confirm,
.myhall-rank-grid .mypage-section {
  background: rgba(255, 255, 255, .97) !important;
  border-color: #dfe6e1 !important;
  box-shadow: 0 10px 24px rgba(31, 39, 36, .06) !important;
}

.panel-head {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf4 100%) !important;
  border-bottom-color: #e5e9e3 !important;
  color: var(--ink) !important;
}

.panel-head h2,
.panel-head span {
  color: var(--ink) !important;
}

.panel-meta span,
.ui-tag,
#userBadge {
  background: #eef7f3 !important;
  border-color: #cfe8df !important;
  color: #0a5f58 !important;
}

button,
.secondary-action-button,
.small-action-button {
  background: #0f766e !important;
  color: #ffffff !important;
}

button:hover,
.secondary-action-button:hover,
.small-action-button:hover {
  background: #0a5f58 !important;
}

.topbar button,
#appView:not([hidden]) .topbar .user-actions button,
#appView:not([hidden]) .topbar .user-actions a {
  background: #ffffff !important;
  border-color: #d7e2dd !important;
  color: #18211f !important;
}

.score,
.score-number,
.history-payout strong {
  color: #0a5f58 !important;
}

.score-up { color: #2563a8 !important; }
.score-same { color: #0f766e !important; }
.score-down,
.message,
.profit-minus-badge {
  color: #c94a3a !important;
}

.profit-plus-badge {
  color: #0f766e !important;
}

.bottom-nav,
#appView:not([hidden]) .topbar .user-actions {
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(24, 33, 31, .12) !important;
  box-shadow: 0 10px 24px rgba(31, 39, 36, .12) !important;
}

@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle at 18% 0%, rgba(211, 169, 74, .18), transparent 30%),
      linear-gradient(180deg, #fbfaf6 0%, #f2f6f2 48%, #fbfaf7 100%) !important;
  }

  .panel-head {
    background: linear-gradient(180deg, #ffffff 0%, #fbf8ee 100%) !important;
    color: var(--ink) !important;
  }

  .panel-head h2,
  .panel-head span {
    color: var(--ink) !important;
  }

  .panel-meta span {
    background: #eef7f3 !important;
    border-color: #cfe8df !important;
    color: #0a5f58 !important;
  }

  .ranking-window {
    background:
      linear-gradient(90deg, rgba(15, 118, 110, .08), transparent 24px),
      linear-gradient(270deg, rgba(200, 155, 60, .13), transparent 28px) !important;
    border-top-color: #e5e9e3 !important;
  }

  .rank-card {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%) !important;
    border-color: #e2d2a6 !important;
    box-shadow: 0 8px 18px rgba(31, 39, 36, .10) !important;
  }

  .rank-card-rank {
    background: #f7f1df !important;
    border-color: #e6d39d !important;
    color: #18211f !important;
  }

  .rank-card-rank strong {
    background: #c89b3c !important;
    color: #18211f !important;
    box-shadow: none !important;
  }

  .rank-card-score {
    background: #eef7f3 !important;
    border-color: #cfe8df !important;
    color: #0a5f58 !important;
  }

  .rank-card-open {
    background: #0f766e !important;
    border-color: #0a5f58 !important;
    color: #ffffff !important;
  }
}
/* WEB_COLOR_REFRESH_20260602_END */

/* WEB_UIUX_P1_P2_MENU_START */
#appView:not([hidden]) {
  padding-bottom: 0 !important;
}

#appView:not([hidden]) .topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: relative !important;
}

#appView:not([hidden]) .topbar .user-actions {
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 40 !important;
  width: auto !important;
  max-width: 52vw !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

#appView:not([hidden]) .topbar .user-actions #userBadge {
  display: inline-flex !important;
  max-width: 26vw !important;
  color: var(--muted) !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(24, 33, 31, .10) !important;
  border-radius: 999px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#appView:not([hidden]) .app-menu-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-grid !important;
  place-content: center !important;
  gap: 5px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 118, 110, .25) !important;
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 118, 110, .18) !important;
}

#appView:not([hidden]) .app-menu-button span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

#appView:not([hidden]) .app-menu-drawer[hidden],
#appView:not([hidden]) #profitWindowButton[hidden],
#appView:not([hidden]) #masterRoomTopButton[hidden] {
  display: none !important;
}

#appView:not([hidden]) .app-menu-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90 !important;
  display: block !important;
  background: rgba(15, 23, 42, .22) !important;
}

#appView:not([hidden]) .app-menu-panel {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: auto !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  width: min(300px, calc(100vw - 20px)) !important;
  transform: none !important;
  max-height: calc(100vh - 24px) !important;
  display: grid !important;
  gap: 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(24, 33, 31, .12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, .22) !important;
  overflow-y: auto !important;
}

#appView:not([hidden]) .app-menu-main {
  display: grid !important;
  gap: 8px !important;
}

#appView:not([hidden]) .app-menu-admin {
  display: grid !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(24, 33, 31, .12) !important;
}

#appView:not([hidden]) .topbar .user-actions .app-menu-item,
#appView:not([hidden]) .topbar .user-actions .app-menu-master,
#appView:not([hidden]) #mypageWindowButton.app-menu-item,
#appView:not([hidden]) #profitWindowButton.app-menu-item,
#appView:not([hidden]) #logoutButton.app-menu-item,
#appView:not([hidden]) #masterRoomTopButton.app-menu-master {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#appView:not([hidden]) .topbar .user-actions .app-menu-item {
  border: 1px solid rgba(24, 33, 31, .12) !important;
  background: #ffffff !important;
  color: var(--ink) !important;
}

#appView:not([hidden]) .topbar .user-actions .app-menu-logout {
  border-color: rgba(185, 28, 28, .22) !important;
  color: #991b1b !important;
}

#appView:not([hidden]) .topbar .user-actions .app-menu-master {
  border: 0 !important;
  background: #148779 !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  #appView:not([hidden]) {
    padding-bottom: 0 !important;
  }

  #appView:not([hidden]) .topbar {
    flex-direction: row !important;
    align-items: center !important;
  }

  #appView:not([hidden]) .topbar h1 {
    max-width: calc(100vw - 128px) !important;
    font-size: 22px !important;
  }

  #appView:not([hidden]) .topbar .user-actions {
    width: auto !important;
    max-width: 112px !important;
    gap: 6px !important;
    justify-content: flex-end !important;
  }

  #appView:not([hidden]) .topbar .user-actions #userBadge {
    display: none !important;
  }

  #appView:not([hidden]) .app-menu-button {
    flex: 0 0 auto !important;
    width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  #appView:not([hidden]) .app-menu-panel {
    left: 10px !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    transform: none !important;
  }
}
/* WEB_UIUX_P1_P2_MENU_END */

/* RANKING_HISTORY_MODAL_START */
body.ranking-history-open {
  overflow: hidden !important;
}

.ranking-history-modal[hidden] {
  display: none !important;
}

.ranking-history-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  place-items: center !important;
  padding: 10px !important;
}

.ranking-history-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, .42) !important;
}

.ranking-history-panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(520px, calc(100vw - 20px)) !important;
  max-height: calc(100vh - 20px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(24, 33, 31, .14) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 58px rgba(15, 23, 42, .28) !important;
}

.ranking-history-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 14px 14px 12px !important;
  border-bottom: 1px solid rgba(24, 33, 31, .10) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbf8ee 100%) !important;
}

.ranking-history-kicker {
  margin: 0 0 4px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.ranking-history-head h2 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.ranking-history-close {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: 1px solid rgba(24, 33, 31, .12) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.ranking-history-body {
  min-width: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 12px !important;
}

.ranking-history-body .history-section {
  margin: 0 !important;
}

.ranking-history-body .history-scroll {
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
}

.ranking-history-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.ranking-history-summary div,
.ranking-history-section {
  border: 1px solid rgba(24, 33, 31, .10) !important;
  border-radius: 8px !important;
  background: #fbfcfb !important;
  padding: 12px !important;
}

.ranking-history-summary span,
.ranking-history-section h3 {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.ranking-history-summary strong {
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.ranking-history-section {
  margin-top: 10px !important;
}

.ranking-history-section p {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.ranking-history-guide ol {
  margin: 8px 0 0 !important;
  padding-left: 1.25rem !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.ranking-history-guide li + li {
  margin-top: 4px !important;
}

.ranking-history-machine-list {
  display: grid !important;
  gap: 8px !important;
}

.ranking-history-machine-link {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(15, 118, 110, .18) !important;
  border-radius: 8px !important;
  background: #eef7f3 !important;
  color: var(--ink) !important;
  font-weight: 900 !important;
  text-align: left !important;
}

.ranking-history-machine-link span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.ranking-history-machine-link strong {
  flex: 0 0 auto !important;
  color: #0f766e !important;
}

.ranking-history-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 14px 14px !important;
  border-top: 1px solid rgba(24, 33, 31, .10) !important;
  background: #ffffff !important;
}

.ranking-history-detail-button {
  min-height: 44px !important;
  min-width: 132px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #0f766e !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

@media (max-width: 640px) {
  .ranking-history-modal {
    align-items: start !important;
    padding: 10px !important;
  }

  .ranking-history-panel {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }

  .ranking-history-head {
    padding: 12px !important;
  }

  .ranking-history-head h2 {
    font-size: 16px !important;
  }

  .ranking-history-body {
    padding: 10px !important;
  }

  .ranking-history-summary {
    grid-template-columns: 1fr !important;
  }

  .ranking-history-actions {
    padding: 10px 12px 12px !important;
  }

  .ranking-history-detail-button {
    width: 100% !important;
  }
}
/* RANKING_HISTORY_MODAL_END */

/* RECOMMENDATION_CARDS_CTA_START */
.recommendation-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.recommendation-panel[hidden] {
  display: none !important;
}

.recommendation-card {
  min-width: 0;
  border: 1px solid rgba(15, 76, 92, .16);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(10, 40, 50, .08);
  padding: 16px;
}

.recommendation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.recommendation-kicker {
  margin: 0;
  color: #0f4c5c;
  font-size: .82rem;
  font-weight: 800;
}

.recommendation-rank {
  flex: 0 0 auto;
  max-width: 44%;
  border: 1px solid rgba(194, 132, 18, .34);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff7d8, #f3c74f);
  color: #5f3900;
  font-size: .74rem;
  font-weight: 950;
  line-height: 1.05;
  padding: 5px 8px;
  text-align: center;
  transform: rotate(2deg);
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 0 rgba(95, 57, 0, .16);
}

.recommendation-card h2 {
  margin: 0 0 12px;
  color: #0a2b33;
  font-size: 1.18rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.recommendation-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.recommendation-meta-grid div {
  min-width: 0;
  border: 1px solid rgba(15, 76, 92, .1);
  border-radius: 8px;
  background: #f7fbfb;
  padding: 9px;
}

.recommendation-meta-grid span,
.recommendation-extra-block h3 {
  display: block;
  color: #60757d;
  font-size: .74rem;
  font-weight: 700;
}

.recommendation-meta-grid strong {
  display: block;
  color: #0a2b33;
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.recommendation-guide {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.recommendation-guide div {
  min-width: 0;
  border-left: 3px solid #0f4c5c;
  border-radius: 8px;
  background: #f7fbfb;
  padding: 9px 10px;
}

.recommendation-guide span {
  display: block;
  color: #60757d;
  font-size: .74rem;
  font-weight: 800;
}

.recommendation-guide strong {
  display: block;
  color: #0a2b33;
  font-size: .9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.recommendation-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recommendation-actions button {
  min-height: 44px !important;
  border: 1px solid rgba(15, 76, 92, .18);
  border-radius: 8px;
  background: #ffffff;
  color: #0f4c5c;
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.25;
  padding: 9px 10px;
}

.recommendation-actions button:hover:not(:disabled) {
  border-color: rgba(0, 140, 136, .45);
  background: #edfafa;
}

.recommendation-actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.recommendation-extra {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.recommendation-extra[hidden],
.recommendation-extra-block[hidden] {
  display: none !important;
}

.recommendation-extra-block {
  border-left: 3px solid #008c88;
  border-radius: 8px;
  background: #f7fbfb;
  padding: 10px 12px;
}

.recommendation-reason-static {
  margin: 0 0 12px;
}

.recommendation-condition-static {
  margin: 12px 0 0;
}

.recommendation-card-hall .recommendation-actions,
.recommendation-card-machine .recommendation-actions {
  grid-template-columns: 1fr;
}

.recommendation-extra-block h3 {
  margin: 0 0 4px;
}

.recommendation-extra-block p,
.recommendation-empty p {
  margin: 0;
  color: #425760;
  font-size: .9rem;
  line-height: 1.65;
}

.recommendation-empty h2 {
  margin: 6px 0;
}

@media (max-width: 760px) {
  .recommendation-panel {
    grid-template-columns: 1fr;
  }

  .recommendation-card {
    padding: 14px;
  }

  .recommendation-meta-grid {
    grid-template-columns: 1fr;
  }
}
/* RECOMMENDATION_CARDS_CTA_END */

/* STRATEGY_COPY_P4_START */
.detail-decision-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.detail-decision-card {
  min-width: 0;
  border: 1px solid rgba(15, 76, 92, .12);
  border-left: 4px solid #008c88;
  border-radius: 8px;
  background: #f7fbfb;
  padding: 11px 12px;
}

.detail-decision-card span {
  display: block;
  color: #60757d;
  font-size: .76rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.detail-decision-card strong {
  display: block;
  color: #0a2b33;
  font-size: .94rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .detail-decision-guide {
    grid-template-columns: 1fr;
  }
}
/* STRATEGY_COPY_P4_END */


/* WEB_RANKING_POPUP_PROFIT_UI_20260605_START */
#appView:not([hidden]) {
  padding-bottom: max(86px, calc(72px + env(safe-area-inset-bottom))) !important;
}

#appView:not([hidden]) .topbar .app-bottom-nav,
#appView:not([hidden]) .topbar .user-actions.app-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 80 !important;
  width: min(760px, calc(100vw - 12px)) !important;
  max-width: min(760px, calc(100vw - 12px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 8px !important;
  background: rgba(18, 26, 31, .95) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#appView:not([hidden]) .app-bottom-nav #userBadge {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 0 2px !important;
}

#appView:not([hidden]) .app-bottom-nav .bottom-nav-item,
#appView:not([hidden]) .app-bottom-nav #mypageWindowButton,
#appView:not([hidden]) .app-bottom-nav #profitWindowButton,
#appView:not([hidden]) .app-bottom-nav #logoutButton,
#appView:not([hidden]) .app-bottom-nav #masterRoomTopButton {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 5px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

#appView:not([hidden]) .app-bottom-nav .bottom-nav-item,
#appView:not([hidden]) .app-bottom-nav #mypageWindowButton,
#appView:not([hidden]) .app-bottom-nav #profitWindowButton {
  border: 1px solid rgba(18, 32, 28, .18) !important;
  background: #fff !important;
  color: #111b18 !important;
}

#appView:not([hidden]) .app-bottom-nav #masterRoomTopButton {
  background: #0f766e !important;
  border-color: transparent !important;
  color: #fff !important;
}

#appView:not([hidden]) .app-bottom-nav .bottom-nav-logout,
#appView:not([hidden]) .app-bottom-nav #logoutButton {
  background: #fff0ee !important;
  border-color: #ffd3ce !important;
  color: #9f2c22 !important;
}

@media (max-width: 430px) {
  #appView:not([hidden]) .topbar .app-bottom-nav,
  #appView:not([hidden]) .topbar .user-actions.app-bottom-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  #appView:not([hidden]) .app-bottom-nav #userBadge {
    display: none !important;
  }

  #appView:not([hidden]) .app-bottom-nav .bottom-nav-item,
  #appView:not([hidden]) .app-bottom-nav #mypageWindowButton,
  #appView:not([hidden]) .app-bottom-nav #profitWindowButton,
  #appView:not([hidden]) .app-bottom-nav #logoutButton,
  #appView:not([hidden]) .app-bottom-nav #masterRoomTopButton {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 10.5px !important;
    padding: 0 4px !important;
  }
}

#appView:not([hidden]) .ranking-window tbody {
  grid-auto-columns: min(42vw, 164px) !important;
  gap: 10px !important;
  padding-inline: 2px 8px !important;
}

#appView:not([hidden]) .ranking-window tr.selectable-row,
#appView:not([hidden]) .ranking-window td.mobile-rank-card-cell,
#appView:not([hidden]) .ranking-window tr.selectable-row > td.mobile-rank-card-cell {
  inline-size: min(42vw, 164px) !important;
  min-width: min(42vw, 164px) !important;
  width: min(42vw, 164px) !important;
  overflow: visible !important;
}

#appView:not([hidden]) .rank-card {
  min-height: 214px !important;
  max-height: none !important;
  padding: 8px !important;
  width: calc(100% - 4px) !important;
  margin: 0 2px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(191, 151, 70, .72) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(250, 247, 239, .99)) !important;
  box-shadow: 0 12px 24px rgba(20, 30, 27, .16) !important;
  cursor: pointer !important;
}

#appView:not([hidden]) .rank-card-hall {
  background:
    linear-gradient(160deg, rgba(20, 135, 121, .12), rgba(255, 255, 255, .98) 42%, rgba(216, 178, 89, .16)) !important;
}

#appView:not([hidden]) .rank-card-rank {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  min-height: 30px !important;
}

#appView:not([hidden]) .rank-card-rank span {
  color: #f6d88b !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#appView:not([hidden]) .rank-card-rank strong {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 48px) !important;
  height: auto !important;
  min-height: 24px !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  transform: rotate(-2deg) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16) !important;
}

#appView:not([hidden]) .rank-card-score {
  gap: 5px !important;
  min-height: 34px !important;
  font-size: 20px !important;
}

#appView:not([hidden]) .rank-card-score span {
  color: #28554f !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#appView:not([hidden]) .rank-card-score strong {
  color: #0f5f58 !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#appView:not([hidden]) .rank-card h3 {
  font-size: 12px !important;
  line-height: 1.22 !important;
  min-height: 30px !important;
}

#appView:not([hidden]) .rank-card-reason {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  color: #40504c !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  min-height: 40px !important;
  text-align: left !important;
  width: 100% !important;
}

#appView:not([hidden]) .rank-card-open {
  min-height: 32px !important;
  height: 32px !important;
  border: 0 !important;
  background: #0f766e !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(15, 118, 110, .2) !important;
}

.legacy-detail-panel[hidden] {
  display: none !important;
}

.ranking-detail-modal[hidden] {
  display: none !important;
}

.ranking-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 10040 !important;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: max(12px, calc(env(safe-area-inset-top) + 8px)) 10px max(16px, env(safe-area-inset-bottom));
}

.ranking-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 24, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ranking-detail-panel {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 20px));
  max-height: min(calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 780px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: #fbfaf6;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .36);
}

.ranking-detail-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px 34px;
  align-items: center;
  gap: 7px;
  padding: 10px;
  background: linear-gradient(135deg, #152320, #0f766e 78%, #9a7426);
  color: #fff;
}

.ranking-detail-head h2 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-detail-kicker {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 900;
}

.ranking-detail-close,
.ranking-detail-nav {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  min-height: 34px;
}

.ranking-detail-nav {
  font-size: 26px;
  line-height: 1;
}

.ranking-detail-close {
  font-size: 22px;
  line-height: 1;
}

.ranking-detail-nav:disabled {
  cursor: not-allowed;
  opacity: .34;
}

.ranking-detail-body {
  overflow: auto;
  padding: 12px;
  overscroll-behavior: contain;
}

.ranking-detail-body .strategy-section,
.ranking-detail-body .detail-decision-guide,
.ranking-detail-body .history-section {
  margin: 0 0 12px;
}

.ranking-detail-body .history-section {
  border-radius: 8px;
}

.ranking-detail-body .graph-compare-grid {
  grid-template-columns: 1fr;
}

body.ranking-detail-open {
  overflow: hidden;
}

@media (max-width: 430px) {
  .ranking-detail-modal {
    align-items: start;
    padding: max(10px, calc(env(safe-area-inset-top) + 8px)) 8px max(8px, env(safe-area-inset-bottom));
  }

  .ranking-detail-panel {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .ranking-detail-head {
    grid-template-columns: 38px minmax(0, 1fr) 38px 32px;
    gap: 5px;
    padding: 8px;
  }

  .ranking-detail-head h2 {
    font-size: 15px;
  }

  .ranking-detail-body {
    padding: 10px;
  }
}

/* Mypage custom pages menu / 20260605 */
#appView:not([hidden]) #mypageMenuShell {
  display: block !important;
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  left: auto !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  z-index: 10020 !important;
}
body.ranking-detail-open #appView:not([hidden]) #mypageMenuShell,
body.ranking-history-open #appView:not([hidden]) #mypageMenuShell {
  display: none !important;
}
#appView:not([hidden]) #mypageMenuShell[hidden],
#appView:not([hidden]) #mypageMenuDrawer[hidden] {
  display: none !important;
}
#appView:not([hidden]) #mypageMenuButton.mypage-menu-button {
  align-items: center !important;
  background: #183a37 !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(24, 33, 31, .18) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  height: 42px !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 !important;
  width: 42px !important;
}
#appView:not([hidden]) #mypageMenuButton.mypage-menu-button span {
  background: #ffffff !important;
  border-radius: 999px !important;
  display: block !important;
  height: 2px !important;
  width: 18px !important;
}
#appView:not([hidden]) #mypageMenuDrawer.mypage-menu-drawer:not([hidden]) {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 42px rgba(24, 33, 31, .16) !important;
  display: grid !important;
  gap: 6px !important;
  position: fixed !important;
  right: 10px !important;
  top: calc(env(safe-area-inset-top) + 62px) !important;
  width: min(270px, calc(100vw - 20px)) !important;
  z-index: 10019 !important;
}

/* RANKING_HORIZONTAL_SCROLL_FIX_20260606_START */
@media (max-width: 640px) {
  #appView:not([hidden]) .ranking-section,
  #appView:not([hidden]) .mypage-section,
  #appView:not([hidden]) .nearby-ranking-section,
  .ranking-detail-body,
  .ranking-history-body {
    min-width: 0 !important;
  }

  #appView:not([hidden]) .table-wrap.ranking-window,
  #appView:not([hidden]) .ranking-window {
    box-sizing: border-box !important;
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    width: 100% !important;
  }

  #appView:not([hidden]) .ranking-window table {
    display: block !important;
    max-width: none !important;
    min-width: max-content !important;
    width: max-content !important;
  }

  #appView:not([hidden]) .ranking-window tbody {
    display: grid !important;
    gap: 10px !important;
    grid-auto-columns: 164px !important;
    grid-auto-flow: column !important;
    grid-template-rows: repeat(1, auto) !important;
    max-width: none !important;
    min-width: max-content !important;
    width: max-content !important;
  }

  #appView:not([hidden]) .ranking-window tr.selectable-row,
  #appView:not([hidden]) .ranking-window td.mobile-rank-card-cell,
  #appView:not([hidden]) .ranking-window tr.selectable-row > td.mobile-rank-card-cell {
    box-sizing: border-box !important;
    flex: 0 0 164px !important;
    inline-size: 164px !important;
    max-width: 164px !important;
    min-width: 164px !important;
    width: 164px !important;
  }

  #appView:not([hidden]) .rank-card {
    box-sizing: border-box !important;
    inline-size: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
    width: 160px !important;
  }

  .ranking-detail-body {
    overflow-x: auto !important;
  }

  .ranking-detail-body .history-scroll,
  .ranking-history-body .history-scroll,
  .ranking-history-body .ranking-history-machine-list {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
}
/* RANKING_HORIZONTAL_SCROLL_FIX_20260606_END */
/* WEB_RANKING_POPUP_PROFIT_UI_20260605_END */