
.ev-page {
  min-height: calc(100vh - var(--shell-h) - var(--footer-h));
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  box-sizing: border-box;
  padding: var(--page-top) max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) var(--step-8);
  background: var(--surface-ground);
  color: var(--ink-1);
  display: grid; gap: var(--step-5); align-content: start;
}
.ev-head { display: grid; gap: var(--step-1); }
.ev-h1 { margin: 0; font: 600 var(--type-page) / 1.15 var(--font-display); letter-spacing: var(--track-display); }
.ev-h2 { margin: 0; display: flex; align-items: baseline; gap: var(--step-3); font-size: var(--type-head); font-weight: 600; }
.ev-count { color: var(--ink-3); font-size: var(--type-body); font-weight: 400; font-variant-numeric: tabular-nums; }
.ev-sub, .ev-updated { margin: 0; color: var(--ink-2); font-size: var(--type-read); overflow-wrap: anywhere; }
.ev-updated { color: var(--ink-3); font-size: var(--type-body); }
.ev-dim { color: var(--ink-3); }
.ev-cols { display: grid; gap: var(--step-5); min-width: 0; }
.ev-cols > * { min-width: 0; }
.ev-main { display: grid; gap: var(--step-6); align-content: start; }
section.ev-main { gap: var(--step-3); }
@media (min-width: 1100px) {
  .has-side .ev-cols { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
}


.ev-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--step-1); }
.ev-fact {
  padding: 1px var(--step-2); border: 1px solid var(--line-1); border-radius: var(--round-pill);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--type-note); white-space: nowrap; font-variant-numeric: tabular-nums;
}


.ev-crest { --tier: var(--ink-3); }
.ev-crest-won { --tier: var(--tier-challenger); }
.ev-crest .crest-mark.crest-line { fill: color-mix(in srgb, var(--tier) 30%, transparent); }
.ev-crest-n { fill: var(--ink-1); font-size: 26px; font-weight: 700; }
.ev-page .ur-thumb-88 { width: 88px; height: 88px; border-radius: var(--round-2); }


.ev-premiers { display: grid; gap: var(--step-3); }
.ev-premier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.ev-premier { --dom: var(--line-2); position: relative; min-width: 0; }
.ev-premier-main {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--step-4); align-items: stretch; min-height: 176px;
  padding: var(--step-3); border: 1px solid var(--line-1); border-radius: 12px; color: inherit; text-decoration: none;
  background: var(--rift-field) right center / cover no-repeat, var(--surface-1);
}
@media (hover: hover) { .ev-premier-main:hover { border-color: var(--line-2); background-color: var(--surface-2); } }
.ev-premier-main:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.ev-premier-art { display: grid; min-height: 0; }
.ev-premier-art > .ur-thumb { width: 100%; height: 100%; min-height: 150px; border-radius: var(--round-2); }
.ev-premier-body { display: grid; gap: var(--step-2); align-content: center; min-width: 0; padding-block: var(--step-1); }
.ev-premier-when { color: var(--ink-2); font-size: var(--type-body); }
.ev-premier-name { font: 600 1.25rem / 1.2 var(--font-display); letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.ev-premier-won { display: flex; align-items: center; gap: var(--step-2); min-width: 0; }
.ev-premier-who { display: grid; min-width: 0; }
.ev-premier-winner { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-premier-legend { color: var(--ink-2); font-size: var(--type-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.ev-all { display: grid; gap: var(--step-3); }
.ev-all-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--step-2) var(--step-4); }
:root[data-input="touch"] :is(.ev-pager .ui-btn, .ev-deck-go .ui-btn) { min-height: var(--touch); }
.ev-standings { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; border-top: 1px solid var(--line-1); }
.ev-st { --dom: var(--line-2); border-bottom: 1px solid var(--line-1); }
@media (hover: hover) { .ev-st-main:is(a):hover { background: var(--surface-1); } }
.ev-st-main:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }
.ev-st-who { display: grid; min-width: 0; }
.ev-st-legend { color: var(--ink-2); font-size: var(--type-note); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.evf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); min-width: 0; }
.evf-search { position: relative; flex: 0 1 19rem; min-width: 12rem; display: flex; }
.evf-q {
  box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 2.25rem 0 var(--step-3);
  border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1);
  font: inherit; font-size: var(--type-body);
}
.evf-q::placeholder { color: var(--ink-3); }
.evf-q:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.evf-key {
  position: absolute; right: var(--step-2); top: 50%; transform: translateY(-50%); pointer-events: none;
  min-width: 1.25rem; padding: 0 var(--step-1); border: 1px solid var(--line-2); border-radius: var(--round-1);
  background: var(--surface-2); color: var(--ink-3); font: var(--type-note) / 1.5 var(--mono); text-align: center;
}
.evf-q:focus ~ .evf-key, .evf-q:not(:placeholder-shown) ~ .evf-key { display: none; }
:root[data-input="touch"] .evf-key { display: none; }
.evf-menus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); }
.evf-trigger {
  display: inline-flex; align-items: center; gap: var(--step-2); min-height: 36px; padding: 0 var(--step-1) 0 var(--step-3);
  border: 1px dashed var(--line-2); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1);
  font: inherit; font-size: var(--type-body); font-weight: 600; cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .evf-trigger:hover { border-color: var(--ink-3); } }
.evf-trigger:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.evf-trigger[aria-expanded="true"] { background: var(--surface-2); }
.evf-trigger.is-on { border-style: solid; border-color: var(--ink-3); }
.evf-trigger-value {
  padding: 1px var(--step-2); border-radius: var(--round-pill); background: var(--surface-2); color: var(--ink-2);
  font-size: var(--type-note); font-weight: 400; font-variant-numeric: tabular-nums;
}
.evf-trigger.is-on .evf-trigger-value { background: var(--line-2); color: var(--ink-1); }
:root[data-input="touch"] :is(.evf-q, .evf-trigger) { min-height: var(--touch); }
#evf-pop-format, #evf-pop-size, #evf-pop-date { min-width: 13rem; }
.evf-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--step-3); }
#evf-pop-range { width: min(22rem, calc(100vw - 16px)); display: grid; gap: var(--step-3); }
.evf-day { display: grid; gap: var(--step-1); min-width: 0; }
.evf-day-label { font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.evf-day-input {
  box-sizing: border-box; width: 100%; min-height: var(--touch); padding: 0 var(--step-2);
  border: 1px solid var(--line-2); border-radius: var(--round-1); background: var(--surface-2); color: var(--ink-1);
  font: inherit; font-size: var(--type-body);
}
.evf-day-input:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.evf-range-why { margin: 0; color: var(--warn); font-size: var(--type-body); }
.evf-range-acts { display: flex; justify-content: flex-end; gap: var(--step-2); }


.evf-row { display: none; }
:root[data-compact] .evf-menus { display: none; }
:root[data-compact] .evf-row { display: grid; gap: var(--step-2); }
:root[data-compact] .evf-search { flex: 1 1 100%; }
.evf-row-top { display: flex; align-items: center; gap: var(--step-3); }
.evf-chips { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.evf-chip {
  display: inline-flex; align-items: center; gap: var(--step-2); min-height: var(--touch); padding: 0 var(--step-3);
  border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); color: var(--ink-1);
  font: inherit; font-size: var(--type-body);
}
.evf-chip:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.evf-chip-x { color: var(--ink-3); font-size: var(--type-read); }
.evf-seg { display: grid; gap: var(--step-2); margin-bottom: var(--step-4); }
.evf-seg-head { font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.evf-seg-opts { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.evf-seg-btn {
  display: inline-flex; align-items: center; gap: var(--step-2); min-height: var(--touch); padding: 0 var(--step-3);
  border: 1px solid var(--line-1); border-radius: var(--round-2); background: transparent; color: var(--ink-2);
  font: inherit; font-size: var(--type-body); cursor: pointer;
}
.evf-seg-btn[aria-pressed="true"] { border-color: var(--ink-1); color: var(--ink-1); box-shadow: 0 0 0 1px var(--ink-1); }
.evf-seg-btn:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.evf-seg-n { color: var(--ink-3); font-size: var(--type-note); font-variant-numeric: tabular-nums; }
.evf-sheet-range { margin: calc(-1 * var(--step-2)) 0 var(--step-4); }
.evf-sheet-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--step-3); padding-top: var(--step-3); background: var(--surface-1); }
.evf-sheet-foot .evf-show { flex: 1; }


.evt { container-type: inline-size; min-width: 0; }
.evt.is-busy .evt-rows { opacity: 0.6; }
.evt-head, .evt-main {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1.5fr) 7.5rem minmax(0, 1fr) 4.5rem minmax(0, 1.35fr);
  align-items: center; column-gap: var(--step-4); padding: 0 var(--step-3);
}
.evt-head { min-height: 36px; border-bottom: 1px solid var(--line-1); }
.evt-h { font-size: var(--type-note); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.evt-h-players { justify-self: end; }
.evt-sort {
  display: inline-flex; align-items: center; gap: var(--step-1); min-height: 32px; margin: 0 calc(-1 * var(--step-1)); padding: 0 var(--step-1);
  border: 0; border-radius: var(--round-1); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.evt-h.is-sorted { color: var(--ink-1); }
@media (hover: hover) { .evt-sort:hover { color: var(--ink-1); } }
.evt-sort:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.evt-arrow { font-size: 1.1em; line-height: 1; }
.evt-rows { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.evt-row { --dom: var(--line-2); border-bottom: 1px solid var(--line-1); }
.evt-main { min-height: 60px; padding-block: var(--step-2); color: inherit; text-decoration: none; }
@media (hover: hover) { .evt-main:hover { background: var(--surface-1); } }
.evt-main:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }
.evt-date { color: var(--ink-2); font: var(--type-label) / 1.3 var(--mono); white-space: nowrap; }
.evt-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-format, .evt-place { color: var(--ink-2); font-size: var(--type-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-players { justify-self: end; color: var(--ink-1); font: var(--type-label) / 1.3 var(--mono); font-variant-numeric: tabular-nums; }
.evt-winner { display: flex; align-items: center; gap: var(--step-3); min-width: 0; }
.evt-who { display: grid; min-width: 0; }
.evt-legend { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-player { color: var(--ink-2); font-size: var(--type-note); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-winner.is-bare .evt-player { color: var(--ink-1); font-size: var(--type-body); font-weight: 600; }
.evt-winner.is-none .evt-player { font-size: var(--type-body); }
@container (max-width: 860px) {
  .evt-head, .evt-main { grid-template-columns: 5.5rem minmax(0, 1.5fr) minmax(0, 1fr) 4rem minmax(0, 1.35fr); }
  .evt-format, .evt-h-format { display: none; }
}

@container (max-width: 599px) {
  .evt-head { display: none; }
  .evt-main {
    grid-template-columns: max-content max-content minmax(0, 1fr) auto;
    grid-template-areas: "name name name players" "date place format format" "win win win win";
    row-gap: 2px; column-gap: 0; padding: var(--step-3) var(--step-1);
  }
  .evt-name { grid-area: name; padding-right: var(--step-3); }
  .evt-players { grid-area: players; color: var(--ink-2); }
  .evt-players::after { content: " players"; font-family: var(--font-ui); font-size: var(--type-note); }
  .evt-date { grid-area: date; font: inherit; font-size: var(--type-note); }
  .evt-place { grid-area: place; font-size: var(--type-note); max-width: 12rem; }
  .evt-format { grid-area: format; display: block; font-size: var(--type-note); }
  .evt-place.is-none { display: none; }
  .evt-place::before, .evt-format::before { content: "\00b7"; padding: 0 var(--step-2); color: var(--ink-3); }
  .evt-winner { grid-area: win; margin-top: var(--step-2); gap: var(--step-2); }
  .evt-winner .ur-thumb-40 { width: 32px; height: 32px; }
}
@media (max-width: 719px) {
  .ev-premier-main { grid-template-columns: 88px minmax(0, 1fr); min-height: 0; gap: var(--step-3); }
  .ev-premier-art > .ur-thumb { min-height: 0; height: 88px; }
  .ev-premier-art { align-self: start; }
  .ev-premier-name { font-size: var(--type-head); }
}
.ev-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--step-3); }
.ev-pager .ev-pageno { color: var(--ink-3); font-size: var(--type-body); }


.ev-back { color: var(--ink-2); text-decoration: none; min-height: var(--touch); display: inline-flex; align-items: center; gap: var(--step-2); justify-self: start; font-size: var(--type-body); }
@media (hover: hover) { .ev-back:hover { color: var(--ink-1); } }
.ev-back-chev { font-size: 1.25em; line-height: 1; }
.ev-plate {
  --dom: var(--line-2);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--step-3) var(--step-5); align-items: center;
  padding: var(--step-5); border: 1px solid var(--line-1); border-radius: 12px;
  background: var(--rift-field) right center / cover no-repeat, var(--surface-1);
}
.ev-plate-body { display: grid; gap: var(--step-2); min-width: 0; }
.ev-plate-when { margin: 0; color: var(--ink-2); font-size: var(--type-body); }
.ev-plate-name { margin: 0; font: 600 var(--type-lead) / 1.15 var(--font-display); letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.ev-plate-won { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-1) var(--step-2); font-weight: 600; }
.ev-plate-legend { color: var(--ink-2); font-weight: 400; font-size: var(--type-body); }
.ev-plate > .ev-out { align-self: start; }
.ev-out, .ev-credit a, .ev-hide a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: var(--line-2); min-height: var(--touch); display: inline-flex; align-items: center; font-size: var(--type-body); }
@media (hover: hover) { .ev-out:hover, .ev-credit a:hover, .ev-hide a:hover { color: var(--ink-1); text-decoration-color: currentColor; } }
.ev-st-main {
  display: grid; grid-template-columns: 2.5rem 28px minmax(0, 1fr) 4.5rem 4.5rem; align-items: center; gap: var(--step-3);
  min-height: 44px; padding: 0 var(--step-3); color: inherit; text-decoration: none;
}
.ev-st.is-cut { background: color-mix(in srgb, var(--surface-1) 60%, transparent); }
.ev-st.is-won .ev-st-name { font-weight: 700; }
.ev-st-place { display: inline-flex; align-items: center; justify-content: center; }
.ev-st-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ev-st-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-st-record { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.ev-st-list { justify-self: end; display: inline-flex; align-items: center; gap: var(--step-1); font-size: var(--type-body); color: var(--ink-1); }
.ev-chev { color: var(--ink-3); font-size: 1.2em; line-height: 1; }
.ev-cut { display: flex; align-items: center; gap: var(--step-3); padding: var(--step-2) var(--step-3); color: var(--ink-3); font-size: var(--type-note); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
.ev-cut::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
@media (min-width: 720px) {
  .ev-st-main { grid-template-columns: 2.5rem 28px minmax(0, 1fr) 5rem 5rem; }
  .ev-st-who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--step-3); }
  .ev-st-legend { font-size: var(--type-body); }
}
@media (max-width: 719px) {
  .ev-plate { grid-template-columns: auto minmax(0, 1fr); padding: var(--step-4); }
  .ev-plate .ur-thumb-88 { width: 64px; height: 64px; }
  .ev-plate > .ev-out { grid-column: 1 / -1; }
  .ev-st-main { grid-template-columns: 2rem 28px minmax(0, 1fr) auto auto; gap: var(--step-2); padding-inline: var(--step-1); min-height: 52px; }
  .ev-st-list-word { display: none; }
}


.ev-side { display: grid; gap: var(--step-2); align-content: start; }
.ev-meta { border: 1px solid var(--line-1); border-radius: 12px; background: var(--surface-1); overflow: hidden; }
.ev-meta-table { width: 100%; border-collapse: collapse; }
.ev-meta-th {
  width: 1%; padding: var(--step-2); border-bottom: 1px solid var(--line-1);
  font-size: var(--type-note); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); text-align: right; white-space: nowrap;
}
.ev-meta-th.is-legend { width: auto; padding-left: var(--step-3); text-align: left; }
.ev-meta-th:last-child, .ev-meta-row > td:last-child { padding-right: var(--step-3); }
.ev-meta-row > td { padding: var(--step-2); border-bottom: 1px solid var(--line-1); vertical-align: middle; white-space: nowrap; }
.ev-meta-row:last-child > td { border-bottom: 0; }
.ev-meta-row > td.ev-meta-legend { padding-left: var(--step-3); max-width: 0; width: 100%; }
.ev-meta-who { display: flex; align-items: center; gap: var(--step-3); min-width: 0; }
.ev-meta-id { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ev-meta-name { font-weight: 600; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-meta-share { display: flex; align-items: center; gap: var(--step-2); min-width: 0; }
.ev-meta-bar { --w: 0%; flex: 1; min-width: 48px; height: 6px; border-radius: 2px; background: linear-gradient(to right, var(--ink-3) var(--w), var(--surface-2) var(--w)); }
.ev-meta-pct { flex: none; min-width: 3ch; text-align: right; font-size: var(--type-note); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ev-meta-players, .ev-meta-top8, .ev-meta-rate { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--type-body); color: var(--ink-1); }
.ev-meta-top8 { color: var(--tier-gold); font-weight: 650; }
.ev-meta-top8.is-zero { color: var(--ink-3); font-weight: 400; }
.ev-meta-all {
  display: flex; align-items: center; justify-content: center; gap: var(--step-1); width: 100%; min-height: 44px;
  border: 0; border-top: 1px solid var(--line-1); background: none; color: var(--ink-2); font: inherit; font-size: var(--type-body); cursor: pointer;
}
@media (max-width: 719px) {
  .ev-meta-th, .ev-meta-row > td { padding-inline: 6px; }
  .ev-meta-th { letter-spacing: 0.02em; }
  .ev-meta-th.is-legend, .ev-meta-row > td.ev-meta-legend { padding-left: var(--step-2); }
  .ev-meta-th:last-child, .ev-meta-row > td:last-child { padding-right: var(--step-2); }
  .ev-meta-who { gap: var(--step-2); }
  .ev-meta .ur-thumb { width: 32px; height: 32px; }
  .ev-meta-bar { min-width: 28px; }
}
.ev-meta-all::after { content: "⌄"; font-size: 1.1em; line-height: 1; transform: translateY(-2px); }
@media (hover: hover) { .ev-meta-all:hover { color: var(--ink-1); background: var(--surface-2); } }
.ev-meta-all:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }


.ev-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--step-5); padding-top: var(--step-3); border-top: 1px solid var(--line-1); color: var(--ink-3); font-size: var(--type-body); }
.ev-credit, .ev-hide { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--step-2); }


.ev-deck-plate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ev-deck-acts { display: grid; gap: var(--step-2); justify-items: end; min-width: 0; }
.ev-deck-go { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--step-2); }
.ev-deck-go .ui-btn { text-decoration: none; }
.ev-verdict, .ev-share { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); color: var(--ink-2); font-size: var(--type-body); }
.ev-code { padding: 2px var(--step-2); border: 1px solid var(--line-2); border-radius: var(--round-1); background: var(--surface-ground); color: var(--ink-1); font: 600 var(--type-read) / 1.3 var(--mono); letter-spacing: 0.12em; user-select: all; }
.ev-deck-view { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--step-6); align-items: start; min-width: 0; }
.ev-deck-side { display: grid; gap: var(--step-4); position: sticky; top: var(--step-4); }
.ev-deck-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-2); }
.ev-deck-art.is-thumb { grid-template-columns: auto; }
.ev-deck-face > .cf-board { width: 100%; }
.ev-deck-counts { list-style: none; margin: 0; padding: 0; display: grid; }
.ev-deck-counts:empty { display: none; }
.ev-deck-count { display: flex; justify-content: space-between; gap: var(--step-2); padding: 6px 0; border-bottom: 1px solid var(--line-1); font-size: var(--type-note); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ev-deck-count-n { color: var(--ink-1); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ev-deck-count.is-off .ev-deck-count-n { color: var(--warn); }
.ev-deck-list { display: flex; flex-direction: column; gap: var(--step-5); min-width: 0; }
.ev-deck-list .ed-sec-pair { max-width: 640px; }
.ev-deck-list .ed-main-list { columns: 3 260px; column-gap: var(--step-6); }
.ev-deck-list .ed-group { break-inside: avoid; }
.ev-deck-list .ed-group:first-child > .ed-group-head { margin-top: 0; }

.ev-deck-list .ed-main-list > .ed-sec.ed-sec { break-inside: avoid; }
:is(.ev-deck-list, .lobby-list) .ed-main-list > .ed-sec.ed-sec > .ed-lines { display: block; }
.ev-deck-list .ed-sec:not(.ed-main) > .ed-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: var(--step-6); }
.ed-line-read > .ed-cn { flex: none; margin-left: auto; min-width: 3ch; text-align: right; color: var(--ink-2); }
@media (max-width: 899px) {
  .ev-deck-plate { grid-template-columns: minmax(0, 1fr); }
  .ev-deck-acts { justify-items: stretch; }
  .ev-deck-go { display: grid; grid-template-columns: 1fr 1fr; }
  .ev-deck-go > :first-child { grid-column: 1 / -1; }
  .ev-deck-go .ui-btn { white-space: nowrap; padding-inline: var(--step-2); }
  .ev-deck-view { grid-template-columns: minmax(0, 1fr); gap: var(--step-5); }
  .ev-deck-side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .ev-deck-art { grid-column: 1 / -1; }
  .ev-deck-counts { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--step-4); }
}


.cup-page {
  min-height: calc(100vh - var(--shell-h) - var(--footer-h));
  min-height: calc(100dvh - var(--shell-h) - var(--footer-h));
  box-sizing: border-box;
  padding: var(--page-top) max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) var(--step-8);
  background: var(--surface-ground);
  color: var(--ink-1);
  display: grid; gap: var(--step-5); align-content: start;
}
.cup-page > * { min-width: 0; }
.cup-head { display: grid; gap: var(--step-2); }
.cup-kicker { margin: 0; font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.cup-h1 { margin: 0; font: 600 var(--type-page) / 1.15 var(--font-display); letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.cup-h2 { margin: 0; font-size: var(--type-head); font-weight: 600; }
.cup-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2); }
.cup-fact { padding: 1px var(--step-2); border: 1px solid var(--line-1); border-radius: var(--round-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--type-note); font-variant-numeric: tabular-nums; }
.cup-clock { margin: 0; font-size: var(--type-head); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cup-desc, .cup-prizes, .cup-note { margin: 0; color: var(--ink-2); font-size: var(--type-read); overflow-wrap: anywhere; }
.cup-warn { color: var(--warn); }
.cup-you, .cup-join { display: grid; gap: var(--step-3); padding: var(--step-4); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-1); }
.cup-acts, .cup-card-acts, .cup-round-pick { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.cup-card { display: grid; gap: var(--step-2); padding: var(--step-4); border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-2); }
.cup-card[data-cup-state="playing"], .cup-card[data-cup-state="time"], .cup-card[data-cup-state="waiting"] { border-color: var(--ink-3); }
.cup-card > p { margin: 0; }
.cup-card-where { color: var(--ink-3); font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; }
.cup-card-vs { font-size: var(--type-head); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.cup-card-state { display: flex; flex-wrap: wrap; gap: var(--step-2); align-items: baseline; color: var(--ink-2); }
.cup-card-pill { padding: 1px var(--step-2); border-radius: var(--round-pill); background: var(--surface-1); font-size: var(--type-note); }
.cup-card-games, .cup-card-clock, .cup-card-extra { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cup-card-extra { color: var(--warn); font-weight: 600; }
.cup-card-bye, .cup-card-result { font-weight: 600; }
.cup-field { display: grid; gap: var(--step-1); max-width: 20rem; }
.cup-field-label { font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.cup-field-hint { color: var(--ink-3); font-size: var(--type-note); }
.cup-input {
  box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 var(--step-3);
  border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-1); color: var(--ink-1);
  font: inherit; font-size: var(--type-body); letter-spacing: 0.08em; text-transform: uppercase;
}
.cup-input:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
:root[data-input="touch"] .cup-input { min-height: var(--touch); }
.cup-deck-group { margin: 0; font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.cup-decks, .cup-tables, .cup-lists, .cup-mine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step-1); }
.cup-picker { display: grid; gap: var(--step-2); max-height: 22rem; overflow: auto; }
.cup-deck {
  width: 100%; min-height: 36px; padding: var(--step-2) var(--step-3); text-align: left;
  border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-ground); color: var(--ink-1);
  font: inherit; font-size: var(--type-body); cursor: pointer; overflow-wrap: anywhere;
}
.cup-deck.on { border-color: var(--ink-1); background: var(--surface-2); font-weight: 600; }
.cup-deck:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
:root[data-input="touch"] .cup-deck { min-height: var(--touch); }
.cup-tabs { display: flex; gap: var(--step-1); border-bottom: 1px solid var(--line-1); }
.cup-tab {
  min-height: 36px; padding: 0 var(--step-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2);
  font: inherit; font-size: var(--type-read); font-weight: 600; cursor: pointer;
}
.cup-tab.on { color: var(--ink-1); border-bottom-color: var(--ink-1); }
.cup-tab:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-in); }
:root[data-input="touch"] .cup-tab { min-height: var(--touch); }
.cup-pane { display: grid; gap: var(--step-3); }
.cup-table {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--step-3); align-items: baseline;
  padding: var(--step-3); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-1);
}
.cup-table.is-mine { border-color: var(--you); background: var(--you-wash); }
.cup-table-n { color: var(--ink-3); font-size: var(--type-note); }
.cup-table-vs { overflow-wrap: anywhere; }
.cup-table-state { color: var(--ink-2); font-size: var(--type-body); text-align: right; }
.cup-table-replay { color: var(--ink-2); font-size: var(--type-body); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.cup-h3 { margin: 0; font-size: var(--type-read); font-weight: 600; color: var(--ink-2); }
.cup-champion { margin: 0; font-size: var(--type-head); font-weight: 600; overflow-wrap: anywhere; }
.cup-bracket-round { display: grid; gap: var(--step-2); }
.cup-bracket .cup-table { grid-template-columns: minmax(0, 1fr) auto; }
.cup-seeds { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-1); }
.cup-seed { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--step-2); align-items: baseline; padding: var(--step-2) var(--step-3); border-bottom: 1px solid var(--line-1); }
.cup-seed.is-mine { background: var(--you-wash); }
.cup-seed.is-out { color: var(--ink-3); }
.cup-seed-n { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.cup-seed-name { font-weight: 600; overflow-wrap: anywhere; }
.cup-seed-note { color: var(--ink-3); font-size: var(--type-note); }
.cup-standings-wrap { display: grid; gap: var(--step-2); }
.cup-st-head, .cup-st { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 4rem 4.5rem; gap: var(--step-2); align-items: baseline; padding: var(--step-2) var(--step-3); }
.cup-st-head { color: var(--ink-3); font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; }
.cup-standings { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-1); }
.cup-st { border-bottom: 1px solid var(--line-1); font-variant-numeric: tabular-nums; }
.cup-st.is-mine { background: var(--you-wash); }
.cup-st.is-out { color: var(--ink-3); }
.cup-st-who { display: grid; min-width: 0; }
.cup-st-name { font-weight: 600; overflow-wrap: anywhere; }
.cup-st-line { display: flex; align-items: baseline; gap: var(--step-2); min-width: 0; }

@media (max-width: 599px) { .cup-st-title { display: none; } }
.cup-st-note { color: var(--ink-3); font-size: var(--type-note); }
.cup-st-tb { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--step-1) var(--step-4); color: var(--ink-3); font-size: var(--type-note); }
.cup-st-pts, .cup-st-rec { text-align: right; }
.cup-list { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: var(--step-3); padding: var(--step-2) var(--step-3); border-bottom: 1px solid var(--line-1); }
.cup-list-code { font: var(--type-note) / 1.4 var(--mono); overflow-wrap: anywhere; }
.cup-mine-link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--step-3); align-items: baseline; padding: var(--step-3); border: 1px solid var(--line-1); border-radius: var(--round-2); background: var(--surface-1); color: inherit; text-decoration: none; }
@media (hover: hover) { .cup-mine-link:hover { background: var(--surface-2); } }
.cup-mine-link:focus-visible { outline: var(--ring-w) solid var(--focus); outline-offset: var(--ring-off); }
.cup-mine-name { font-weight: 600; overflow-wrap: anywhere; }
.cup-mine-state, .cup-mine-round { color: var(--ink-2); font-size: var(--type-body); }
.ev-onsite { display: grid; gap: var(--step-3); }


.cup-band {
  display: grid; justify-items: start; gap: var(--step-2); box-sizing: border-box; padding: var(--step-3) var(--step-4);
  border: 1px solid var(--line-2); border-radius: var(--round-2); background: var(--surface-overlay); color: var(--ink-1);
  box-shadow: var(--win-shadow); text-align: left;
}
.cup-band > p { margin: 0; }
.cup-band.is-new { border-color: var(--ink-1); background: var(--surface-2); }
.cup-band-kicker { font-size: var(--type-note); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.cup-band-lead { font: 500 var(--type-deck-name) / 1.25 var(--font-display); letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.cup-band-clock, .cup-band-extra { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--type-body); }
.cup-band-extra { color: var(--warn); font-weight: 600; }
.cup-band-acts { display: flex; flex-wrap: wrap; gap: var(--step-2); }
.cup-band.is-strip { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--step-3); padding: var(--step-2) var(--step-3); }
.cup-band.is-strip .cup-band-lead { font-size: var(--type-body); }
.room-cup { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--step-3); color: var(--ink-2); font-size: var(--type-body); font-variant-numeric: tabular-nums; }
.room-cup-extra { color: var(--warn); font-weight: 600; }
.room-cup-back { color: inherit; }

@media (max-width: 600px) {
  .cup-table { grid-template-columns: minmax(0, 1fr) auto; }
  .cup-table-n { grid-column: 1 / -1; }
  .cup-st-head, .cup-st { grid-template-columns: 2rem minmax(0, 1fr) 3rem 3.5rem; }
  .cup-list { grid-template-columns: minmax(0, 1fr); }
  .cup-mine-link { grid-template-columns: minmax(0, 1fr); gap: var(--step-1); }
  .cup-band.is-strip { grid-auto-flow: row; }
}
