/* mikumikubet: a plain, quiet, document-like page (the WebHome / WebHomePhone boards). */
:root {
  --bg: #fbfaf7;
  --ink: #1d1f24;
  --muted: #5d636e;
  --link: #0b6e67;
  --link-hover: #084f4a;
  --rule: #d6d2c8;
  --row: #ebe8e1;
  --pink: #d81b72;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
summary { cursor: pointer; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* The header: the mascot's head sits on the bar's bottom edge (LogoE, "WEBSITE HEADER"). */
.bar { border-bottom: 1px solid var(--rule); }
.bar-in {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
  height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: flex; align-items: flex-end; gap: 14px; text-decoration: none; color: #1d2230; }
.logo:hover { color: #1d2230; }
.logo img { display: block; height: 70px; width: auto; }
.wordmark {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  white-space: nowrap;
  padding-bottom: 14px;
}
.wordmark .bet { color: var(--pink); }
.watch { font-size: 15px; padding-bottom: 18px; white-space: nowrap; }

.page { max-width: 880px; margin: 0 auto; padding: 28px 20px 64px; }
.intro { margin: 0; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 10px; font-size: 15px; }
nav a { padding: 8px 0; }

section { margin-top: 56px; }
h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.sub b { color: var(--ink); }
.muted { color: var(--muted); }
.empty { margin: 0; color: var(--muted); }

/* Plain tables */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--row); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
.num { text-align: right; white-space: nowrap; }
.nw { white-space: nowrap; }
.rank { width: 28px; color: var(--muted); }
.owner { display: block; font-size: 13px; color: var(--muted); }
.pool { min-width: 560px; }
.ranked td { padding-top: 9px; padding-bottom: 9px; }
.ranked th, .ranked td { padding-right: 10px; }
.ranked th:last-child, .ranked td:last-child { padding-right: 0; }

#rankings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 56px;
  align-items: start;
}
#rankings > div { min-width: 0; }

/* Past tournaments */
.cup { padding: 14px 0; border-bottom: 1px solid var(--row); }
.cup-name { font-weight: 700; }
.cup details { margin-top: 4px; }
.cup summary { color: var(--link); font-size: 15px; padding: 6px 0; }
.rounds { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px 18px; font-size: 15px; }
.round-name { font-size: 13px; font-weight: 700; color: var(--muted); }

footer { margin-top: 72px; font-size: 14px; color: var(--muted); }

/* Wide and narrow variants (WebHome / WebHomePhone) */
.only-narrow { display: none; }

@media (max-width: 600px) {
  .bar-in { height: 72px; padding: 0 16px; }
  .logo { gap: 10px; }
  .logo img { height: 52px; }
  .wordmark { font-size: 30px; padding-bottom: 10px; }
  .watch { padding: 8px 0 12px; }
  .page { padding: 22px 16px 48px; }
  section { margin-top: 44px; }
  .pool { min-width: 0; }
  .only-wide { display: none; }
  .only-narrow { display: revert; }
  .owner.only-narrow { display: block; }
}

@media (max-width: 340px) {
  .wordmark { font-size: 26px; }
  .logo img { height: 44px; }
}