/* tokens, reset, type, links, buttons, inputs, tables */
/* basho.dev — dark, monospace, east red / west blue, one gold accent (the dohyo). */
:root {
  --bg: #0f0f12;
  --panel: #16161b;
  --fill: #0a0a0d;
  --line: #2b2b33;
  --fg: #e6e4de;
  --dim: #8f8e97;
  --gold: #c9a24a;
  --east: #d9563c;
  --east-soft: rgba(217, 86, 60, 0.12);
  --west: #4d8ee0;
  --west-soft: rgba(77, 142, 224, 0.12);
  --east-ink: #f2ded8;   /* off-white, warmed toward east */
  --west-ink: #dde8f5;   /* off-white, cooled toward west */
  --danger: #d9563c;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --reading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure: 76ch;
  --radius: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);         /* expo-out: fast start, long soft landing */
  --ease-pop: cubic-bezier(.34, 1.45, .64, 1); /* back-out: a little overshoot, for pops */
  --ease-io: cubic-bezier(.45, 0, .55, 1);     /* sine in-out: for breathing loops */
  --fast: 180ms; --mid: 380ms; --slow: 720ms;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root { --ease-pop: linear(0, .008 1.1%, .031 2.2%, .129 4.8%, .257 7.2%, .671 14.2%, .789 16.9%, .881 19.7%, .957 23%, 1.008 26.6%, 1.038 30.7%, 1.048 36.6%, 1.03 47.9%, 1.006 68.7%, 1); }
}
:root { --text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, .7), 0 0 22px rgba(0, 0, 0, .4); }
/* dark-on-light spots (gold seals, gold buttons, the yokozuna chip) carry no halo:
   the dark shadow only ever pairs with light text */
.seal, button, .button, .stamp .hanko, .rank.yokozuna { text-shadow: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  background-image: radial-gradient(1100px 500px at 50% -120px, rgba(201, 162, 74, .07), transparent 70%);
  font: 14px/1.5 var(--mono);
  /* every letter sits a hair off the page: crisp edge, a soft dark halo (inherits everywhere) */
  text-shadow: var(--text-shadow);
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* the display face: sumo's numbers and names in mincho where they carry weight */
:root { --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", "Noto Serif JP", "Source Han Serif", serif; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
a:hover { border-color: var(--gold); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: 22px; } h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
p { margin: 0 0 1em; }
code, pre { font-family: var(--mono); }
code { background: var(--panel); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line); }
pre { background: var(--fill); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; overflow-x: auto; white-space: pre-wrap; font-size: 12.5px; }
.dim { color: var(--dim); } .small { font-size: 12px; }
button, .button {
  font: inherit; color: var(--bg); background: var(--gold); border: 0; border-radius: var(--radius);
  padding: 8px 14px; cursor: pointer; display: inline-block; font-weight: 600;
}
button, .button { transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), filter var(--fast) var(--ease); }
button:hover, .button:hover { filter: brightness(1.08); border-color: transparent; transform: translateY(-1.5px); transition-timing-function: var(--ease-pop); box-shadow: 0 6px 18px -8px rgba(201, 162, 74, .7); }
button:active, .button:active { transform: translateY(0) scale(.985); box-shadow: none; transition-duration: 60ms; }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
button.danger:hover { box-shadow: 0 6px 18px -8px rgba(217, 86, 60, .7); border-color: var(--danger); }
.button.wide { display: block; text-align: center; }
input, textarea, select {
  font: inherit; color: var(--fg); background: var(--fill); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 10px; width: 100%;
}
input, textarea, select { transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
input.secret { -webkit-text-security: disc; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, .15); }
label { display: block; margin-bottom: 14px; color: var(--dim); font-size: 12px; }
label input, label textarea, label select { margin-top: 4px; color: var(--fg); font-size: 14px; }
table { border-collapse: collapse; width: 100%; }
td, th { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--dim); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
/* a wide table on a narrow screen scrolls inside its own box, never the page */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* kamon: every wrestler's crest, currentColor so it takes the side it stands on */
.kamon { flex: none; vertical-align: middle; display: inline-block; }
.banzuke-mini .kamon { color: var(--dim); opacity: .9; }
.tachiai .name .kamon { width: 1.05em; height: 1.05em; vertical-align: -0.15em; opacity: .9; }
.crest { display: inline-block; margin-right: 8px; color: var(--gold); vertical-align: middle; }
table.ladder td .crest .kamon { vertical-align: -5px; }
.whead { position: relative; }
.whead h1 .crest .kamon { color: var(--gold); }
.shikiri .w .kamon, .shikiri .e .kamon { vertical-align: -0.3em; margin: 0 .3em; opacity: .85; }

/* the mark beside a name: where the contender stands; .mine: the viewer's own */
.mark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: var(--dim); }
.mark.queued { background: #3fa34d; }
.mark.fighting { background: #d9563c; box-shadow: 0 0 0 2px rgba(217, 86, 60, .3); }
.mark.resting { background: var(--gold); }
.mark.retired { background: var(--dim); opacity: .6; }
.who.mine { color: var(--gold); font-weight: 700; }