/* The World Tournament's HUD (2026-10-24; src/ui/tournament.js): the bar in the clock row, the four pads in the shop bar's
   place, the bracket beside the stage, the opening's panel, the Herald and the result. Under #app.duel (the Clash's class,
   which puts the shop's rows, the traits, the players and the fighters' bars aside) and #app.tourn. Colours from style.css. */
#app.tourn .shopbar>:not(.tournCtl),#app.tourn #duelBar,#app.tourn #duelCtl,#app.tourn #specNote,#app.tourn #chatBox{display:none!important}
#app.tourn .shopbar>.tournCtl{display:flex!important}   /* (the Clash's rule hides every child of the shop bar but its own controller) */
#app.tourn .shopbar{width:auto;max-width:calc(100% - 1.5rem)}
#app.tourn .toast{visibility:hidden}
#app.tourn #tournWipe{position:absolute;inset:0;z-index:18;pointer-events:none;background:#06080f;opacity:0}
/* ---------- the bar: the Clash's (style.css .duelBar, recruitment.css under #app.duel), with health pips and the Ring Control on its momentum bar ---------- */
.tournBar{width:min(48rem,calc(100vw - 1.5rem));position:relative}
/* the Captain Recruitment's colours and VS, as the Captain Clash's bar wears them (the owner, 2026-10-28: "In World Tournament
   apply same VS Banner"; recruitment.css): the two halves cut on a slant, the left blue and the right red, VS under the clock */
#tournBar{border-color:#2d3a5e;background:linear-gradient(105deg,#1c2b66 0%,#0d1638 49.8%,#3a0c12 50.2%,#661c22 100%)}
.tournBar .tVs{display:block;font:400 1.625rem/1 'Bangers',var(--disp);letter-spacing:.05em;color:#fff;text-shadow:0 0 .75rem var(--gold),.1875rem .1875rem 0 #000;margin:-.125rem 0 -.0625rem}

.tournBar.watch .dSide.me .av{border-color:#9fdcff}
.tHp{display:flex;gap:.1875rem;height:.8125rem}
.dSide.foe .tHp{flex-direction:row-reverse}
.tHp i{display:block;width:1.375rem;height:.8125rem;border-radius:.375rem;background:#0a0d18;border:1px solid var(--line);box-sizing:border-box;transition:background .25s,border-color .25s}
.tHp i.on{background:linear-gradient(90deg,#1f8a52,#7dffa8);border-color:#5ee08a}
.dSide.foe .tHp i.on{background:linear-gradient(270deg,#b8301f,#ff8a5a);border-color:var(--foe)}
.tHp i.gone{background:#4a2a2a;border-color:#7a3a3a;animation:tPipGone .5s both}
@keyframes tPipGone{from{background:#fff;transform:scale(1.3)}to{background:#4a2a2a;transform:scale(1)}}
.tRound{font-family:var(--disp);font-size:.625rem;letter-spacing:.12em;color:var(--gold)}
.tournBar .tRound{margin-top:.875rem}   /* clear of the STAGE bubble on the bar's top edge (.tStage), the long lines too (YOU'RE OUT · WATCHING · FINAL; the owner, 2026-10-28: "dangerously close") */
.tournBar .dMid{min-width:8rem}
.tournBar .dClock.sd{color:#ff9a5a}
.tournBar .dClock.word{font-size:.6875rem;letter-spacing:.02em}   /* OPEN inside the circle on every screen (the owner, 2026-10-24) */   /* OPEN, END, SD: a word fits the circle where a number does (the owner, 2026-10-24) */
.tournBar .dMom{width:8rem}
.tournBar .dMom.meDanger i{background:var(--foe);box-shadow:0 0 .5rem var(--foe);animation:tDanger .35s steps(2) infinite}
.tournBar .dMom.foeDanger i{background:var(--gold);box-shadow:0 0 .5rem var(--gold)}
@keyframes tDanger{to{opacity:.5}}
.tRingN{font-family:var(--disp);font-size:.5rem;letter-spacing:.08rem;color:var(--dim)}
.tournBar .dMom.meDanger~.tRingN{color:var(--foe)}.tournBar .dMom.foeDanger~.tRingN{color:var(--gold)}
.tStage{position:absolute;top:-.6rem;left:50%;transform:translateX(-50%);font-family:var(--disp);font-size:.6rem;letter-spacing:.14em;color:var(--gold);background:var(--glass);padding:.0625rem .5rem;border:1px solid #6b5a1f;border-radius:.5rem}
.tournWait{position:absolute;left:50%;top:calc(var(--topH) + 4.75rem);transform:translateX(-50%);z-index:6;font-family:var(--disp);font-size:.8rem;color:var(--dim);padding:.25rem .75rem}
/* ---------- the controls: the Clash's controller and pads (style.css .dCtl, .dPads, .dPad), the legend on its left ---------- */
.tournCtl{display:flex;align-items:center;gap:1.25rem;padding:.75rem 3rem .75rem 3.375rem;box-sizing:border-box;border-radius:5rem;background:radial-gradient(ellipse at 30% 20%,#2a3458,#0d1226 70%);border:2px solid #4a5a8a;box-shadow:0 .5rem 1.5rem #000c,inset 0 2px 0 #ffffff14;margin:0 auto;max-width:calc(100vw - 1.5rem)}
.tLegend{display:flex;flex-direction:column;gap:.25rem;font-family:var(--disp);font-size:.75rem;color:#c9d2ee;min-width:11rem}
.tLegend b{color:#fff;font-size:1rem;margin-right:.125rem}
.tLegend i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.3rem;vertical-align:middle}
.tLegend small{font-family:var(--body);font-size:.625rem;color:var(--dim)}
.tPad.busy{opacity:.55}
.tPad.picked{outline:.125rem solid var(--gold);box-shadow:0 .3125rem 0 #05070e,0 0 1rem var(--gold)}
/* the guide's lit buttons are the Clash tutorial's (style.css .dPad.tut, .risen; src/ui/spotlight.js LIFT): risen above its card, big, a gold ring pulsing; a pressed one green (.tried) */
/* the opening's panel while my choice is still to make: popped a little larger, a gold glow breathing, the three cards lit in turn (ui/tournament.js tuOpenPanel) */
.tournOpen{transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s}
.tournOpen.pick{transform:translateX(-50%) scale(1.08);border-color:var(--gold);animation:tOpenGlow 1s ease-in-out infinite alternate}
.tournOpen.pick .tOpenTitle{color:var(--gold)}
.tournOpen.pick .tStance{animation:tLit .8s ease-in-out infinite alternate;border-color:var(--gold)}
.tournOpen.pick .tStance:nth-child(2){animation-delay:.27s}.tournOpen.pick .tStance:nth-child(3){animation-delay:.54s}
@keyframes tOpenGlow{from{box-shadow:0 .5rem 1.5rem #000a,0 0 .5rem #ffd24a66}to{box-shadow:0 .5rem 1.5rem #000a,0 0 2rem var(--gold)}}
body.fxReduced .tournOpen.pick,body.fxReduced .tournOpen.pick .tStance{animation:none}
@keyframes tLit{from{box-shadow:0 .3125rem 0 #05070e,0 0 .25rem var(--gold)}to{box-shadow:0 .3125rem 0 #05070e,0 0 1.25rem var(--gold)}}
.tPad.cool::after{content:"";position:absolute;inset:-.1875rem;border-radius:.75rem;background:conic-gradient(#0000 calc((1 - var(--cd,0))*360deg),#ffa64aaa 0);pointer-events:none;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - .25rem),#000 calc(100% - .25rem));mask:radial-gradient(farthest-side,#0000 calc(100% - .25rem),#000 calc(100% - .25rem))}
.tRpsRow{display:none;gap:.5rem;flex:none}
.tournCtl.opening .tPads{display:none}.tournCtl.opening .tRpsRow{display:flex}   /* the Opening Clash: the three techniques in the pads' place, the pads back for the fight */
.tRps{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;width:5.5rem;height:5.5rem;padding:.25rem;border-radius:.75rem;background:linear-gradient(#26304e,#141a2e);border:1px solid var(--c);box-shadow:0 .3125rem 0 #05070e,0 .4375rem .875rem #000a;color:var(--c);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .06s,box-shadow .06s}
.tRps.strike{--c:var(--kLeft)}.tRps.counter{--c:var(--kDown)}.tRps.feint{--c:var(--kRight)}   /* by the arrow that picks it (style.css --kLeft…): STRIKE ← yellow, COUNTER ↓ cyan, FEINT → red, as the pads under them (until 2026-10-28 STRIKE was red and FEINT yellow, the pads' opposite) */
.tRps small kbd,.tStance small kbd{font-family:var(--disp);font-size:1em;line-height:1;color:var(--gold);margin-right:.25em}   /* the key beside what the hand is, under the name (it sat in the corner on top of the hand until 2026-10-25) */
.tRps i{font-style:normal;font-size:2rem;line-height:1;filter:drop-shadow(0 .125rem .25rem #000a)}
.tStance i{font-style:normal;font-size:1.5rem;line-height:1}
.tStance small{white-space:nowrap}
.tRps b{font-family:var(--disp);font-weight:400;font-size:.875rem;letter-spacing:.04rem;color:var(--c)}
.tRps small{font-family:var(--disp);font-size:.6875rem;letter-spacing:.04em;color:var(--dim);white-space:nowrap}
.tRps.on{transform:translateY(.25rem);box-shadow:0 .0625rem 0 #05070e,0 0 .75rem var(--c)}
.tRps.picked{transform:translateY(-.375rem) scale(1.12);background:linear-gradient(#6a5518,#2a2110);border-color:var(--gold);color:var(--gold);box-shadow:0 .5rem 0 #05070e,0 0 1.5rem var(--gold),0 0 .25rem #fff inset;z-index:1}
.tRps.picked::after{content:"YOUR PICK";position:absolute;top:-.875rem;left:50%;transform:translateX(-50%);padding:.125rem .5rem;border-radius:.5rem;background:var(--gold);color:#0b0e1a;font-family:var(--disp);font-size:.5625rem;letter-spacing:.08em;white-space:nowrap}
.tRpsRow.has .tRps:not(.picked){opacity:.42;filter:saturate(.4)}
.tRps.busy{opacity:.55}
.tRps.tut{border-color:var(--gold);animation:tutPad .7s ease-in-out infinite alternate}   /* lit by the guide as the Clash tutorial's pads (style.css .dPad.tut, tutPad) */
.tStance.strike{--c:var(--kLeft)}.tStance.counter{--c:var(--kDown)}.tStance.feint{--c:var(--kRight)}
.tReveal.clash .tStance{animation:tClashIn .45s cubic-bezier(.2,1.4,.4,1) both}
.tReveal.clash .tStance:first-child{animation-name:tClashL}.tReveal.clash .tStance:last-child{animation-name:tClashR}
.tReveal.clash em{animation:tClashX .5s ease-out both}
.tReveal .tStance.lost{opacity:.45;filter:saturate(.4)}
@keyframes tClashL{from{transform:translateX(-4rem) rotate(-8deg);opacity:0}60%{transform:translateX(.5rem) rotate(2deg);opacity:1}to{transform:none}}
@keyframes tClashR{from{transform:translateX(4rem) rotate(8deg);opacity:0}60%{transform:translateX(-.5rem) rotate(-2deg);opacity:1}to{transform:none}}
@keyframes tClashX{from{transform:scale(.2);opacity:0}50%{transform:scale(1.8);opacity:1;color:var(--gold)}to{transform:none}}
body.fxReduced .tReveal.clash .tStance,body.fxReduced .tReveal.clash em{animation:none}
.tRules{align-self:center;padding:.5rem .75rem;font-size:.8rem;color:var(--gold);border-color:#6b5a1f}
/* ---------- the bracket ---------- */
.tournBracket{position:absolute;left:.75rem;top:calc(var(--topH) + 3.75rem);z-index:5;width:21rem;max-width:calc(100% - 1.5rem);max-height:calc(100% - var(--topH) - var(--shopH) - 5rem);overflow:auto;padding:.5rem .625rem .625rem;font-family:var(--disp);border-color:#6b5a1f;transition:box-shadow .3s}

.tBrHead{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.375rem}
.tBrHead b{font-size:.8rem;letter-spacing:.12em;color:var(--gold)}
.tBrFold{padding:.125rem .5rem;font-size:.75rem;line-height:1}
.tournBracket.folded .tBrBody,.tournBracket.folded .tBrHint{display:none}
.tournBracket.folded{width:auto}
/* the bracket as a tree (2026-10-27, the owner: a bracket, not a list): three columns, the quarterfinals' four boxes in two
   pairs, the semifinals' two in one, the final; each box's line runs out --g/2 to the right, each pair's lines meet on a
   vertical one, and the next column's box takes it in from its left, at the pair's middle, which is its own middle */
.tTree{--g:.875rem;--ln:#3a4566;--lnW:#8a7430;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g)}
.tRound{display:flex;flex-direction:column;min-width:0}
.tColT{font-size:.55rem;letter-spacing:.14em;color:var(--dim);text-align:center;margin-bottom:.25rem}
.tRound.live .tColT{color:var(--gold)}
.tLane{flex:1;display:flex;flex-direction:column;min-height:14.5rem}   /* (room under the final for the champion's card) */
.tPair{flex:1;display:flex;flex-direction:column;position:relative}
.tSlot{flex:1;display:flex;align-items:center;position:relative;min-height:2.875rem}
.tSlot>.tBout{width:100%}
.r0 .tSlot::after,.r1 .tSlot::after{content:"";position:absolute;left:100%;top:50%;width:calc(var(--g) / 2);border-top:1px solid var(--ln)}
.r1 .tSlot::before,.r2 .tSlot::before{content:"";position:absolute;right:100%;top:50%;width:calc(var(--g) / 2);border-top:1px solid var(--ln)}
.r0 .tPair::after,.r1 .tPair::after{content:"";position:absolute;left:calc(100% + var(--g) / 2);top:25%;bottom:25%;border-left:1px solid var(--ln)}
.tSlot.done::after,.tSlot.has::before{border-color:var(--lnW)}
.tBout{display:flex;flex-direction:column;gap:.125rem;padding:.1875rem .25rem;border-radius:.375rem;background:#10152a;border:1px solid var(--line);text-align:left;font-family:var(--body);letter-spacing:0;cursor:default;min-width:0}
.tBout:not([disabled]){cursor:pointer}.tBout:not([disabled]):hover{border-color:var(--gold)}
.tBout.live{border-color:#6b5a1f;animation:tLive 1.4s ease-in-out infinite alternate}
.tBout.view{border-color:var(--gold);box-shadow:0 0 .5rem var(--gold)88}
.tBout:disabled{opacity:1}   /* (the game's disabled buttons fade to .4: a decided box stays readable, its loser alone faded) */
.tBout.tbd{opacity:.6}
@keyframes tLive{from{box-shadow:0 0 0 #0000}to{box-shadow:0 0 .5rem #ffc94a66}}
.tEnt{display:flex;align-items:center;gap:.25rem;min-width:0;font-size:.65rem;line-height:1.1}
.tEnt img,.tEnt .tAv{width:1.125rem;height:1.125rem;border-radius:.25rem;object-fit:cover;object-position:50% 15%;flex:none;border:1px solid var(--line);background:#1b2340}
.tEnt.me img{border-color:var(--gold)}
.tEnt>span{display:flex;flex-direction:column;min-width:0;flex:1}
.tEnt b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.tEnt.me b{color:var(--gold)}
.tEnt.lost{opacity:.45}.tEnt.lost b{text-decoration:line-through}
.tEnt.won b{color:#5ee08a}.tEnt.me.won b{color:var(--gold)}
.tEnt .tick{color:#5ee08a;font-style:normal;font-weight:800;flex:none}
.tEnt .hpb{display:block;height:.125rem;margin-top:.125rem;border-radius:1px;background:linear-gradient(90deg,#5ee08a calc(var(--hp) * 100%),#ffffff22 0)}
.tEnt.empty b{color:var(--dim);font-weight:600}
.tTrophy{position:absolute;left:0;right:0;top:calc(50% + 1.875rem);display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.25rem;border-radius:.5rem;border:1px dashed #6b5a1f;text-align:center}
.tTrophy small{font-size:.5rem;letter-spacing:.12em;color:var(--dim)}
.tTrophy b{font-size:.7rem;color:var(--dim);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tTrophy.won{border:1px solid var(--gold);background:linear-gradient(#2a2410,#141a2e);box-shadow:0 0 .75rem #ffc94a44}
.tTrophy.won small{color:var(--gold)}.tTrophy.won b{color:#fff}
.tTrophy img{width:2rem;height:2rem;border-radius:.375rem;object-fit:cover;object-position:50% 15%;border:.125rem solid var(--gold)}
.tBrHint{margin-top:.375rem;font-family:var(--body);font-size:.65rem;color:var(--dim)}
/* ---------- the opening's panel ---------- */
.tournOpen{position:absolute;left:50%;margin-left:var(--tOpenX,0px);top:calc(var(--topH) + 7.5rem);transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.625rem 1rem;width:max-content;max-width:min(30rem,calc((100% - 1.5rem) / 1.08));pointer-events:none;border-color:#6b5a1f;animation:finalIn .25s both}
.tOpenTitle{font-family:var(--disp);font-size:1.1rem;letter-spacing:.12em;color:var(--gold)}
.tStances,.tReveal{display:flex;gap:.5rem;align-items:center}
.tStance{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.375rem .625rem;min-width:5.5rem;border-radius:.5rem;border:1px solid var(--line);background:#10152a;font-family:var(--disp);--c:var(--dim)}
.tStance.quick{--c:var(--kLeft)}.tStance.guard{--c:var(--kDown)}.tStance.heavy{--c:var(--kRight)}   /* the fight's moves, by their arrows too (a third palette until 2026-10-28) */.tStance.none{--c:var(--dim)}
.tStance > kbd{font-size:1.1rem;color:#fff}.tStance b{color:var(--c);font-size:.95rem}.tStance small{font-family:var(--body);font-size:.6rem;color:var(--dim)}
.tStance.mine{border-color:var(--gold);box-shadow:0 0 1rem var(--gold);background:linear-gradient(#5a4814,#241d0e);transform:scale(1.1);position:relative;z-index:1}.tStance.mine b{color:var(--gold)}
.tStance.mine::after{content:"YOUR PICK";position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);padding:.0625rem .4rem;border-radius:.5rem;background:var(--gold);color:#0b0e1a;font-size:.5rem;letter-spacing:.08em;white-space:nowrap}
.tStances.has .tStance:not(.mine){opacity:.42;filter:saturate(.4)}
.tStance.won{border-color:#5ee08a;box-shadow:0 0 .75rem #5ee08a88}
.tReveal em{font-style:normal;font-family:var(--disp);font-size:1.5rem;color:#fff}
.tOpenRow{display:flex;gap:1.25rem;font-family:var(--tech);font-weight:700;font-size:.75rem;color:var(--dim)}
.tOpenRow .ok{color:#5ee08a}
.tOpenBar{display:block;width:100%;height:.25rem;border-radius:.125rem;background:#1b2340;overflow:hidden}
.tOpenBar em{display:block;height:100%;background:var(--gold);transition:width .1s linear}
.tOpenWin{font-family:var(--disp);font-size:.9rem;color:#fff}.tOpenWin.good{color:#5ee08a}.tOpenWin.bad{color:var(--foe)}
.dTele.mine .ring{--tc:#7ad0ff}
.dTele.edge small{color:var(--foe);font-size:.75rem;letter-spacing:.14em;animation:tSoon .4s steps(2) infinite}
/* ---------- the Herald: the figure beside the Clash tutorial's caption card (style.css .beatCard.clashCard) ---------- */
.herald{position:absolute;left:50%;bottom:calc(var(--shopH) + 1rem);transform:translateX(-50%);z-index:8;display:flex;align-items:flex-end;width:min(26rem,calc(100% - 1.5rem));pointer-events:auto;cursor:pointer}   /* one width every step (it followed each step's text with width:max-content and slid left and right, 2026-10-25) */
.herald .heraldBub{position:static;transform:none;width:100%;max-width:none;box-sizing:border-box;pointer-events:auto}
.heraldBub .clashTxt{min-width:0;flex:1 1 auto}   /* (a flex item's min-width is its content's: the long lines ran past the card's edge) */
.heraldBub .clashTxt span,.heraldBub .clashTxt small{white-space:normal;overflow-wrap:anywhere;max-width:100%;line-height:1.15}
.heraldBub.pop{animation:tournCardPop .35s ease-out}   /* its own pop, a scale alone: tutPop carries the centred caption's translateX(-50%), which slid this card half its width left and back on every Next (the owner, 2026-10-26) */
@keyframes tournCardPop{from{transform:scale(1.06)}to{transform:none}}
.heraldBub .hName{font-family:var(--disp);font-size:.5625rem;letter-spacing:.14em;color:var(--gold)}
.heraldBub .hHint{font-family:var(--disp);font-size:.6875rem;letter-spacing:.06em;color:var(--gold);margin-top:.125rem}
/* (a pad the guide's step has had pressed: style.css .risen.tried) */
.heraldBtns{display:flex;gap:.375rem;margin-top:.375rem}
.heraldBtns button{padding:.3rem .6rem;font-size:.75rem}
#app.heraldOn #tournOpen{opacity:.35}
.duel .beatBig.top{top:40%;font-size:clamp(2rem,6.5vmin,3.75rem)}   /* WORLD TOURNAMENT BEGINS! at the top middle as the stadium arrives, under the bar (the Clash's callout rule, .duel .beatBig, stands them at 43%; the owner, 2026-10-24) */
#app.duel #tournCall.show{animation:beatBig var(--ms,1400ms) ease-out both}   /* the round's name under the Opening Clash's result (ui/tournament.js tuCall): BEGINS!'s type, popped in and held, then gone before the 3-2-1 (the owner, 2026-10-25) */
body.fxReduced #app.duel #tournCall.show{animation:countFade var(--ms,1400ms) both}
body.fxReduced .heraldBub.pop{animation:none}
body.fxReduced .tPad.tut,body.fxReduced .tRps.tut,body.fxReduced .tBout.live,body.fxReduced .tournBar .dMom.meDanger i{animation:none}
/* the reminder card at a later tournament's start: the same card, the figure small */
/* the Announcer's word over his head in the stadium (ui/tournament.js tournHostSay, graphics tournHostScreen) */
.hostBub{position:absolute;z-index:9;left:50%;top:auto;bottom:calc(var(--shopH) + 2.5rem);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;width:max-content;max-width:min(30rem,calc(100% - 2rem));box-sizing:border-box;padding:.3125rem 1rem .375rem;border-radius:.75rem;background:#fffdf6;color:#0b0e1a;font-family:var(--disp);font-size:1.125rem;line-height:1.15;text-align:center;border:.125rem solid var(--gold);letter-spacing:.03em;white-space:normal;overflow-wrap:anywhere;box-shadow:0 .25rem .75rem #0008;text-shadow:none;pointer-events:none}   /* (width:max-content: centred on left 50%, it would wrap at half the screen; text-shadow:none: the stage's dark shadow for light text smeared its dark letters) the Announcer's word at the screen's middle, a little above the controls, below the ring and the champion's pose (the owner, 2026-10-25: "takes up too much of the screen… make that smaller and below", then "move announcer text little higher"; at the middle since 2026-10-24) */
.hostBub small{font-family:var(--disp);font-size:.5625rem;letter-spacing:.14em;color:#8a6a1a}
#app.heraldOn .hostBub{display:none}   /* the guide is the Announcer speaking: one voice at a time */
.hostBub.pop{animation:tutPop .35s ease-out}body.fxReduced .hostBub.pop{animation:none}
/* ---------- the result ---------- */
.tEndBox{min-width:min(24rem,calc(100% - 2rem))}
.tEndBox h2.win{color:var(--gold)}.tEndBox h2.lose{color:var(--dim)}
.tBouts{width:100%;border-collapse:collapse;font-size:.8rem}
.tBouts th{text-align:left;font-family:var(--disp);font-size:.65rem;letter-spacing:.12em;color:var(--dim);padding:.125rem .375rem}
.tBouts td{padding:.125rem .375rem;color:var(--dim)}
.tBouts tr.w td:first-of-type{color:#5ee08a;font-weight:800}.tBouts tr.l td:first-of-type{color:var(--foe);font-weight:800}
.tBar{display:block;height:.25rem;background:var(--gold);border-radius:.125rem;align-self:stretch}
/* ---------- phones ---------- */
@media (max-width:760px){
  .tournBar{width:calc(100vw - 1rem)}.tournBar .tVs{font-size:1.125rem;margin:0}
  .tournBar .dMid{min-width:6rem}.tournBar .dMom{width:6rem}.tHp i{width:.875rem}
  .tournCtl{padding:.375rem .5rem;gap:.5rem;border-radius:2rem;width:100%}
  .tLegend{display:none}
  .tRps{width:4.25rem;height:4.25rem}.tRps b{font-size:.6875rem}.tRps small{font-size:.5625rem}.tRps i{font-size:1.5rem}
  .tournBracket{left:.25rem;top:calc(var(--topH) + 6.5rem);width:min(18.5rem,calc(100vw - .5rem));font-size:.85em}   /* (the tree, a little smaller; folded by default on a phone) */
  .tournBracket:not(.folded){max-height:45%}
  .tTree{--g:.625rem}.tLane{min-height:13rem}
  .tBrHint{display:none}
  .tournOpen{top:calc(var(--topH) + 9rem);padding:.375rem .5rem}
  .tStance{min-width:4rem;padding:.25rem .375rem}
  .herald{width:calc(100% - .75rem);bottom:calc(var(--shopH) + .5rem)}
  .herald .heraldBub{padding:.5rem .625rem}

  .heraldBub .clashTxt span{font-size:1.05rem}
  .hostBub{font-size:.875rem;padding:.25rem .625rem .3125rem;bottom:calc(var(--shopH) + 1.5rem);max-width:calc(100% - 1.5rem)}
}
/* a phone on its side (short and wide): the controls fill the lower half and the Opening Clash its middle, so the Announcer's word stands in the top right corner, under the menu, over the crowd */
@media (max-height:520px) and (orientation:landscape){.hostBub.pop{animation-name:tournCardPop}   /* (top right, no centring transform: the scale-only pop) */
.hostBub{top:calc(var(--topH,2.75rem) + .375rem);bottom:auto;left:auto;right:.625rem;transform:none;max-width:min(20rem,40vw);font-size:.875rem;padding:.25rem .625rem .3125rem}
/* (2026-10-28, the owner: no HUD piece over another at any size) the tournament bar is wider than the clock badge the
   sideways phone stands beside the tracker, so through a tournament the clock row stands under the tracker, as on a
   smaller phone turned sideways (style.css); the moves' legend goes, as upright, so the controls leave the ring room */
#app.tourn .clockRow{left:50%;top:calc(2.9rem + env(safe-area-inset-top,0px));transform-origin:50% 0;transform:translateX(-50%) scale(.68)}
#app.tourn .hostBub{top:calc(7.25rem + env(safe-area-inset-top,0px));max-width:min(16rem,26vw)}   /* (under the bar, and narrow enough to stay right of the opening's card) */
.tLegend{display:none}}