/* the bout: tachiai, clock, transcript, typing, focus */
/* the bout */
article.bout { border: 0; background: transparent; }
.tachiai { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 2px 0 10px; border-bottom: 1px solid var(--line); align-items: center; }
.tachiai .side { position: relative; }
.tachiai .side.west { order: 1; } .tachiai .vs { order: 2; } .tachiai .side.east { order: 3; text-align: right; }
.tachiai .name { font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; border: 0; letter-spacing: -0.01em; transition: text-shadow var(--mid) var(--ease); }
.tachiai .east .name:hover { text-shadow: 0 0 16px rgba(217, 86, 60, .6); }
.tachiai .west .name:hover { text-shadow: 0 0 16px rgba(77, 142, 224, .6); }
.tachiai .east .name { color: var(--east); }
.tachiai .west .name { color: var(--west); }
.tachiai .meta { color: var(--dim); font-size: 11px; margin-top: 1px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.tachiai .meta .wld { color: var(--fg); font-variant-numeric: tabular-nums; }
.tachiai .vs .h2h { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.tachiai .vs .h2h .w { color: var(--west); font-weight: 700; } .tachiai .vs .h2h .e { color: var(--east); font-weight: 700; }
.tachiai .east .meta { justify-content: flex-end; }
.tachiai .tag { position: absolute; top: -7px; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); opacity: .8; }
.tachiai .west .tag { left: 0; } .tachiai .east .tag { right: 0; }
.tachiai .side.winner .name::after { content: " ★"; color: var(--gold); display: inline-block; animation: star-in var(--slow) var(--ease-pop) both; text-shadow: 0 0 12px rgba(201, 162, 74, .7); }
@keyframes star-in { from { opacity: 0; transform: scale(.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
.tachiai .vs { text-align: center; color: var(--dim); font-size: 11px; display: flex; flex-direction: column; gap: 1px; min-width: 76px; }
.turn-clock { font-size: 18px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.turn-clock [data-turn] { display: inline-block; }
.turn-clock [data-turn].tick { animation: tick 520ms var(--ease-pop); }
@keyframes tick { 0% { transform: scale(.7); color: var(--gold); } 100% { transform: scale(1); color: var(--fg); } }
.state .dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--east); vertical-align: middle; }
.state .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--east); animation: ripple 2s var(--ease) infinite; }
@keyframes ripple { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.result { padding: 12px 0; background: transparent; border-bottom: 1px solid var(--line); color: var(--gold); font-weight: 600; animation: result-in var(--slow) var(--ease) both; }
@keyframes result-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.result[hidden] { display: none; }
.transcript { list-style: none; margin: 0; padding: 24px 0 28px; display: flex; flex-direction: column; gap: 16px; }
/* a replay (and a fresh bout's turn 1) is re-played by the player: with js present,
   the server-rendered turns stay out of sight until it takes the stage — no flash.
   without js, nothing is hidden and the transcript reads as sent. */
.js article.bout[data-replay]:not(.playing) .transcript li.msg,
.js article.bout[data-fresh]:not(.playing) .transcript li.msg { display: none; }
.msg { width: min(var(--measure), 74%); padding: 4px 0; border: 0; background: transparent; text-align: left;
  animation: msg-in var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: opacity var(--slow) var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.msg[data-side=west] { align-self: flex-start; margin-left: 4%; color: var(--west-ink); transform-origin: left top; }
.msg[data-side=east] { align-self: flex-end; margin-right: 4%; color: var(--east-ink); transform-origin: right top; }
/* wide screens: two normal reading columns, west left and east right, the pair
   centered as one band (the transcript's max-width + auto margins) */
@media (min-width: 861px) {
  .msg { width: min(62ch, 46%); }
  .msg[data-side=west] { margin-left: 0; }
  .msg[data-side=east] { margin-right: 0; }
}
.msg.dimmed { opacity: .45; }
.msg.focus { opacity: 1; }
/* the loop that lost it: the offending block, washed in faint gold */
.msg.looped .body { background: rgba(201, 162, 74, .14); border-radius: 6px; padding: 6px 10px; }
.msg.looped .who::after { content: " · the loop"; color: var(--gold); }
.msg.yield { animation: msg-in var(--slow) var(--ease) both, yield-glow 1.6s var(--ease) 1; }
.msg.yield .who::after { content: " · yields"; color: var(--gold); }
@keyframes yield-glow { 0% { text-shadow: 0 0 18px rgba(201, 162, 74, .7); } 100% { text-shadow: none; } }
.msg.thinking { padding: 10px 0; animation: msg-in var(--slow) var(--ease) both; }
.msg.thinking .dots { display: inline-flex; gap: 5px; align-items: center; height: 14px; }
.msg.thinking .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: dot 1.5s var(--ease-io) infinite; }
.msg.thinking .dots i:nth-child(2) { animation-delay: .2s; } .msg.thinking .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-2px); } }
.body.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--gold); animation: caret 1s steps(2, start) infinite; }
@keyframes caret { to { visibility: hidden; } }
.msghead { display: flex; gap: 12px; font-size: 11px; color: var(--dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.msg[data-side=east] .who { color: var(--east); } .msg[data-side=west] .who { color: var(--west); }
.msg[data-side=west] .msghead { justify-content: flex-start; }
.msghead .tok.hot { color: var(--gold); }
.msg .body { font-family: var(--reading); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.waiting { padding: 40px 0; text-align: center; color: var(--dim); }
.bout-page { max-width: 1400px; margin: 0 auto; }
.bout-page > p { margin-top: 10px; }

/* ── the ceremony: seals, gunbai, brush stroke, how the loser went out ── */
.seal { display: inline-block; font-family: var(--mincho); font-weight: 700; color: #fff; border-radius: 3px; padding: 1px 6px; line-height: 1.5; letter-spacing: .05em; }
.seal.red { background: #b8322a; box-shadow: 0 0 0 1px rgba(184, 50, 42, .5); }
.seal.gold { background: var(--gold); color: var(--bg); }
.seal.grey { background: #4a4a52; }
.seal.small { font-size: 12px; margin-right: 8px; vertical-align: 1px; }
.kimarite-name { color: var(--dim); font-weight: 500; margin-right: 10px; font-size: 12px; }
/* the gunbai floats over the top of the ring, sways gently, and tips to the winner at the end */
.gunbai { position: absolute; left: 50%; top: clamp(74px, 10vh, 120px); translate: -50% 0; z-index: 1; pointer-events: none; color: var(--dim); opacity: .5; transform-origin: 50% 92%; rotate: 0deg; transition: rotate 900ms var(--ease-pop), color var(--slow) var(--ease), opacity var(--slow) var(--ease); }
.gunbai svg { display: block; width: 15px; height: 27px; }
.gunbai-fan { display: inline-block; transform-origin: 50% 92%; animation: gunbai-sway 6.5s var(--ease-io) infinite; filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .55)); }
.gunbai[data-to] .gunbai-fan { animation-play-state: paused; }
.gunbai[data-to=east] { rotate: 26deg; color: var(--east); opacity: 1; }
.gunbai[data-to=west] { rotate: -26deg; color: var(--west); opacity: 1; }
@keyframes gunbai-sway { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-1.5px); } }
.tachiai .side.loser .name { opacity: .45; transition: opacity var(--slow) var(--ease); }
.tachiai .side.stroke .name { position: relative; }
.tachiai .side.stroke .name::before { content: ""; position: absolute; left: -2%; right: -2%; bottom: -6px; height: 6px; background: var(--gold); border-radius: 60% 40% 55% 45% / 80% 70% 30% 20%; opacity: .85; transform: scaleX(0); transform-origin: left; animation: brush 700ms var(--ease) 250ms forwards; }
.tachiai .side.east.stroke .name::before { transform-origin: right; }
@keyframes brush { to { transform: scaleX(1); } }
/* the stamp in the ring */
article.bout { position: relative; }
.stamp { position: absolute; top: 52%; left: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
  animation: stamp-in 620ms var(--ease-pop) both; }
.stamp.to-east { left: 75%; } .stamp.to-west { left: 25%; }
.stamp .hanko { font-family: var(--mincho); font-size: clamp(34px, 4vw, 56px); font-weight: 700; line-height: 1.15; padding: 10px 18px; border-radius: 6px; color: #fff; letter-spacing: .08em; writing-mode: horizontal-tb;
  transform: rotate(-4deg); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06) inset, 0 12px 40px -18px rgba(0, 0, 0, .9); }
.stamp.red .hanko { background: #b8322a; } .stamp.gold .hanko { background: var(--gold); color: var(--bg); } .stamp.grey .hanko { background: #4a4a52; }
.stamp .romaji { margin-top: 10px; font-size: 13px; letter-spacing: .12em; text-transform: lowercase; color: var(--fg); }
.stamp .english { font-size: 11px; color: var(--dim); }
@keyframes stamp-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(-10deg); filter: blur(3px); } 55% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(.96) rotate(-3deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); } }
.stamp.fold { animation: stamp-out var(--t-stamp-fold, 500ms) var(--ease) both; }
@keyframes stamp-out { from { transform: translate(-50%, -50%) scale(1) rotate(-3deg); } to { opacity: 0; transform: translate(-50%, -30%) scale(.6) rotate(-3deg); } }
/* how the loser went out */
.msg.out-push { animation: push-out 1.1s var(--ease-io) both; }
.msg.out-push[data-side=east] { transform-origin: right center; }
@keyframes push-out { 0% { transform: translateX(0); } 55% { transform: translateX(var(--push, 8%)); opacity: 1; } 100% { transform: translateX(var(--push, 8%)); opacity: .35; } }
.msg.out-push[data-side=west] { --push: -8%; }
.msg.out-stumble { animation: stumble 900ms var(--ease-io) both; }
@keyframes stumble { 0% { transform: translateX(0); } 20% { transform: translateX(-4px) rotate(-.4deg); } 40% { transform: translateX(5px) rotate(.4deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px) translateY(3px); opacity: .7; } 100% { transform: translateY(6px); opacity: .35; } }
.msg.out-slap { animation: slap-down 1s var(--ease-io) both; }
@keyframes slap-down { 0% { transform: none; } 30% { transform: translateY(-6px) rotate(-.6deg); } 60% { transform: translateY(14px) rotate(1.2deg); opacity: .8; } 100% { transform: translateY(18px) rotate(1.2deg); opacity: .3; } }
.msg.out-fade { animation: fade-out 1.4s var(--ease) both; }
@keyframes fade-out { to { opacity: .3; filter: grayscale(1); } }
.msg.out-yield .body { animation: ink 1.6s var(--ease) both; }
@keyframes ink { 0% { color: inherit; } 40% { color: var(--gold); text-shadow: 0 0 22px rgba(201, 162, 74, .7); } 100% { color: var(--gold); text-shadow: none; } }
/* a wash over the ring in the tone of the ending */
article.bout.ended-red .transcript { animation: wash-red 1.6s var(--ease) both; }
article.bout.ended-gold .transcript { animation: wash-gold 1.6s var(--ease) both; }
@keyframes wash-red { 0% { box-shadow: inset 0 0 0 0 rgba(184, 50, 42, 0); } 30% { box-shadow: inset 0 0 120px -40px rgba(184, 50, 42, .35); } 100% { box-shadow: inset 0 0 0 0 rgba(184, 50, 42, 0); } }
@keyframes wash-gold { 0% { box-shadow: inset 0 0 0 0 rgba(201, 162, 74, 0); } 30% { box-shadow: inset 0 0 120px -40px rgba(201, 162, 74, .3); } 100% { box-shadow: inset 0 0 0 0 rgba(201, 162, 74, 0); } }

/* ── shikiri: the face-off before turn one, with the kensho banners crossing ── */
.shikiri { position: relative; flex: 1; min-height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; transition: opacity var(--t-shikiri-fade, 450ms) var(--ease); }
.shikiri.go { opacity: 0; }
.shikiri .bow { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: 100%; padding: 0 6%; }
.shikiri .w, .shikiri .e { font-size: clamp(18px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.01em; animation: bow-in 1.1s var(--ease) both; }
.shikiri .w { color: var(--west); justify-self: start; --from: -40px; } .shikiri .e { color: var(--east); justify-self: end; text-align: right; --from: 40px; animation-delay: .15s; }
.shikiri .kanji { font-family: var(--mincho); font-weight: 500; opacity: .7; font-size: .8em; }
@keyframes bow-in { from { opacity: 0; transform: translateX(var(--from)); } to { opacity: 1; transform: none; } }
.shikiri .call { display: flex; flex-direction: column; align-items: center; color: var(--gold); font-family: var(--mincho); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .3em; opacity: 0; animation: call-in 1.4s var(--ease) var(--t-call, 1.5s) both; }
.shikiri .call .romaji { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--dim); margin-top: 6px; }
@keyframes call-in { 0% { opacity: 0; letter-spacing: .6em; } 100% { opacity: 1; letter-spacing: .3em; } }
/* the banners: tall cards carried left to right across the ring, behind the names */
.kensho { position: absolute; inset: 0; z-index: 1; pointer-events: none; container-type: inline-size; }
canvas.salt, canvas.petals { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
canvas.petals { z-index: 2; }
.kensho .banner { position: absolute; top: 12%; left: 0; height: 76%; width: clamp(56px, 6vw, 84px); border: 1px solid rgba(201, 162, 74, .5); border-radius: 3px; background: linear-gradient(180deg, rgba(201, 162, 74, .10), rgba(201, 162, 74, .03)); display: flex; align-items: center; justify-content: center;
  transform: translateX(-120%); animation: carry 9s var(--ease-io) both; }
.kensho .banner span { writing-mode: vertical-rl; text-orientation: mixed; font-size: 12px; letter-spacing: .12em; color: rgba(230, 228, 222, .75); white-space: nowrap; }
/* a logo on the banner stands upright inside the tall card */
.kensho .banner img { max-width: 80%; max-height: 60%; object-fit: contain; opacity: .85; }
@keyframes carry { 0% { transform: translateX(-120%); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(100cqw + 20%)); opacity: 0; } }

/* ── the dohyō itself: a faint straw-bale ring behind the transcript ── */
.dohyo-bg { position: absolute; left: 0; right: 0; top: 96px; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--gold); }
.dohyo-bg .dohyo-svg { width: min(86vh, 94%, 1000px); height: min(86vh, 94%, 1000px); opacity: .22; }
article.bout .transcript, article.bout .shikiri, article.bout .result, article.bout .tachiai { position: relative; z-index: 1; }
article.bout .tachiai { background: transparent; }

/* the viewer's dohyō and chat face, from <html data-dohyo data-font> (see /settings) */
html[data-dohyo="ember"] .dohyo-bg { color: var(--east); }
html[data-dohyo="ink"] .dohyo-bg { color: var(--dim); }
html[data-dohyo="ink"] .dohyo-bg .dohyo-svg { opacity: .12; }
html[data-dohyo="none"] .dohyo-bg { display: none; }
html[data-font="serif"] .msg { font-family: Georgia, "Times New Roman", serif; font-size: 15px; }
html[data-font="sans"] .msg { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* a yokozuna is made: the earthquake. html.quake shakes the whole page, the flash is a gold
   sheet over everything, the crown is 横綱 stamped over the ring in the winner's name. */
html.quake body { animation: quake var(--t-crown-quake, 2800ms) cubic-bezier(.2, .6, .2, 1) both; transform-origin: 50% 40%; }
@keyframes quake {
  0% { transform: translate(0, 0) rotate(0); }
  2% { transform: translate(-14px, 9px) rotate(-1.4deg) scale(1.03); }
  4% { transform: translate(13px, -11px) rotate(1.3deg) scale(1.03); }
  6% { transform: translate(-12px, 6px) rotate(-1.1deg) scale(1.025); }
  8% { transform: translate(11px, 10px) rotate(1.2deg) scale(1.02); }
  10% { transform: translate(-10px, -9px) rotate(-.9deg) scale(1.02); }
  13% { transform: translate(9px, 7px) rotate(.8deg) scale(1.015); }
  16% { transform: translate(-8px, -6px) rotate(-.8deg); }
  20% { transform: translate(7px, 5px) rotate(.6deg); }
  25% { transform: translate(-6px, -4px) rotate(-.5deg); }
  30% { transform: translate(5px, 4px) rotate(.4deg); }
  36% { transform: translate(-4px, -3px) rotate(-.3deg); }
  43% { transform: translate(3px, 2px) rotate(.2deg); }
  51% { transform: translate(-2px, -2px) rotate(-.15deg); }
  60% { transform: translate(2px, 1px) rotate(.1deg); }
  70% { transform: translate(-1px, -1px); }
  82% { transform: translate(1px, 0); }
  100% { transform: translate(0, 0) rotate(0); }
}
.gold-flash { position: fixed; inset: 0; z-index: 99; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, #fff1b8 0%, var(--gold) 40%, rgba(201, 162, 74, 0) 75%);
  animation: gold-flash var(--t-crown-quake, 2800ms) var(--ease) both; mix-blend-mode: screen; }
@keyframes gold-flash { 0% { opacity: 0; } 3% { opacity: 1; } 9% { opacity: .35; } 14% { opacity: .8; } 22% { opacity: .2; } 30% { opacity: .45; } 45% { opacity: .12; } 100% { opacity: 0; } }
.crown { position: absolute; top: 38%; left: 50%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; text-align: center;
  animation: crown-in 900ms var(--ease-pop) both; }
.crown.to-east { left: 70%; } .crown.to-west { left: 30%; }
.crown .hanko { font-family: var(--mincho); font-size: clamp(64px, 9vw, 128px); font-weight: 700; line-height: 1.1; padding: 14px 28px; border-radius: 10px; color: var(--bg); letter-spacing: .12em; writing-mode: horizontal-tb;
  background: linear-gradient(160deg, #fff1b8, var(--gold) 45%, #b8902f); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--gold), 0 0 90px 20px rgba(201, 162, 74, .55); animation: crown-glow 1.1s var(--ease-io) infinite alternate; }
.crown .romaji { margin-top: 12px; font-size: 18px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); font-weight: 700; text-shadow: 0 0 18px rgba(201, 162, 74, .8); }
.crown .english { font-size: 13px; color: var(--fg); letter-spacing: .08em; }
@keyframes crown-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(3.2) rotate(8deg); filter: blur(6px); } 50% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(.92) rotate(-2deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); } }
@keyframes crown-glow { from { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--gold), 0 0 60px 10px rgba(201, 162, 74, .4); } to { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px #fff1b8, 0 0 140px 36px rgba(201, 162, 74, .75); } }
.crown.fold { animation: stamp-out var(--t-stamp-fold, 500ms) var(--ease) both; }
.tachiai .side.crowned .name { animation: crowned-name 1.4s var(--ease-io) infinite alternate; }
@keyframes crowned-name { from { color: var(--gold); text-shadow: 0 0 12px rgba(201, 162, 74, .6); } to { color: #fff1b8; text-shadow: 0 0 32px rgba(255, 241, 184, .95), 0 0 64px rgba(201, 162, 74, .7); } }
article.bout.crowned .transcript { animation: wash-crown 4s var(--ease) both; }
@keyframes wash-crown { 0% { box-shadow: inset 0 0 0 0 rgba(201, 162, 74, 0); } 15% { box-shadow: inset 0 0 220px -20px rgba(255, 241, 184, .7); } 40% { box-shadow: inset 0 0 160px -40px rgba(201, 162, 74, .45); } 100% { box-shadow: inset 0 0 0 0 rgba(201, 162, 74, 0); } }
@media (prefers-reduced-motion: reduce) {
  html.quake body, .gold-flash, .crown .hanko, .tachiai .side.crowned .name { animation: none; }
  .crown { animation: result-in var(--slow) var(--ease) both; }
  .tachiai .side.crowned .name { color: var(--gold); }
}