:root {
  --bg: #f6f5f1;
  --panel: #ffffff;
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --line: #ddd8cf;
  --head: #2b2b2b;
  --accent: #8a1c1c;
  --up: #2a6899;
  --down: #b3261e;
  --same: #6b6b6b;
  --up-bg: #e1ebf3;
  --down-bg: #fbe6e4;
  --up-border: #9db7c9;
  --down-border: #e2a9a4;
  --gold-bg: #faf1c8;
  --bronze-bg: #f1decb;
  --gold: #d4af37;
  --gold-dark: #a8842a;
  --bronze: #cd7f32;
  --bronze-dark: #a5641f;
  --over: #ffe9a8;
  --joi-bg: #f5f5f5;
  --candidates-bg: #eef3f7;
  --demotion-bg: #fbeeed;
  --chip: #fbfaf7;
  --chip-border: #cfc8bb;
  --selected: #dbeafe;
  --line-h: 26px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  opacity: 1; transition: opacity .15s ease-in;
}
/* Keeps the page invisible (but laid out) until main.js has loaded everything and shows it all
   at once; js/main.js removes this class once the page is ready or has failed with an error. */
html.loading body { opacity: 0; transition: none; }
h1 { margin: 0; font-size: 22px; }
h2 { margin: 0 0 8px; font-size: 16px; }
p { margin: 4px 0; }
a { color: var(--accent); }

.topbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px 20px 10px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.topbar p { color: var(--muted); }
/* A fixed height taller than the title text, so it (not the text) sets the banner's height;
   negative top/bottom margins matching .topbar's own padding then cancel that padding out,
   landing the wrap's edges flush on the banner's actual top and bottom edges. overflow: hidden
   is what turns the slide animation into a slide "into"/"out of" the bottom border. */
.banner-wrap { height: 80px; margin: -14px 0 -10px; overflow: hidden; position: relative; }
.banner-photo {
  height: 80px; width: auto; display: block;
  transition: transform .175s ease-in-out;
}
.banner-photo.banner-photo--sliding { transform: translateY(100%); }
.banner-photo.banner-photo--jump { transition: none; }
.controls { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.summary { color: var(--muted); }
button, select, .button-link {
  font: inherit; padding: 6px 12px; border: 1px solid var(--chip-border); border-radius: 6px;
  background: var(--chip); cursor: pointer; white-space: pre-line;
}
button:hover, .button-link:hover { background: #f0ede6; }
button:disabled { cursor: default; color: var(--muted); background: var(--chip); }
button.button-error:disabled { color: var(--down); font-weight: 600; }
.button-link { display: inline-block; color: inherit; text-decoration: none; line-height: 1.4; text-align: center; }

/* Submit Guess: the "<shikona>, come back <date>" note and the shikona popover under the button. */
.submitted-note { color: var(--muted); font-size: 12px; max-width: 220px; text-align: right; }
.submit-wrap { position: relative; }
.shikona-box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.shikona-box label { display: block; font-weight: 600; margin-bottom: 6px; }
.shikona-box .row { display: flex; gap: 6px; }
.shikona-box input { flex: 1; min-width: 0; font: inherit; padding: 5px 8px; border: 1px solid var(--chip-border); border-radius: 6px; }
.form-error { display: block; min-height: 1.4em; margin-top: 4px; color: var(--down); font-size: 12px; font-weight: 600; }

/* Results view: prediction vs banzuke on top, my score + leaderboard and a clicked prediction below. */
.results { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.results[hidden] { display: none; }
.results h3 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* Without a submission, #my-results-section is hidden and "Leaderboard" becomes the panel's
   first visible child; its usual top margin (there to separate it from "My Results" above)
   would otherwise leave a gap where that section used to be. */
#my-results-section[hidden] + h3 { margin-top: 0; }
.chip.correct { background: var(--up-bg); border-color: var(--up-border); color: var(--up); cursor: default; }
.chip.wrong { background: var(--down-bg); border-color: var(--down-border); color: var(--down); cursor: default; }
.banzuke.compare td { height: var(--line-h); }
.score { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; align-items: baseline; }
.score dt { font-weight: 600; color: var(--muted); }
.score dd { margin: 0; font-variant-numeric: tabular-nums; }
.score dd.total { font-weight: 700; }
table.leaderboard { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.leaderboard th { background: var(--head); color: #fff; font-weight: 600; font-size: 12px; padding: 6px; text-align: center; }
.leaderboard td { border: 1px solid var(--line); padding: 3px 8px; text-align: center; }
.leaderboard td:nth-child(2) { text-align: left; }
.leaderboard tr.me td { background: var(--up-bg); }
.leaderboard td.total { font-weight: 700; }
.leaderboard caption { caption-side: bottom; padding: 8px; color: var(--muted); font-size: 12px; }
.leaderboard button.link { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 1200px) { .results { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .results { grid-template-columns: 1fr; } }

.panels {
  /* The prediction column is sized to its own content (max-content) rather than a flexible fr
     share, so it only ever claims the width its East/West columns actually need; the results
     column (1fr) gets whatever's left, which keeps it from being squeezed into scroll mode when
     a long name lands on the prediction side. If space is genuinely short, max-content tracks
     are resolved before flexible ones, so the prediction table still wins. */
  display: grid; grid-template-columns: 200px minmax(360px, 1fr) minmax(500px, max-content); gap: 16px;
  padding: 16px 20px 24px; align-items: start;
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }

/* Sidebar (Tools + Legend): a narrow sticky column on wide screens, a full-width strip above the
   tables otherwise. */
.sidebar {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.tools, .pages { display: flex; flex-direction: column; gap: 8px; }
.tools h2, .pages h2 { margin-bottom: 0; }
.tools button, .pages button { width: 100%; }
.pages button.active { background: var(--head); color: #fff; border-color: var(--head); }
.past { display: flex; flex-direction: column; gap: 8px; }
.past h2 { margin-bottom: 0; }
.past select { width: 100%; }
.past .hint { margin: 0; }
.panel[hidden], select[hidden] { display: none; }
.legend { font-size: 12px; }
.legend h3 { margin: 18px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.legend h2 + h3 { margin-top: 0; }
.legend dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 0; align-items: baseline; }
.legend dt { font-weight: 700; white-space: nowrap; }
.legend dd { margin: 0; color: var(--muted); }
@media (max-width: 1200px) {
  .panels { grid-template-columns: minmax(360px, 1fr) minmax(560px, max-content); }
  .sidebar { position: static; max-height: none; overflow: visible; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .tools, .pages { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; align-self: flex-start; }
  .tools button, .pages button { width: auto; }
  .legend { flex: 1 1 360px; }
  .legend h3 { margin-top: 14px; }
  .legend dl { grid-template-columns: auto 1fr auto 1fr; }
}
@media (max-width: 700px) { .legend dl { grid-template-columns: auto 1fr; } }
@media (max-width: 1000px) { .panels { grid-template-columns: 1fr; } }
.hint { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.table-wrap { overflow-x: auto; }

table.banzuke { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.banzuke th {
  position: sticky; top: 0; z-index: 1;
  background: var(--head); color: #fff; font-weight: 600; font-size: 12px; padding: 6px 6px; text-align: center;
}
/* The guess table's two-word headers ("Cur Rank", "Net Wins", "Rank Change") wrap onto two lines
   at this width, making its header row taller than the previous table's single-line one.
   Thickening the previous table's header row to match keeps every row below it lined up between
   the two side-by-side tables in the Predict view. */
.banzuke.previous th { height: 46px; }
.banzuke td { border: 1px solid var(--line); padding: 2px 6px; vertical-align: top; }
.banzuke td.rank { position: relative; text-align: center; font-weight: 700; white-space: nowrap; background: #faf8f3; width: 1%; }
.banzuke td.result, .banzuke td.cur-rank, .banzuke td.change-cell { text-align: center; white-space: nowrap; width: 1%; color: var(--muted); }
.banzuke td.rikishi { min-width: 120px; }
/* Capped (not just floored) at the same width, unlike the previous table's rikishi column: with
   badges and Rank Change/Cur Rank numbers filling in (e.g. after Apply Ideal Rank Changes), an
   uncapped column would grow to fit its widest chip, squeezing the previous table's 1fr column
   out of the space it needs. A long name+badges combo just ellipses instead. */
.banzuke.guess td.rikishi { min-width: 92px; max-width: 92px; overflow: hidden; }
.banzuke.guess td.rikishi .chip { max-width: 100%; }
.banzuke.guess td.rikishi .chip .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banzuke.guess td.rikishi .chip > *:not(.name) { flex: 0 0 auto; }
.banzuke tr.division td { background: #efece4; font-weight: 700; text-align: left; padding: 4px 8px; letter-spacing: .02em; }
tr.sanyaku-gold td { background: var(--gold-bg); }
tr.sanyaku-bronze td { background: var(--bronze-bg); }
tr.sanyaku-gold td.rank { background: var(--gold-bg); }
tr.sanyaku-bronze td.rank { background: var(--bronze-bg); }
tr.sanyaku-gold td.slot.empty { background: var(--gold-bg); }
tr.sanyaku-bronze td.slot.empty { background: var(--bronze-bg); }
tr.joi td { background: var(--joi-bg); }
tr.joi td.rank { background: var(--joi-bg); }
/* Temporary candidates row (see candidatesRow in banzuke.js): promotion half blue, demotion half red. */
tr.candidates td { background: var(--candidates-bg); border-top: 1px dashed var(--up); border-bottom: 1px dashed var(--up); }
tr.candidates td.demotion { background: var(--demotion-bg); border-top-color: var(--down); border-bottom-color: var(--down); }
tr.candidates td.rank { background: var(--candidates-bg); font-size: 16px; }
tr.candidates td.rank .up { color: var(--up); }
tr.candidates td.rank .down { color: var(--down); margin-left: 2px; }
tr.candidates td.note { color: var(--muted); font-size: 12px; vertical-align: middle; }
tr.candidates .placeholder { color: var(--muted); font-size: 12px; }

.line, .banzuke.previous td { height: var(--line-h); line-height: 22px; }
.banzuke.previous td { padding-top: 2px; padding-bottom: 2px; }
.stack { display: flex; flex-direction: column; min-height: var(--line-h); }
.line { display: flex; align-items: center; justify-content: center; }
td.rikishi .line { justify-content: flex-start; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 1px 8px; border: 1px solid var(--chip-border); border-radius: 12px; background: var(--chip);
  cursor: grab; user-select: none; white-space: nowrap;
}
.chip:active { cursor: grabbing; }
.chip .name { font-weight: 600; }
.chip.placed { opacity: .45; cursor: default; border-style: dashed; }
.chip.placed .dest { color: var(--accent); font-size: 11px; }
.chip.retired .name { text-decoration: line-through; }
.chip.dragging { opacity: .4; }
.chip.kind-up { background: var(--up-bg); }
.chip.kind-down { background: var(--down-bg); }
.chip.selected { background: var(--selected); border-color: #60a5fa; }
.tag { font-size: 10px; padding: 0 5px; border-radius: 8px; background: #e8dcc5; color: #5b4a2a; white-space: nowrap; }
/* Indicator badges (badges() in banzuke.js): neutral by default, then blue/red once the result decides them. */
.tag-yusho { background: none; padding: 0; font-size: 13px; line-height: 14px; }
.tag-kadoban, .tag-tsunatori, .tag-ozeki-run, .tag-ozeki-return, .tag-komusubi-force, .tag-maegashira-force, .tag-suspended, .tag-retired { background: #e6e2d8; color: #3a3a3a; font-weight: 700; }
.tag-met { background: var(--up-bg); color: var(--up); border: 1px solid var(--up-border); }
.tag-missed { background: var(--down-bg); color: var(--down); border: 1px solid var(--down-border); }

td.slot.over, tbody.over td { background: var(--over) !important; }
.drag-active td.slot, .selecting td.slot { cursor: copy; }
.selecting tbody[data-dropzone="previous"] { outline: 2px dashed #60a5fa; outline-offset: -2px; }

.change { font-weight: 700; }
.change.up { color: var(--up); }
.change.down { color: var(--down); }
.change.same { color: var(--same); }
.change .sub { color: var(--muted); font-weight: 400; }

.drag-ghost {
  position: fixed; z-index: 1000; pointer-events: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px; border-radius: 12px;
  background: var(--chip); border: 1px solid var(--chip-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.drag-ghost[hidden] { display: none; }
.ghost-name { font-weight: 600; font-size: 13px; }
.ghost-sep { align-self: stretch; width: 1px; background: var(--chip-border); opacity: .6; }
.ghost-change { font-weight: 700; font-size: 13px; }
.ghost-change.up { color: var(--up); }
.ghost-change.down { color: var(--down); }
.ghost-change.same { color: var(--same); }
.ghost-change-sub { color: var(--muted); font-weight: 400; }

/* Sits on the border shared with the next row, out of normal flow, so it never affects row
   height and every rank label stays vertically centered the same way. */
.rank-controls {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  display: flex; gap: 2px; z-index: 2;
}
.rank-controls .row-btn {
  padding: 0 3.2px; font-size: 7.2px; line-height: 9.6px; border-radius: 4.8px;
}
.rank-controls .row-btn-gold { background: var(--gold-bg); }
.rank-controls .row-btn-bronze { background: var(--bronze-bg); }
.rank-controls .row-btn-gold:hover { background: var(--gold); }
.rank-controls .row-btn-bronze:hover { background: var(--bronze); }

.foot { padding: 8px 20px 20px; color: var(--muted); font-size: 12px; }