/* =====================================================================
   kappasumo.com — "banzuke" stylesheet
   ---------------------------------------------------------------------
   The look is borrowed from sumo print culture rather than from dashboard
   UI: unbleached paper (kinari), sumi ink, hairline rules, sharp corners,
   a vermilion seal, a mincho (serif) display face, and seigaiha waves in
   the margins. Wins and losses use the real hoshitori marks — ○ shiroboshi
   for a win, ● kuroboshi for a loss — not W/L.

   Two themes, both first-class: paper (light, default) and sumi (dark).
   The theme follows the OS unless the reader picks one, which sticks.
   ===================================================================== */

/* ArchivoNarrow is served from the sumo-obs font dir via the nginx alias;
   everything else is a system stack, so the site makes no third-party
   request. That is deliberate — a webfont CDN would hand every visitor's
   IP to a third party, which is exactly what the picks system avoids. */
@font-face { font-family:'ArchivoN'; src:url('../fonts/ArchivoNarrow-SemiBold.woff') format('woff'); font-weight:600; font-display:swap; }

/* ---------------------------------------------------------------------
   Theme tokens
   --------------------------------------------------------------------- */
:root{
  --paper:    #f4efe4;   /* kinari — unbleached cloth */
  --paper-2:  #ece4d4;
  --paper-3:  #e2d8c4;
  --ink:      #1f1a16;   /* sumi */
  --ink-2:    #4b4239;
  --muted:    #837767;
  --shu:      #b3392f;   /* vermilion — west, seals */
  --ai:       #27496f;   /* indigo — east */
  --kin:      #9c7c2a;   /* old gold */
  --win:      #2f6b46;
  --lose:     #a2453c;
  --live:     #29a745;   /* stream-is-up green */
  --live-glow:rgba(41,167,69,.55);
  --rule:     rgba(31,26,22,.22);
  --rule-2:   rgba(31,26,22,.10);
  --sunk:     rgba(31,26,22,.045);
  --seigaiha: rgba(31,26,22,.07);
  --shadow:   0 1px 0 rgba(31,26,22,.06);

  --font-display:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho','YuMincho',
                 'Noto Serif JP','Songti SC',Georgia,'Times New Roman',serif;
  --font-body:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',
              'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-label:'ArchivoN','Archivo Narrow',var(--font-body);

  --wrap:1140px;
  --gut:20px;
}

:root[data-theme="sumi"]{
  --paper:    #15120f;
  --paper-2:  #1d1915;
  --paper-3:  #262019;
  --ink:      #efe7d8;
  --ink-2:    #cabfae;
  --muted:    #968a79;
  --shu:      #dd6a5c;
  --ai:       #74a6d8;
  --kin:      #cfa646;
  --win:      #6cc08d;
  --lose:     #e08074;
  --live:     #4ade80;
  --live-glow:rgba(74,222,128,.5);
  --rule:     rgba(239,231,216,.20);
  --rule-2:   rgba(239,231,216,.09);
  --sunk:     rgba(239,231,216,.04);
  --seigaiha: rgba(239,231,216,.06);
  --shadow:   none;
}

/* OS preference, only while the reader has not chosen. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="paper"]){
    --paper:#15120f; --paper-2:#1d1915; --paper-3:#262019;
    --ink:#efe7d8; --ink-2:#cabfae; --muted:#968a79;
    --shu:#dd6a5c; --ai:#74a6d8; --kin:#cfa646;
    --win:#6cc08d; --lose:#e08074;
    --live:#4ade80; --live-glow:rgba(74,222,128,.5);
    --rule:rgba(239,231,216,.20); --rule-2:rgba(239,231,216,.09);
    --sunk:rgba(239,231,216,.04); --seigaiha:rgba(239,231,216,.06);
    --shadow:none;
  }
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
html,body{ max-width:100%; overflow-x:clip; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--shu); outline-offset:2px;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.muted{ color:var(--muted); }

/* Seigaiha (青海波) — the wave pattern on sign boards and yukata. */
.waves{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='1'%3E%3Ccircle cx='36' cy='36' r='33'/%3E%3Ccircle cx='36' cy='36' r='24'/%3E%3Ccircle cx='36' cy='36' r='15'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Ccircle cx='0' cy='36' r='33'/%3E%3Ccircle cx='0' cy='36' r='24'/%3E%3Ccircle cx='0' cy='36' r='15'/%3E%3Ccircle cx='72' cy='36' r='33'/%3E%3Ccircle cx='72' cy='36' r='24'/%3E%3Ccircle cx='72' cy='36' r='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 36px;
  opacity:.22;          /* a texture in the margin, not a competing layer */
}
:root[data-theme="sumi"] .waves{ filter:invert(1); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="paper"]) .waves{ filter:invert(1); }
}

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.15; }

/* Kanji heading with a romaji sub-label — used for every section title. */
.kanji{ font-family:var(--font-display); letter-spacing:.14em; }
.romaji{
  font-family:var(--font-label); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); display:block; margin-top:.35em;
}

.seal{
  display:inline-grid; place-items:center; flex:none;
  width:2.1em; height:2.1em; background:var(--shu); color:#fff;
  font-family:var(--font-display); font-size:.82rem; line-height:1;
  letter-spacing:0; border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

.rule-double{ border-top:3px double var(--rule); }

/* ---------------------------------------------------------------------
   Header — noren bar
   --------------------------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.masthead::after{
  content:''; display:block; height:3px;
  background:linear-gradient(90deg,var(--ai) 0 33.3%,var(--paper-3) 33.3% 66.6%,var(--shu) 66.6%);
  opacity:.85;
}
.masthead .bar{
  display:flex; align-items:center; gap:16px;
  max-width:var(--wrap); margin:0 auto; padding:10px var(--gut);
}

.wordmark{ display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; }
.wordmark .txt{ min-width:0; }
/* The logo is a detailed wordmark plaque, not a small mark -- it needs
   real height to stay legible. */
.wordmark img{ height:54px; width:auto; display:block; }
.wordmark .ph{ width:130px; height:54px; }
.wordmark .txt{ line-height:1.05; }
.wordmark .jp{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.1em; display:block; }
.wordmark .en{ font-family:var(--font-label); font-size:.62rem; letter-spacing:.3em;
               text-transform:uppercase; color:var(--muted); display:block; }

nav.main{ display:flex; gap:4px; margin-left:auto; align-items:center; }
nav.main a{
  padding:6px 12px; text-align:center; border-bottom:2px solid transparent;
}
nav.main a .jp{ font-family:var(--font-display); font-size:1rem; letter-spacing:.08em; display:block; }
nav.main a .en{ font-family:var(--font-label); font-size:.58rem; letter-spacing:.18em;
                text-transform:uppercase; color:var(--muted); display:block; }
nav.main a:hover{ background:var(--sunk); }
nav.main a[aria-current="page"]{ border-bottom-color:var(--shu); }
nav.main a[aria-current="page"] .en{ color:var(--shu); }

.tools{ display:flex; align-items:center; gap:8px; flex:none; }

/* Live lamp — links to Twitch, colour says whether the stream is up. */
.lamp{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--rule); padding:5px 10px;
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.lamp i{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none; }
.lamp:hover{ border-color:var(--ink); color:var(--ink); }
.lamp[data-live="1"]{ border-color:var(--live); color:var(--live); }
.lamp[data-live="1"] i{
  background:var(--live);
  animation:glow 2.6s ease-in-out infinite;
}
/* Breathes out and back rather than blinking -- it should read as "on air",
   not as an alarm. Halted entirely under prefers-reduced-motion below. */
@keyframes glow{
  0%,100%{ box-shadow:0 0 3px 0 var(--live-glow); transform:scale(.88); opacity:.75; }
  50%    { box-shadow:0 0 12px 4px var(--live-glow); transform:scale(1.12); opacity:1; }
}

.toggle{
  border:1px solid var(--rule); background:transparent; color:var(--muted);
  width:34px; height:30px; cursor:pointer; font-size:.95rem; line-height:1;
  display:grid; place-items:center; padding:0;
}
.toggle:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------------------------------------------------------------------
   Image slots
   --------------------------------------------------------------------- */
.slot{ display:block; width:100%; height:auto; }
.ph{
  display:grid; place-items:center; align-content:center; gap:3px; text-align:center;
  background:var(--paper-2); border:1px dashed var(--rule); color:var(--muted); padding:14px;
  min-height:70px;
}
.ph b{ font-family:var(--font-label); font-size:.72rem; letter-spacing:.14em;
       text-transform:uppercase; color:var(--ink-2); display:block; }
.ph span{ font-family:var(--font-label); font-size:.64rem; letter-spacing:.1em; }

/* ---------------------------------------------------------------------
   Hero — a banzuke sheet
   --------------------------------------------------------------------- */
.sheet{ position:relative; border-bottom:1px solid var(--rule); overflow:hidden;
        background:var(--paper-2); }
.sheet .waves{ position:absolute; inset:0; pointer-events:none; }
.sheet .inner{
  position:relative; max-width:var(--wrap); margin:0 auto; padding:34px var(--gut) 30px;
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
}
.sheet .title-jp{
  font-family:var(--font-display); font-size:clamp(2.2rem,7vw,3.4rem);
  writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.16em;
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  padding:.35em .22em; margin:0; color:var(--ink);
}
.sheet h1{ font-size:clamp(1.6rem,4.4vw,2.5rem); letter-spacing:.05em; margin:0 0 6px; }
.sheet h1 .k{ color:var(--shu); }
.sheet .lede{ margin:0; max-width:52ch; color:var(--ink-2); }
.sheet .event{
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.sheet .banner{ margin:20px 0 0; grid-column:1/-1; }

/* ---------------------------------------------------------------------
   Hero stage — banner art, or the live stream when it is up
   ---------------------------------------------------------------------
   The banner and the player are stacked in the same box and cross-faded.
   The box keeps the banner's own aspect ratio while idle (set from the
   image's natural size by sumo.js, so swapping the art changes nothing)
   and grows to 16:9 when the stream takes over, because a letterboxed
   player in a 8:3 slot wastes most of the picture.
   --------------------------------------------------------------------- */
.stage{
  position:relative;
  aspect-ratio:var(--idle-ratio, 8 / 3);
  background:var(--paper-2);
  overflow:hidden;
  transition:aspect-ratio .55s ease;
}
.stage.live{ aspect-ratio:16 / 9; }

.stage > img,
.stage > .ph,
.stage > iframe{
  position:absolute; inset:0; width:100%; height:100%;
}
.stage > img{ object-fit:cover; }
.stage > img,
.stage > .ph{ opacity:1; transition:opacity .55s ease; }
.stage.live > img,
.stage.live > .ph{ opacity:0; }

.stage > iframe{ border:0; opacity:0; transition:opacity .55s ease; pointer-events:none; }
.stage.live > iframe{ opacity:1; pointer-events:auto; }

/* a quiet marker so it is obvious this is the live stream, not a video clip */
.stage .onair{
  position:absolute; left:14px; top:14px; z-index:2;
  display:flex; align-items:center; gap:7px;
  background:rgba(20,17,15,.72); color:#fff;
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; padding:5px 10px;
  opacity:0; transition:opacity .55s ease; pointer-events:none;
}
.stage.live .onair{ opacity:1; }
.stage .onair i{
  width:7px; height:7px; border-radius:50%; background:var(--live);
  animation:glow 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .stage, .stage > img, .stage > .ph, .stage > iframe, .stage .onair{ transition:none; }
}

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
section{ padding:38px 0; }
section + section{ border-top:1px solid var(--rule-2); }

.head{ display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.head h2{ font-size:1.7rem; letter-spacing:.1em; }
.head .romaji{ margin-top:.2em; }
.head .aside{ margin-left:auto; font-family:var(--font-label); font-size:.66rem;
              letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
              text-align:right; min-width:0; overflow-wrap:anywhere; }

/* ---------------------------------------------------------------------
   Banzuke strip — the stat band (one ruled sign, not a row of cards)
   --------------------------------------------------------------------- */
.strip{
  display:flex; border:1px solid var(--rule); background:var(--paper-2);
  margin-bottom:22px;
}
.strip div{
  flex:1; padding:12px 16px; border-left:1px solid var(--rule-2); min-width:0;
}
.strip div:first-child{ border-left:0; }
.strip .v{ font-family:var(--font-display); font-size:1.9rem; line-height:1.1;
           font-variant-numeric:tabular-nums; }
.strip .k{ font-family:var(--font-label); font-size:.62rem; letter-spacing:.16em;
           text-transform:uppercase; color:var(--muted); }

.model-note{
  margin:-6px 0 20px; font-size:.84rem; line-height:1.5; color:var(--muted);
  max-width:74ch;
}
.model-note b{ color:var(--ink-2); font-weight:600; }

/* ---------------------------------------------------------------------
   Torikumi — one bout
   --------------------------------------------------------------------- */
.bout{
  display:grid; grid-template-columns:2.6rem 1fr 6.4rem 1fr; align-items:stretch;
  border:1px solid var(--rule); border-top:0; background:var(--paper);
}
.bout:first-of-type{ border-top:1px solid var(--rule); }
.bout:nth-child(even){ background:var(--sunk); }
.bout.removed{ opacity:.4; }

.bout .idx{
  display:grid; place-items:center; border-right:1px solid var(--rule-2);
  font-family:var(--font-display); font-size:1.05rem; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.side{ padding:11px 14px; display:flex; flex-direction:column; gap:2px; justify-content:center; min-width:0; }
.side.west{ text-align:right; align-items:flex-end; }

.side .shikona{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.03em;
                line-height:1.2; }
.side.east .shikona{ color:var(--ai); }
.side.west .shikona{ color:var(--shu); }
.side .kana{ font-family:var(--font-display); font-size:.82rem; color:var(--muted); }
.side .rank{ font-family:var(--font-label); font-size:.66rem; letter-spacing:.14em;
             text-transform:uppercase; color:var(--muted); }
.side .tally{ font-family:var(--font-label); font-size:.74rem; letter-spacing:.06em;
              color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* hoshitori marks: ○ shiroboshi = win, ● kuroboshi = loss */
.hoshi{ letter-spacing:.12em; font-size:.8rem; }
.hoshi .w{ color:var(--win); }
.hoshi .l{ color:var(--lose); }

.centre{
  display:grid; place-items:center; align-content:center; gap:3px; padding:8px 4px;
  border-left:1px solid var(--rule-2); border-right:1px solid var(--rule-2);
  background:var(--paper-2);
}
.centre .vs{ font-family:var(--font-display); font-size:.95rem; color:var(--muted);
             letter-spacing:.1em; }
.centre .h2h{ font-family:var(--font-label); font-size:.62rem; letter-spacing:.1em;
              color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }

/* outcome */
.side.win .shikona::after{ content:'\25cf'; font-size:.7em; margin-left:.3em; color:var(--win); }
.side.west.win .shikona::after{ margin:0 .3em 0 0; }
.side.lose{ opacity:.52; }
.kimarite{ font-family:var(--font-label); font-size:.64rem; letter-spacing:.14em;
           text-transform:uppercase; color:var(--kin); }

.tag{
  display:inline-block; font-family:var(--font-label); font-size:.6rem;
  letter-spacing:.13em; text-transform:uppercase; padding:1px 6px;
  border:1px solid var(--rule); color:var(--muted); white-space:nowrap;
  align-self:flex-start;
}
.side.west .tag{ align-self:flex-end; }
.tag.model{ border-color:var(--kin); color:var(--kin); }
.tag.hit{ border-color:var(--win); color:var(--win); }
.tag.miss{ border-color:var(--lose); color:var(--lose); }
.tag.crowd{ border-color:var(--rule); color:var(--ink-2); }

/* ---------------------------------------------------------------------
   Picks
   --------------------------------------------------------------------- */
.bout.open .side{ cursor:pointer; }
.bout.open .side:hover{ background:var(--paper-3); }
.side.chosen{ background:var(--paper-3); box-shadow:inset 3px 0 0 var(--kin); }
.side.west.chosen{ box-shadow:inset -3px 0 0 var(--kin); }
.side.chosen::before{
  content:'選'; font-family:var(--font-display); font-size:.7rem; color:var(--kin);
  letter-spacing:.1em;
}
.side.chosen.right{ box-shadow:inset 3px 0 0 var(--win); }
.side.west.chosen.right{ box-shadow:inset -3px 0 0 var(--win); }
.side.chosen.right::before{ content:'的中'; color:var(--win); }
.side.chosen.wrong{ box-shadow:inset 3px 0 0 var(--lose); }
.side.west.chosen.wrong{ box-shadow:inset -3px 0 0 var(--lose); }
.side.chosen.wrong::before{ content:'外れ'; color:var(--lose); }

.scoreline{
  display:flex; gap:0; border:1px solid var(--rule); background:var(--paper-2);
  margin-bottom:18px; flex-wrap:wrap;
}
.scoreline div{ flex:1 1 auto; padding:11px 15px; border-left:1px solid var(--rule-2); min-width:104px; }
.scoreline div:first-child{ border-left:0; }
.scoreline b{ font-family:var(--font-display); font-size:1.5rem; display:block; line-height:1.15;
              font-variant-numeric:tabular-nums; }
.scoreline .you b{ color:var(--kin); }
.scoreline .model b{ color:var(--ai); }
.scoreline span{ font-family:var(--font-label); font-size:.6rem; letter-spacing:.15em;
                 text-transform:uppercase; color:var(--muted); }

/* ---------------------------------------------------------------------
   Controls
   --------------------------------------------------------------------- */
.btn{
  font-family:var(--font-label); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; background:transparent; color:var(--ink);
  border:1px solid var(--rule); padding:9px 16px; cursor:pointer;
}
.btn:hover{ border-color:var(--ink); background:var(--sunk); }
.btn.primary{ background:var(--shu); border-color:var(--shu); color:#fff; }
.btn.primary:hover{ filter:brightness(1.08); background:var(--shu); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

select,input[type=text]{
  font-family:var(--font-body); font-size:.9rem;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule); padding:8px 10px; max-width:100%;
}

.controls{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--rule); background:var(--paper-2); padding:13px 15px; margin-bottom:20px;
}
.controls label{ font-family:var(--font-label); font-size:.62rem; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--muted); }
.controls .note{ margin-left:auto; font-family:var(--font-label); font-size:.62rem;
                 letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
                 min-width:0; overflow-wrap:anywhere; }

.notice{ border:1px solid var(--rule); border-left:3px solid var(--kin);
         background:var(--paper-2); padding:14px 16px; margin-bottom:18px; }
.notice p{ margin:0; }
.notice p + p{ margin-top:6px; }
.notice .small{ font-size:.82rem; color:var(--muted); }

.empty{ padding:34px; text-align:center; color:var(--muted); border:1px dashed var(--rule); }

/* ---------------------------------------------------------------------
   Share-card preview
   --------------------------------------------------------------------- */
.sheet-modal{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(20,17,15,.72); padding:24px; overflow:auto;
}
.sheet-modal-box{
  background:var(--paper); border:1px solid var(--rule); padding:14px;
  max-width:min(760px,92vw); box-shadow:0 18px 60px rgba(0,0,0,.4);
}
.sheet-modal-box img{ display:block; width:100%; height:auto; border:1px solid var(--rule); }
.sheet-modal-bar{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }
@media (max-width:760px){
  .sheet-modal{ padding:12px; }
  .sheet-modal-bar .btn{ flex:1 0 auto; }
}

/* ---------------------------------------------------------------------
   Leaderboard
   --------------------------------------------------------------------- */
.board{ width:100%; border-collapse:collapse; border:1px solid var(--rule); }
.board th,.board td{ padding:10px 13px; border-bottom:1px solid var(--rule-2); text-align:left; }
.board th{
  font-family:var(--font-label); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); background:var(--paper-2);
  border-bottom:1px solid var(--rule);
}
.board td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.board tr:last-child td{ border-bottom:0; }
.board tr.me{ background:var(--paper-3); }
.board tr.me td:first-child{ box-shadow:inset 3px 0 0 var(--shu); }
.board .rank-n{ font-family:var(--font-display); font-size:1.15rem; color:var(--muted);
                font-variant-numeric:tabular-nums; }
.board .top .rank-n{ color:var(--shu); }
.board .who{ font-family:var(--font-display); font-size:1.05rem; }
.board .pct{ font-family:var(--font-display); font-size:1.05rem; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.foot{ border-top:1px solid var(--rule); background:var(--paper-2); margin-top:10px; }
.foot .inner{ max-width:var(--wrap); margin:0 auto; padding:30px var(--gut) 40px;
              display:grid; grid-template-columns:2fr 1fr 1fr; gap:26px; }
.foot h3{ font-size:1.05rem; letter-spacing:.08em; margin-bottom:8px; }
.foot p{ margin:0; font-size:.86rem; color:var(--muted); max-width:44ch; }
.foot a{ display:block; padding:3px 0; font-size:.88rem; color:var(--ink-2); }
.foot a:hover{ color:var(--shu); }

/* =====================================================================
   Mobile
   ---------------------------------------------------------------------
   The bout row is the thing that has to change shape: four columns do not
   survive a phone. Below 760px east and west stack, with the centre
   becoming a full-width divider band between them, and west loses its
   right-alignment so both sides read from the same margin.
   ===================================================================== */
@media (max-width:980px){
  .foot .inner{ grid-template-columns:1fr 1fr; }
  .foot .about{ grid-column:1/-1; }
}

@media (max-width:760px){
  :root{ --gut:14px; }
  body{ font-size:15px; }

  .masthead .bar{ flex-wrap:wrap; gap:10px 8px; padding:9px var(--gut); }
  .wordmark img{ height:40px; }
  .wordmark .ph{ width:96px; height:40px; padding:4px; }
  .wordmark .ph b{ font-size:.58rem; letter-spacing:.06em; }
  .wordmark .ph span{ display:none; }
  .wordmark .jp{ font-size:1.1rem; }
  .lamp{ padding:5px 8px; letter-spacing:.1em; }
  .wordmark{ order:1; }
  .tools{ order:2; margin-left:auto; }
  nav.main{
    order:3; width:100%; margin-left:0; gap:0;
    border-top:1px solid var(--rule-2); padding-top:6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  nav.main::-webkit-scrollbar{ display:none; }
  nav.main a{ flex:1 0 auto; padding:5px 14px; }

  .sheet .inner{ grid-template-columns:1fr; gap:16px; padding:24px var(--gut); }
  .sheet .title-jp{
    writing-mode:horizontal-tb; text-orientation:mixed;
    border:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    padding:.2em 0; font-size:2rem; letter-spacing:.3em; text-align:center;
  }

  .strip{ flex-wrap:wrap; }
  .strip div{ flex:1 0 50%; border-left:0; border-top:1px solid var(--rule-2); }
  .strip div:nth-child(odd){ border-right:1px solid var(--rule-2); }
  .strip div:nth-child(-n+2){ border-top:0; }

  /* the bout: stack east over west */
  .bout{ grid-template-columns:2.2rem 1fr; }
  .bout .idx{ grid-row:1/4; }
  .side{ padding:10px 12px; }
  .side.west{ text-align:left; align-items:flex-start; }
  .side.west .tag{ align-self:flex-start; }
  .side.west.win .shikona::after{ margin:0 0 0 .3em; }
  .side.chosen,.side.west.chosen{ box-shadow:inset 3px 0 0 var(--kin); }
  .side.chosen.right,.side.west.chosen.right{ box-shadow:inset 3px 0 0 var(--win); }
  .side.chosen.wrong,.side.west.chosen.wrong{ box-shadow:inset 3px 0 0 var(--lose); }
  .centre{
    grid-column:2; flex-direction:row; padding:4px 12px;
    display:flex; align-items:center; gap:10px; justify-content:flex-start;
    border-left:0; border-right:0;
    border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  }
  .centre .h2h{ text-align:left; }

  .scoreline div{ flex:1 0 50%; min-width:0; border-left:0;
                  border-top:1px solid var(--rule-2); }
  .scoreline div:nth-child(odd){ border-right:1px solid var(--rule-2); }
  .scoreline div:nth-child(-n+2){ border-top:0; }

  .controls{ gap:8px 10px; }
  .controls .note{ margin-left:0; flex:1 0 100%; }

  .head{ flex-wrap:wrap; gap:8px 14px; }
  .head .aside{ margin-left:0; flex:1 0 100%; text-align:left; }

  .foot .inner{ grid-template-columns:1fr; gap:20px; }

  /* the board drops its least useful column before it gets cramped */
  .board .drop{ display:none; }
  .board th,.board td{ padding:9px 10px; }
}

@media (max-width:400px){
  .side .shikona{ font-size:1.15rem; }
  .strip .v{ font-size:1.6rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
}

@media print{
  .masthead,.tools,.controls,.foot,.banner{ display:none; }
  body{ background:#fff; color:#000; }
}