:root { color: #27231e; background: #f7f2e8; font-family: "Noto Sans JP", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f7f2e8 url("/images/backgrounds/mahjong-paper.png") center top / cover fixed no-repeat; }
.daily-update-notice { position: fixed; z-index: 50; top: 18px; left: 50%; width: max-content; max-width: calc(100vw - 32px); padding: 13px 20px; transform: translate(-50%, -12px); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; opacity: 0; color: #fffdf8; background: rgba(44,41,37,.97); box-shadow: 0 12px 30px rgba(44,41,37,.28); font-size: 14px; font-weight: 600; line-height: 1.6; text-align: center; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.daily-update-notice.is-visible { transform: translate(-50%, 0); opacity: 1; }
main { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 42px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.hero { padding: 0 0 14px; }
.view-switcher { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; padding: 3px; background: rgba(255,255,255,.78); border: 1px solid rgba(94,72,51,.18); border-radius: 9px; box-shadow: 0 5px 14px rgba(76,55,34,.07); }
.view-switcher a { display: grid; min-width: 72px; height: 34px; padding: 0 13px; place-items: center; color: #51483e; border-radius: 6px; font-size: 13px; font-weight: 800; text-decoration: none; }
.view-switcher a:hover { color: #9e251e; background: #fff8f4; }
.view-switcher a.is-active { color: #fffdf8; background: #a83028; pointer-events: none; }
.view-switcher a.is-disabled { color: #aaa096; background: transparent; cursor: not-allowed; pointer-events: none; }
.language-switcher { display: inline-flex; align-items: center; overflow: hidden; background: rgba(255,255,255,.78); border: 1px solid rgba(94,72,51,.18); border-radius: 8px; box-shadow: 0 5px 14px rgba(76,55,34,.07); }
.language-switcher a { display: grid; min-width: 62px; height: 40px; padding: 0 10px; place-items: center; color: #51483e; font-size: 12px; font-weight: 800; text-decoration: none; }
.language-switcher a + a { border-left: 1px solid rgba(94,72,51,.14); }
.language-switcher a:hover { color: #9e251e; background: #fff8f4; }
.language-switcher a.is-active { color: #fffdf8; background: #6d6258; pointer-events: none; }
.is-english th.metric-header { min-width: 92px; max-width: 132px; padding-right: 8px; padding-left: 8px; line-height: 1.14; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.is-english th.player-identity-header, .is-english td.player-identity { width: 160px; min-width: 160px; max-width: 160px; }
.is-english td.player-identity .decorated-label { white-space: normal; line-height: 1.16; }
.is-english .team-affiliation-header, .is-english td.team-cell { width: 180px; min-width: 180px; max-width: 180px; }
.is-english td.team-cell .team-decoration { width: 172px; min-height: 34px; padding-right: 7px; font-size: 12px; white-space: normal; }
.is-english td.team-identity .team-decoration,
.is-english td.team-cell .team-decoration { min-height: 40px; }
.is-english td.team-identity .team-decoration::before,
.is-english td.team-cell .team-decoration::before { height: 34px; }
.is-english td.team-identity .team-decoration::after,
.is-english td.team-cell .team-decoration::after { height: 14px; }
.is-english .metric-option-name { line-height: 1.25; }
h1 { margin: 0; color: #27231e; font-family: "Playfair Display", "Noto Sans JP", serif; font-size: clamp(28px, 3.25vw, 44px); font-weight: 700; letter-spacing: .035em; line-height: 1; }
h1 span + span { margin-left: .22em; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 20px; padding: 12px 16px; background: rgba(255,255,255,.74); border: 1px solid rgba(94,72,51,.16); border-radius: 12px; box-shadow: 0 8px 22px rgba(76,55,34,.07); backdrop-filter: blur(8px); }
label { display: grid; gap: 7px; color: #71675c; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
select, button { height: 43px; padding: 0 14px; font: 600 15px "Noto Sans JP", sans-serif; border-radius: 7px; }
select { min-width: 150px; color: #27231e; background: rgba(255,255,255,.88); border: 1px solid #d8d0c6; }
button { padding: 0 24px; color: white; background: #bd3329; border: 1px solid #bd3329; box-shadow: 0 5px 12px rgba(179,45,36,.22); cursor: pointer; transition: .18s ease; }
button:hover { background: #9e251e; transform: translateY(-1px); }
#metric-open-button, #team-filter-open-button, #season-open-button, #row-range-apply, #row-range-reset, #minimum-match-apply, #minimum-match-reset { align-self: end; color: #3f352c; background: rgba(255,255,255,.88); border-color: #d8d0c6; box-shadow: none; }
#metric-open-button:hover, #team-filter-open-button:hover, #season-open-button:hover, #row-range-apply:hover, #row-range-reset:hover, #minimum-match-apply:hover, #minimum-match-reset:hover { color: white; background: #9e251e; border-color: #9e251e; }
.row-range-control > span { display: flex; align-items: center; gap: 5px; height: 43px; }
.row-range-control input { width: 64px; height: 43px; padding: 0 8px; color: #27231e; background: rgba(255,255,255,.88); border: 1px solid #d8d0c6; border-radius: 7px; font: 600 14px "Noto Sans JP", sans-serif; text-align: center; }
.row-range-control b { color: #8a7d70; font-weight: 500; }
#row-range-apply, #row-range-reset, #minimum-match-apply, #minimum-match-reset { padding: 0 13px; }
.table-bottom-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-top: 10px; }
.table-bottom-controls .row-range-control, .table-bottom-controls .minimum-match-control { color: #71675c; }
.minimum-match-control { margin-left: 12px; }
.minimum-match-control input { width: 104px; height: 43px; padding: 0 8px; color: #27231e; background: rgba(255,255,255,.88); border: 1px solid #d8d0c6; border-radius: 7px; font: 600 14px "Noto Sans JP", sans-serif; text-align: center; }
.active-players-control { display: flex; align-items: center; align-self: end; height: 43px; gap: 8px; padding: 0 4px; color: #4f463d; letter-spacing: 0; cursor: pointer; }
.active-players-control input { width: 17px; height: 17px; margin: 0; accent-color: #a83028; }
.active-players-control[hidden] { display: none; }
.active-conditions { display: flex; min-height: 30px; align-items: center; gap: 7px; margin: 8px 0 -4px; flex-wrap: wrap; }
.ranking-scope { padding: 5px 9px; color: #5e5146; background: rgba(255,255,255,.62); border: 1px solid rgba(94,72,51,.17); border-radius: 999px; font-size: 12px; font-weight: 700; }
.condition-chip { display: inline-flex; height: 28px; align-items: center; gap: 6px; padding: 0 10px; color: #7f2a24; background: #fff8f4; border: 1px solid #dfb8ad; border-radius: 999px; box-shadow: none; font-size: 12px; }
.condition-chip:hover { color: white; background: #9e251e; border-color: #9e251e; transform: none; }
.condition-chip span { font-size: 15px; line-height: 1; }
dialog { width: min(920px, calc(100vw - 72px)); max-width: none; max-height: calc(100vh - 64px); padding: 0; overflow: visible; color: #312c27; background: #fffdf8; border: 1px solid rgba(78,61,45,.3); border-radius: 16px; box-shadow: 0 30px 70px rgba(25,18,12,.35); }
dialog::backdrop { background: rgba(25,20,15,.58); backdrop-filter: blur(2px); }
.metric-dialog-panel { display: flex; flex-direction: column; max-height: calc(100vh - 64px); margin: 0; }
.metric-dialog-header { display: flex; align-items: start; justify-content: space-between; padding: 22px 26px 17px; color: #fffdf8; background: #2c2925; }
.metric-dialog-header p { margin: 0 0 3px; color: #dccdbb; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.metric-dialog-header h2 { margin: 0; font-size: 22px; letter-spacing: .04em; }
.dialog-close { display: grid; width: 34px; height: 34px; min-width: 0; place-items: center; padding: 0; color: #fffdf8; background: transparent; border-color: rgba(255,255,255,.35); box-shadow: none; font-size: 25px; font-weight: 400; line-height: 1; }
.dialog-close:hover { background: rgba(255,255,255,.14); transform: none; }
.metric-dialog-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px; border-bottom: 1px solid #e7ddd1; background: #faf7f1; }
.metric-bulk-actions, .metric-preset-actions { display: flex; align-items: center; gap: 7px; }
.metric-dialog-tools button { height: 34px; padding: 0 11px; color: #4a4037; background: white; border-color: #d7ccbf; box-shadow: none; font-size: 13px; }
.metric-dialog-tools button:hover { color: white; background: #9e251e; border-color: #9e251e; transform: none; }
.metric-preset-actions input, .metric-preset-actions select { height: 34px; min-width: 0; padding: 0 10px; color: #312c27; background: white; border: 1px solid #d7ccbf; border-radius: 6px; font: 500 13px "Noto Sans JP", sans-serif; }
.metric-preset-actions input { width: 186px; }
.metric-preset-actions select { width: 170px; }
.metric-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; overflow: auto; padding: 18px 26px 22px; }
.metric-group-selected { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; margin-bottom: 12px; padding: 10px 14px 12px; background: #f8eee8; border: 1px solid #dfc4b7; border-radius: 8px; }
.metric-group-selected h3 { grid-column: 1 / -1; margin: 0 0 5px; color: #8f2c25; }
.selected-metric-order-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 4px; border-bottom: 1px solid #e8d8cf; transition: opacity .12s ease, box-shadow .12s ease; }
.selected-metric-order-item label { min-width: 0; border-bottom: 0; }
.metric-drag-handle { display: grid; width: 24px; height: 28px; place-items: center; color: #9e3a32; border-radius: 5px; font-size: 18px; line-height: 1; cursor: grab; user-select: none; }
.metric-drag-handle:hover { color: white; background: #a83028; }
.metric-drag-handle:active { cursor: grabbing; }
.selected-metric-order-item.is-fixed .metric-drag-handle { color: #c9b9b1; background: transparent; cursor: default; }
.selected-metric-order-item.is-dragging { opacity: .35; }
.selected-metric-order-item.drag-before { box-shadow: inset 3px 0 0 #a83028; }
.selected-metric-order-item.drag-after { box-shadow: inset -3px 0 0 #a83028; }
.metric-list label { display: flex; align-items: center; min-height: 32px; gap: 8px; color: #433b33; border-bottom: 1px solid #eee6dd; font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.metric-option-name { cursor: default; text-decoration: underline dotted rgba(88,70,52,.55); text-underline-offset: 3px; }
.metric-tooltip { position: fixed; z-index: 100; display: none; max-width: min(330px, calc(100vw - 24px)); padding: 9px 11px; color: #fffdf8; background: #2c2925; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; box-shadow: 0 8px 20px rgba(28,20,14,.27); font-size: 12px; font-weight: 500; line-height: 1.6; pointer-events: none; }
.metric-tooltip.is-visible { display: block; }
.metric-list input { width: 15px; height: 15px; margin: 0; accent-color: #a83028; }
.metric-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 26px; border-top: 1px solid #e7ddd1; background: #faf7f1; }
#metric-selection-count { color: #76695b; font-size: 13px; font-weight: 700; }
.metric-dialog-footer > div { display: flex; gap: 8px; }
.metric-dialog-footer button { height: 38px; font-size: 14px; }
.metric-dialog-footer .button-muted { color: #4a4037; background: white; border-color: #d7ccbf; box-shadow: none; }
.metric-dialog-footer .button-muted:hover { color: white; background: #76695b; border-color: #76695b; transform: none; }
#team-filter-dialog { width: min(620px, calc(100vw - 72px)); }
.team-filter-dialog-panel { display: flex; flex-direction: column; max-height: calc(100vh - 64px); margin: 0; }
.team-filter-tools { display: flex; gap: 8px; padding: 14px 24px; border-bottom: 1px solid #e7ddd1; background: #faf7f1; }
.team-filter-tools button { height: 34px; padding: 0 12px; color: #4a4037; background: white; border-color: #d7ccbf; box-shadow: none; font-size: 13px; }
.team-filter-tools button:hover { color: white; background: #9e251e; border-color: #9e251e; transform: none; }
.team-filter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; overflow: auto; padding: 16px 24px 22px; }
.team-filter-list label { display: flex; align-items: center; min-height: 38px; gap: 9px; color: #433b33; border-bottom: 1px solid #eee6dd; font-size: 14px; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.team-filter-list input { width: 16px; height: 16px; margin: 0; accent-color: #a83028; }
#status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 20px; margin: 12px 0 8px; color: #665e56; font-size: 13px; }
#status > :last-child { justify-self: end; }
.status-scope { color: #27231e; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.table-wrap { width: fit-content; max-width: 100%; overflow-x: auto; background: rgba(255,255,255,.78); border: 1px solid rgba(78,61,45,.18); border-radius: 15px; box-shadow: 0 14px 35px rgba(73,52,31,.08); }
table { width: max-content; min-width: 0; border-collapse: collapse; white-space: nowrap; }
th { padding: 14px 16px; color: #fffdf8; background: #2c2925; box-shadow: 0 1px 0 #2c2925, 0 5px 10px rgba(44,41,37,.18); font-size: 13px; font-weight: 600; text-align: center; }
th.metric-header { padding: 9px 12px; overflow-wrap: normal; line-height: 1.25; white-space: normal; word-break: keep-all; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #443f39; }
.sort-mark { display: inline-block; width: 12px; margin-left: 4px; color: #dccdbb; font-size: 11px; }
td.identity, td.image-cell, td.team-cell { text-align: left; }
td { padding: 9px 16px; border-bottom: 1px solid #e9e1d8; color: #312c27; font-size: 14px; text-align: right; }
tbody td:not(.identity):not(.image-cell):not(.team-cell) { padding: 5px 8px; font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.frozen-rank, .frozen-identity, .frozen-image { position: sticky; z-index: 4; }
thead .frozen-rank, thead .frozen-identity, thead .frozen-image { z-index: 6; }
tbody .frozen-rank, tbody .frozen-identity, tbody .frozen-image { background: rgba(255,253,248,.98); }
tbody tr:hover .frozen-rank, tbody tr:hover .frozen-identity, tbody tr:hover .frozen-image { background: #fcf8f1; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(187,48,39,.045); }
.rank { width: 52px; color: #8d7765; font-variant-numeric: tabular-nums; text-align: center; }
.identity { font-weight: 700; }
.image-cell { width: 50px; padding-right: 4px; padding-left: 4px; }
.image-cell.team-image-cell { text-align: center; }
.team-image-cell .team-logo { margin-right: auto; margin-left: auto; }
.portrait { display: block; width: 38px; height: 38px; object-fit: cover; object-position: top; border-radius: 50%; background: #e8ded0; }
.team-logo { display: block; width: 42px; height: 38px; object-fit: contain; transform: scale(1.28); transform-origin: center; }
.team-cell, .team-identity { padding-right: 4px; padding-left: 4px; font-weight: 700; }
th.team-affiliation-header, td.team-cell { width: 132px; min-width: 132px; max-width: 132px; }
th.team-identity-header, td.team-identity { width: 216px; min-width: 216px; max-width: 216px; }
th.player-identity-header, td.player-identity { width: 108px; min-width: 108px; max-width: 108px; padding-right: 8px; padding-left: 8px; }
.team-decoration { position: relative; isolation: isolate; display: inline-grid; width: 124px; min-height: 28px; align-items: center; padding: 2px 8px 2px 10px; color: var(--team-ink); font-weight: 700; line-height: 1.2; }
.team-decoration-wide { width: 208px; min-height: 36px; white-space: normal; }
.team-decoration::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 0; width: 100%; height: 22px; transform: translateY(-50%) skewX(-12deg); border-radius: 2px 18px 18px 2px / 50% 68% 48% 50%; background: linear-gradient(90deg, color-mix(in srgb, var(--team-wash) 72%, transparent), color-mix(in srgb, var(--team-wash) 44%, transparent) 72%, transparent); filter: blur(.7px); }
.team-decoration::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 12px; width: calc(100% - 12px); height: 9px; transform: translateY(-50%) skewX(-12deg); border-radius: 50%; background: color-mix(in srgb, var(--team-wash) 48%, transparent); filter: blur(3px); }
.points { color: #312c27; font-weight: 700; }
.negative { color: #b42f26 !important; }
.metric-rank-first { color: #1769aa !important; font-weight: 700; }
.metric-rank-top { color: #278452 !important; font-weight: 700; }
.metric-rank-last { color: #c63f78 !important; font-weight: 700; }
.metric-rank-bottom { color: #c45b16 !important; font-weight: 700; }
.metric-rank-emphasis { display: inline-block; min-width: 2.6em; padding: 0 4px; border-radius: 999px; text-align: center; }
.metric-rank-first .metric-rank-emphasis { background: rgba(23,105,170,.16); }
.metric-rank-last .metric-rank-emphasis { background: rgba(198,63,120,.16); }
.overall-row td { background: rgba(47,42,36,.10); border-top: 2px solid rgba(47,42,36,.45); font-weight: 700; }
.overall-row .frozen-rank, .overall-row .frozen-identity, .overall-row .frozen-image { background: rgba(242,238,231,.98); }
.empty-state-row:hover { background: transparent; }
.empty-state-row td { padding: 0; text-align: center; white-space: normal; }
.empty-state { display: grid; min-width: min(620px, calc(100vw - 50px)); min-height: 220px; place-content: center; justify-items: center; gap: 9px; padding: 34px 24px; color: #6f6256; }
.empty-state strong { color: #332d27; font-size: 18px; }
.empty-state span { max-width: 480px; font-size: 13px; line-height: 1.7; }
.empty-state button { height: 38px; margin-top: 5px; padding: 0 16px; font-size: 13px; }
.floating-table-header { position: fixed; top: 0; z-index: 20; display: none; pointer-events: auto; }
.floating-table-header.is-visible { display: block; }
.floating-table { table-layout: fixed; }
.floating-table .frozen-rank, .floating-table .frozen-identity, .floating-table .frozen-image { position: relative; z-index: 3; background: #2c2925; }
.distribution { width: auto; min-width: 0; max-width: none; padding-right: 8px; padding-left: 8px; color: #554d45; font-size: 13px; text-align: center; }
.overall-distribution { white-space: nowrap; }
.detail-link, .detail-link:visited, .detail-link:hover, .detail-link:focus-visible { color: inherit; text-decoration: none; }
.metric-mobile-search { display: block; padding: 14px 22px 10px; border-bottom: 1px solid #e7ddd1; background: #faf7f1; }
.metric-mobile-search label { display: grid; gap: 6px; color: #554d45; font-size: 13px; font-weight: 700; }
.metric-mobile-search input { width: 100%; height: 42px; padding: 0 12px; color: #312c27; background: white; border: 1px solid #cfc4b8; border-radius: 8px; font: 600 15px "Noto Sans JP", sans-serif; }
#mobile-metric-selection-hint { display: none; margin: 7px 0 0; color: #76695b; font-size: 12px; font-weight: 700; }
/* 音声入力は一旦停止。関連コードは将来の再開に備えて残す。 */
#metric-voice-search { display: none; }

/* 使い方チュートリアル */
#tour-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: block;
  background: rgba(37,31,25,.18);
  pointer-events: auto;
}

#tour-layer[hidden] { display: none; }
#tour-highlight {
  position: fixed;
  z-index: 71;
  border: 3px solid #bd3329;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 5px rgba(189,51,41,.18), 0 12px 34px rgba(45,30,20,.25);
  pointer-events: none;
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
.tour-card {
  position: fixed;
  z-index: 72;
  width: min(460px, 100%);
  padding: 16px;
  color: #312c27;
  background: #fffdf8;
  border: 1px solid #bd3329;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(25,18,12,.34);
  pointer-events: auto;
}
#tour-progress {
  margin: 0 0 7px;
  color: #a83028;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}
.tour-card h2 {
  margin: 0;
  color: #312c27;
  font-size: 21px;
  letter-spacing: .03em;
}
#tour-description {
  margin: 10px 0 0;
  color: #655b50;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}
.tour-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.tour-actions button {
  height: 38px;
  min-width: 76px;
  padding: 0 14px;
  box-shadow: none;
  font-size: 13px;
}
.tour-actions .button-muted {
  color: #4a4037;
  background: #f2ece4;
  border-color: #d7ccbf;
}
.tour-actions .button-muted:hover {
  color: #fff;
  background: #9e251e;
  border-color: #9e251e;
}
.tour-actions button:hover { transform: none; }
body.tour-active { overflow-x: hidden; }

@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { background-attachment: scroll; }
  .daily-update-notice { width: calc(100vw - 24px); max-width: calc(100vw - 24px); padding: 12px 16px; white-space: normal; }
  main { width: 100%; padding: 18px 0 30px; }
  .page-heading { display: grid; justify-items: center; gap: 0; }
  .page-actions { width: 100%; max-width: 100vw; justify-content: center; gap: 6px; }
  .hero { padding: 8px 16px 12px; text-align: center; }
  .view-switcher { margin: 0 12px 12px; }
  .view-switcher a { min-width: 88px; height: 36px; }
  .language-switcher { margin: 0 12px 12px 0; }
  .language-switcher a { min-width: 54px; height: 36px; padding: 0 8px; }
  .is-english th.player-identity-header, .is-english td.player-identity { width: 35%; min-width: 0; max-width: none; }
  .is-english th.metric-header { min-width: 84px; max-width: 104px; padding-right: 5px; padding-left: 5px; font-size: 12px; }
  h1 { max-width: calc(100vw - 24px); font-size: clamp(29px, 8.8vw, 42px); line-height: .95; letter-spacing: .045em; }
  h1 span { display: block; }
  h1 span + span { margin-top: 5px; margin-left: 0; }
  .filters { display: grid; width: calc(100% - 24px); max-width: calc(100vw - 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 0 12px; padding: 14px; overflow: hidden; }
  .filters > * { min-width: 0; max-width: 100%; }
  .filters label { min-width: 0; }
  .filters select, .filters button { width: 100%; min-width: 0; }
  .is-english .filters select, .is-english .filters button { padding-right: 8px; padding-left: 8px; font-size: 13px; }
  .is-english .active-players-control { font-size: 11px; letter-spacing: 0; }
  .filters > #metric-open-button, .filters > #team-filter-open-button { grid-column: span 1; }
  #team-filter-open-button { padding-right: 7px; padding-left: 7px; font-size: 13px; white-space: nowrap; }
  .filters > #tour-open-button { grid-column: span 2; }
  .active-players-control { min-width: 0; justify-content: center; padding: 0; font-size: 12px; }
  .active-conditions { min-height: 28px; margin: 8px 12px -4px; gap: 5px; }
  .ranking-scope, .condition-chip { font-size: 11px; }
  .empty-state { min-width: 100%; min-height: 180px; padding: 28px 16px; }
  .empty-state strong { font-size: 16px; }
  #status { grid-template-columns: 1fr auto; gap: 5px 10px; min-height: 0; margin: 14px 16px 9px; font-size: 12px; }
  #status .status-scope { grid-column: 1 / -1; font-size: 18px; line-height: 1.25; }
  #status > :last-child { justify-self: end; }
  .table-wrap { width: calc(100% - 24px); max-width: none; margin: 0 auto; border-radius: 13px; }
  table { width: 100%; table-layout: fixed; }
  th { padding: 11px 5px; font-size: 14px; }
  th.metric-header { padding: 9px 9px 9px 5px; font-size: 14px; line-height: 1.2; }
  td { padding: 7px 7px; font-size: 16px; }
  tbody td:not(.identity):not(.image-cell):not(.team-cell) { padding: 4px; font-size: 17px; line-height: 1.15; }
  .rank { width: 12%; padding-right: 3px; padding-left: 3px; font-size: 16px; text-align: center; }
  th.player-identity-header, td.player-identity { width: 35%; min-width: 0; max-width: none; padding-right: 3px; padding-left: 6px; }
  th.team-identity-header, td.team-identity { width: 35%; min-width: 0; max-width: none; padding-right: 3px; padding-left: 6px; }
  .identity { white-space: normal; overflow-wrap: anywhere; line-height: 1.22; }
  .image-cell { width: 22%; padding: 7px 3px; text-align: center !important; }
  .portrait { width: 42px; height: 42px; margin: 0 auto; }
  .team-logo { width: 46px; height: 42px; margin: 0 auto; transform: scale(1.18); }
  tbody td:last-child { width: 31%; padding-right: 20px; }
  thead th:last-child { width: 31%; padding-right: 18px; }
  .team-decoration, .team-decoration-wide { width: 100%; min-height: 27px; padding: 2px 5px 2px 7px; font-size: 14px; }
  .is-english td.player-identity .team-decoration { min-height: 34px; font-size: 12px; line-height: 1.08; }
  .team-decoration-wide { white-space: normal; }
  .table-bottom-controls { display: none; }
  #tour-highlight { border-radius: 9px; }
  .tour-card { width: calc(100vw - 20px); padding: 14px; border-radius: 10px; }
  .tour-card h2 { font-size: 19px; }
  #tour-description { font-size: 13px; line-height: 1.65; }
  .tour-actions { gap: 6px; }
  .tour-actions button { min-width: 68px; padding: 0 11px; }

  dialog { width: calc(100vw - 24px); height: calc(100svh - 24px); max-height: calc(100svh - 24px); overflow: hidden; border-radius: 14px; }
  .metric-dialog-panel, .team-filter-dialog-panel { height: 100%; max-height: calc(100svh - 24px); overflow: hidden; }
  .metric-dialog-header { padding: 20px 22px; }
  .metric-dialog-header p { display: none; }
  .metric-dialog-header h2 { font-size: 29px; }
  .dialog-close { width: 46px; height: 46px; font-size: 37px; }
  #metric-dialog .metric-dialog-tools, #metric-dialog .metric-dialog-footer { display: none; }
  .metric-mobile-search { display: block; padding: 18px 22px 13px; border-bottom: 1px solid #e7ddd1; background: #faf7f1; }
  .metric-mobile-search label { gap: 8px; font-size: 15px; letter-spacing: .03em; }
  .metric-mobile-search input { width: 100%; height: 53px; padding: 0 14px; color: #312c27; background: white; border: 2px solid #312c27; border-radius: 10px; font: 600 18px "Noto Sans JP", sans-serif; }
  #mobile-metric-selection-hint { display: block; }
  .metric-list { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 22px 16px; }
  .mobile-selected-metrics { margin: 0 -22px 8px; padding: 12px 22px 10px; background: #f8eee8; border-bottom: 1px solid #dfc4b7; }
  .mobile-selected-metrics h3 { margin: 0 0 6px; color: #8f2c25; font-size: 14px; }
  .mobile-selected-metric { display: flex; min-height: 48px; align-items: center; gap: 10px; color: #312c27; border-bottom: 1px solid #e7d6cd; font-size: 17px; font-weight: 700; }
  .mobile-selected-metric:last-child { border-bottom: 0; }
  .mobile-selected-metric input { width: 23px; height: 23px; flex: 0 0 auto; accent-color: #a83028; }
  .mobile-metric-option { display: flex; align-items: center; min-height: 72px; gap: 16px; color: #312c27; border-bottom: 1px solid #e7ddd1; font-size: 20px; font-weight: 700; letter-spacing: 0; white-space: normal; }
  .mobile-metric-option input { width: 27px; height: 27px; flex: 0 0 auto; }
  .mobile-metric-option.is-disabled { opacity: .42; }
  .mobile-comparison-mode table { width: max-content; min-width: 100%; table-layout: auto; }
  .mobile-comparison-mode .rank { width: 48px; min-width: 48px; }
  .mobile-comparison-mode th.player-identity-header, .mobile-comparison-mode td.player-identity,
  .mobile-comparison-mode th.team-identity-header, .mobile-comparison-mode td.team-identity { width: 150px; min-width: 150px; max-width: 150px; }
  .mobile-comparison-mode .image-cell { width: 70px; min-width: 70px; }
  .mobile-comparison-mode th.metric-header, .mobile-comparison-mode td:not(.rank):not(.identity):not(.image-cell) { width: 120px; min-width: 120px; }
  .mobile-comparison-mode tbody td:last-child, .mobile-comparison-mode thead th:last-child { width: 120px; padding-right: 12px; }
  .mobile-metric-empty { padding: 24px 0; color: #76695b; font-size: 16px; font-weight: 600; }
  .metric-tooltip { max-width: min(330px, calc(100vw - 30px)); font-size: 13px; line-height: 1.55; }
  .team-filter-list { grid-template-columns: 1fr; flex: 1 1 auto; min-height: 0; }
  .team-filter-dialog-panel .metric-dialog-footer { display: flex; flex: 0 0 auto; padding: 12px 18px; }
  .team-filter-dialog-panel .metric-dialog-footer button { height: 42px; padding: 0 15px; }
  html.is-embedded dialog { inset: 8px 12px auto; height: calc(100svh - 148px); max-height: calc(100svh - 148px); margin: 0 auto; }
  html.is-embedded .metric-dialog-panel, html.is-embedded .team-filter-dialog-panel { max-height: calc(100svh - 148px); }
}

@media (min-width: 701px) {
  .metric-dialog-header p,
  .sort-mark,
  .tour-eyebrow { font-size: 12px; }
}