/* Studenti pobeđuju 0.18 "Šablon": protest-stencil interface.
   Loaded last, after serbian-controls.css. Presentation only: no node is hidden from
   assistive tech, and every control keeps at least its 0.17.1 hit area (padding and
   min sizes, no visible box). Later tasks append their screens below the main menu. */

/* ===================================================================== 1. Vocabulary
   --pv-stencil-mask  the horizontal gap cut through stencil letters, repeated per line.
                      With .pv-st's line-height of 1.25 the Oswald caps span about 23-77%
                      of the line and the carons/acutes of Č Ć Š Ž sit at 3-23%, so the
                      44-52% band cuts the letters and never the diacritics.
   --pv-stencil-mask-fine
                      the same cut, narrower (46-51%), for small words where the full gap
                      would eat too much of each letter.
   --pv-st-off-small  the unselected ink for small words: lighter than --pv-st-off so a
                      small word on a busy background reads as well as a 0.17.1 label.
   --pv-dot           size of the red selection dot.
   .pv-st             stencil word: Oswald 700, uppercase, spaced, paper at 55%.
   .pv-st.on, .pv-st[aria-pressed=true]
                      the current choice: full paper with the red dot before it.
   .pv-quiet          plain letter-spaced Barlow, no cut, no red (Sećanje).
   .pv-rule           1px paper rule at low opacity, used instead of boxes. */
:root{
 --pv-stencil-mask:repeating-linear-gradient(180deg,#000 0 calc(1lh * .44),transparent calc(1lh * .44) calc(1lh * .52),#000 calc(1lh * .52) 1lh);
 --pv-stencil-mask-fine:repeating-linear-gradient(180deg,#000 0 calc(1lh * .46),transparent calc(1lh * .46) calc(1lh * .51),#000 calc(1lh * .51) 1lh);
 --pv-dot:.55em;
 --pv-dot-gap:.4em;
 --pv-dot-inset:.15em;
 --pv-dot-gutter:calc(var(--pv-dot-inset) + var(--pv-dot) + var(--pv-dot-gap));
 --pv-st-off:#f6efda8c;
 --pv-st-off-small:#f6efdac4;
 --pv-rule-ink:#f6efda40;
 --pv-label-ink:#e2b2b7;
 --pv-quiet-ink:#f6efdacc;
}
.pv-st{
 font-family:var(--pv-font-display);font-weight:700;font-style:normal;line-height:1.25;
 text-transform:uppercase;letter-spacing:.14em;color:var(--pv-st-off);text-shadow:none;
 /* Second layer keeps the dot gutter (width --pv-st-keep) whole. */
 -webkit-mask:var(--pv-stencil-mask),linear-gradient(#000 0 0) 0 0/var(--pv-st-keep,0px) 100% no-repeat;
 mask:var(--pv-stencil-mask),linear-gradient(#000 0 0) 0 0/var(--pv-st-keep,0px) 100% no-repeat;
}
.pv-st.on,.pv-st[aria-pressed=true]{color:var(--pv-paper);--pv-st-keep:var(--pv-dot-gutter)}
.pv-st.on::before,.pv-st[aria-pressed=true]::before{
 content:"";display:inline-block;width:var(--pv-dot);height:var(--pv-dot);margin:0 var(--pv-dot-gap) 0 var(--pv-dot-inset);
 vertical-align:.08em;border-radius:50%;background:var(--pv-red);box-shadow:0 0 .2em var(--pv-red);
}
.pv-quiet{
 font-family:var(--pv-font-ui);font-weight:600;font-style:normal;text-transform:uppercase;
 letter-spacing:.3em;color:var(--pv-quiet-ink);text-shadow:none;-webkit-mask:none;mask:none;
}
.pv-quiet:is(:hover,:focus-visible){color:var(--pv-paper);text-decoration:underline 1px;text-underline-offset:.35em}
.pv-rule{border-top:1px solid var(--pv-rule-ink)}

/* ===================================================================== 2. Main menu (#title)
   Fight modes as a vertical list of stencil words; KONTROLE, OPCIJE, DOSIJEI on a ruled
   second line (.pv-menu-sub, built in serbian-ui.js) with the quiet SEĆANJE at its right end.
   --s is the donor title's scale unit; --pv-vh is the title's own 1% height (the phone
   portrait view rotates #app, so 1vh there is the wrong axis). Minimum sizes below are
   fitted to the 0.17.1 hit boxes measured at every size of the responsive matrix. */
#title{--pv-vh:1vh;grid-template-rows:auto minmax(0,1fr) auto auto}
html.rot #title{--pv-vh:calc(var(--rw,100vw) / 100)}

/* No boxes: every title button loses fill, frame, shadow and lift. */
#title .btn,#title .btn:is(:hover,:focus-visible,:active),#title .btn.hot,#title .btn.hot:is(:hover,:focus-visible,:active){
 background:none;box-shadow:none;filter:none;transform:none;clip-path:none;border-radius:0;
 color:var(--pv-paper);text-shadow:none;animation:none;
}
/* Focus ring: the vocabulary's 2px paper ring. Inset by its own width because the menu rows
   abut with no gap, so an outward ring would run into the neighbouring entry's hit area. */
#title .btn:focus-visible,#title .pv-menu-sub button:focus-visible{outline:2px solid var(--pv-paper);outline-offset:-2px}
/* Controller focus (part-070.js forces a yellow ring with !important) gets the same ring, on the
   restyled entries only. */
html.pad #title :is(.btn,.pv-menu-sub button):focus{outline:2px solid var(--pv-paper)!important;outline-offset:-2px!important}

/* Heading keeps its words: the small line becomes a pink label, the title a stencil word. */
#title .tl-hl small{font:800 calc(var(--s) * 1.5)/1.2 var(--pv-font-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--pv-label-ink);transform:none;text-shadow:none;margin:0 0 calc(var(--s) * .4)}
#title .tl-hl h2{
 font:700 calc(var(--s) * 5.4)/1.25 var(--pv-font-display);letter-spacing:.14em;text-transform:uppercase;
 color:var(--pv-paper);transform:none;text-shadow:none;-webkit-text-stroke:0;
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}
#title .tl-hl h2::after{content:none}

/* Modes: one column, no gaps; each row is as tall as its 0.17.1 tile.
   :not(#bRanked) lifts specificity over the donor's #bRanked[hidden]+#bWatch{min-height:0}. */
#title .tl-main :is(.tm-hero,.tm-grid){gap:0}
#title .tl-main .tm-grid{grid-template-columns:minmax(0,1fr)}
#title .tl-main :is(#bCpu,#bTour,#bRumble,#bWatch){justify-content:center;align-items:flex-start;padding:0 calc(var(--s) * 1)}
#title .tl-main #bCpu{min-height:calc(var(--s) * 6.9 + 41px)}
#title .tl-main .tm-grid :is(#bTour,#bRumble,#bWatch):not(#bRanked){grid-column:1;min-height:calc(var(--s) * 6.5 + 28px)}
#title :is(#bCpu,#bTour,#bRumble,#bWatch,#bKeys) .pv-button-name{
 font-size:calc(var(--s) * 4.4);line-height:1.25;letter-spacing:.14em;white-space:nowrap;max-width:none;overflow-wrap:normal;
}
/* Sub-captions stay in each button's accessible name but are not drawn. */
#title .tl-main .btn small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The donor's third-row tile holder is empty once KONTROLE moves to the second line.
   It also hides the donor's #bParl and #bPol tiles, which live in the same holder. */
#title .tm-low{display:none}

/* Second line. */
/* Phone fullscreen button (#bFull, a donor .hud.sq): the violet gradient box, edge and drop shadow
   become a charcoal fill with a thin paper edge. Glyph, colour, size, radius and position stay
   the donor's, so the icon and its hit area are unchanged. */
#title #bFull{background:#151820b3;box-shadow:inset 0 0 0 1px #f6efda80;filter:none}
#title #bFull:is(:hover,:focus-visible){background:#151820e6;box-shadow:inset 0 0 0 2px var(--pv-paper)}

#title .pv-menu-sub{
 position:relative;z-index:5;display:flex;align-items:center;gap:calc(var(--s) * 2.4);min-width:0;
 margin:0 var(--px);padding:calc(var(--s) * .5) 0 calc(var(--s) * .7);
}
#title .pv-menu-sub :is(#bKeys,#bOpts,button){
 appearance:none;display:inline-flex;align-items:center;justify-content:flex-start;flex:none;box-sizing:border-box;
 width:auto;height:auto;min-width:max(calc(var(--s) * 5.6),80px);min-height:max(calc(var(--s) * 3.2 + 26px),34px);
 margin:0;padding:0 calc(var(--s) * .6);border:0;border-radius:0;background:none;box-shadow:none;filter:none;transform:none;
 color:var(--pv-paper);cursor:pointer;text-shadow:none;
}
#title .pv-menu-sub #bKeys{min-width:calc(var(--s) * 4.6 + 96px);justify-content:center;align-items:flex-start}
#title .pv-menu-sub #bKeys small{display:none}
#title .pv-menu-sub .pv-st,#title .pv-menu-sub #bKeys .pv-button-name{font-size:calc(var(--s) * 2.6)}
#title .pv-menu-sub :is(#bKeys,#bOpts,button).pv-quiet{margin-left:auto;justify-content:flex-end;font-size:calc(var(--s) * 2.1)}

/* Dot gutter is reserved on every entry so the words never shift when the dot moves. */
#title :is(.tl-main,.pv-menu-sub) .pv-st{position:relative;padding-left:var(--pv-dot-gutter);--pv-st-keep:var(--pv-dot-gutter);transition:color .14s}
#title :is(.tl-main,.pv-menu-sub) .pv-st::before{
 content:"";position:absolute;left:var(--pv-dot-inset);top:50%;width:var(--pv-dot);height:var(--pv-dot);border-radius:50%;
 background:var(--pv-red);box-shadow:0 0 .2em var(--pv-red);transform:translateY(-50%) scale(0);transition:transform .14s;
}
/* The theme forces .hot (BRZA BORBA) labels to full paper with !important; undo that so
   BRZA BORBA dims like the others when another entry is the current choice. */
#title #bCpu .pv-st{color:var(--pv-st-off)!important}
/* The current choice, one at a time: the hovered entry; else the keyboard/controller-focused
   entry; else BRZA BORBA. The plain hover/focus rules come first and carry no :has(), so a
   browser without :has() still lights the entry under the pointer or focus (it may then show
   two dots when both differ). The :has() rules sit in their own rules so they cannot take the
   plain ones down with them. */
#title :is(.btn,.pv-menu-sub button):is(:hover,:focus-visible) .pv-st{color:var(--pv-paper)!important}
#title #bCpu:is(:hover,:focus-visible) .pv-st{color:var(--pv-paper)!important}
#title :is(.btn,.pv-menu-sub button):is(:hover,:focus-visible) .pv-st::before{transform:translateY(-50%) scale(1)}
/* A hovered entry takes the dot from a lingering focus. */
#title:has(:is(.btn,.pv-menu-sub button):hover) :is(#bCpu,.btn,.pv-menu-sub button):focus-visible:not(:hover) .pv-st{color:var(--pv-st-off)!important}
#title:has(:is(.btn,.pv-menu-sub button):hover) :is(#bCpu,.btn,.pv-menu-sub button):focus-visible:not(:hover) .pv-st::before{transform:translateY(-50%) scale(0)}
/* Nothing hovered or focused: BRZA BORBA is the current choice. */
#title:not(:has(:is(.btn,.pv-menu-sub button):is(:hover,:focus-visible))) #bCpu .pv-st{color:var(--pv-paper)!important}
#title:not(:has(:is(.btn,.pv-menu-sub button):is(:hover,:focus-visible))) #bCpu .pv-st::before{transform:translateY(-50%) scale(1)}

/* Landscape phones: four full-height rows and the second line fit in 375px. */
html.phone #title .tl-main{align-content:center;row-gap:0}
html.phone #title .tl-left,html.phone #title .tm-hero{display:contents}
html.phone #title .tl-main #bCpu{grid-column:1;grid-row:1;min-height:calc(var(--pv-vh) * 17.2)}
html.phone #title .tm-grid{grid-column:1;grid-row:2}
html.phone #title .tl-right{grid-column:2;grid-row:2}
html.phone #title .tl-main .tm-grid :is(#bTour,#bRumble):not(#bRanked){min-height:calc(var(--pv-vh) * 14.2)}
html.phone #title .tl-main .tm-grid #bWatch:not(#bRanked){min-height:calc(var(--pv-vh) * 12.6)}
/* Rotated tablets (768x1024): 0.17.1 wrapped POSMATRAJ BORBU onto two lines, a 77px tile. */
html.rot:not(.phone) #title .tl-main .tm-grid #bWatch:not(#bRanked){min-height:max(calc(var(--s) * 6.5 + 28px),calc(var(--pv-vh) * 10.1))}
html.phone #title .pv-menu-sub{padding:0;gap:calc(var(--s) * 2)}
html.phone #title .pv-menu-sub :is(#bKeys,#bOpts,button){min-height:calc(var(--pv-vh) * 10.6)}
/* KONTROLE keeps its 0.17.1 tap height on phones but not its full-column width (owner ruling):
   label plus padding, at least 44px, so the second line reads as on desktop. */
html.phone #title .pv-menu-sub #bKeys{min-width:44px}
/* At phone sizes the second line is small: larger, lighter and more finely cut than on desktop
   so KONTROLE, OPCIJE and DOSIJEI read as easily as the 0.17.1 tiles. */
html.phone #title .pv-menu-sub{--pv-st-off:var(--pv-st-off-small);--pv-stencil-mask:var(--pv-stencil-mask-fine)}
html.phone #title .pv-menu-sub .pv-st,html.phone #title .pv-menu-sub #bKeys .pv-button-name{font-size:max(calc(var(--s) * 2.6),16px)}

@media(prefers-reduced-motion:reduce){
 #title :is(.tl-main,.pv-menu-sub) .pv-st,#title :is(.tl-main,.pv-menu-sub) .pv-st::before{transition:none}
}

/* ===================================================================== 3. Fighter select (#select) and arena pick (#stagepick)
   Stencil headings, pink step labels, rule frames on the portrait cards, and the footer as
   stencil words. TEŽINA BOTOVA (.tl-diff, moved here by serbian-ui.js) and team size are rows
   of small stencil words with the red dot on the active level. Only frames, labels and colours
   change on the cards: the portrait and arena grids keep the geometry from serbian.css, and the
   footer row keeps its track height (42/38/32px on desktop, 32px on phones) in every step and
   mode, because these two screens are exempt from the whole-screen fit scaling. Minimum sizes
   below are the 0.17.1 hit boxes measured at every size of the responsive matrix; --s is the
   title's scale unit, which also sized the difficulty buttons when they lived there. */
/* The scale unit and the footer size tokens below are shared with the screens of sections 4-8. */
:is(#select,#stagepick,#opts,#pause,#keys,#result,#tour,.vx-pod){--s:clamp(5.4px,min(1vh,.62vw),11px)}

/* Headings and step labels. */
:is(#select,#stagepick) .sel-top{background:linear-gradient(90deg,#15182000,#151820d6 12% 88%,#15182000)}
html.phone :is(#select,#stagepick) .sel-top{background:linear-gradient(90deg,#151820d6 80%,#15182000)}
:is(#select,#stagepick) .sel-top h2{
 font-family:var(--pv-font-display);font-weight:700;line-height:1.15;letter-spacing:.1em;text-transform:uppercase;color:var(--pv-paper);
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}
/* Same for the arena pick, whose heading row is always content-sized (line-height 1 in 0.17.1). */
#stagepick .sel-top h2{margin-block:-.075em}
:is(#select,#stagepick) .sel-top .label{font-family:var(--pv-font-ui);font-weight:800;letter-spacing:.26em;color:var(--pv-label-ink);text-shadow:none}

/* Portrait cards: a thin rule frame, red for your pick, paper for the opponent's. */
#select .card:after{box-shadow:inset 0 0 0 1px #f6efda66}
#select .card:is(:hover,:focus-visible):after{box-shadow:inset 0 0 0 2px var(--pv-paper)}
#select .card.c1:after{box-shadow:inset 0 0 0 3px var(--pv-red)}
#select .card.c2:after{box-shadow:inset 0 0 0 3px var(--pv-paper)}
#select .card.c1.c2:after{box-shadow:inset 0 0 0 3px var(--pv-paper),inset 0 0 0 5px var(--pv-red)}
#select .card .nm{font-family:var(--pv-font-display);font-weight:700;text-transform:uppercase;background:linear-gradient(#15182000,#151820f0 55%);color:var(--pv-paper)}
/* English only: "FEMALE STUDENT" is two letters longer than STUDENTKINJA and must fit its card (serbian.css sizes the desktop names). */
html:lang(en):not(.phone) #select #grid .card .nm{letter-spacing:0;font-size:min(12.5px,12.8cqi)}
html.phone:lang(en) #select .card .nm{letter-spacing:0;font-size:12.5cqi}
/* English move and combo names run longer than the Serbian ones in the phone card panel. */
html.phone:lang(en) #select .mvl{font-size:11px}

/* Arena pick: the panel loses its frame; cards keep the theme's 1px rule and red current pick. */
#stagegrid .sg-dyn,html.phone #stagegrid .sg-dyn{background:#151820b8;box-shadow:none;border-radius:0}
#stagegrid .sg-dyn .stagecard{box-shadow:inset 0 0 0 1px #f6efda66}
#stagegrid .sg-dyn .stagecard:is(:hover,:focus-visible,[aria-pressed=true]){box-shadow:inset 0 0 0 3px var(--pv-red)}
#stagegrid .sg-h b{font-family:var(--pv-font-display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pv-paper);-webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask)}
#stagegrid .sg-h small{font-family:var(--pv-font-ui);font-weight:800;letter-spacing:.26em;color:var(--pv-label-ink)}
/* Arena names get the portrait names' treatment (Oswald 700, uppercase); size and wrapping as before. */
#stagegrid .stagecard b{font-family:var(--pv-font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em}

/* Footers (.pv-select-foot is set on the select footer row by serbian-ui.js). Three sizes of
   stencil word, as in the mockup: NAZAD smallest; the choices (team size and difficulty, equal
   weight) clearly larger, with the TEŽINA BOTOVA label above its levels; the advance actions
   (NASUMIČNO, the spectator action, the confirm action, NASUMIČNA ARENA) largest.
   No fills, frames or shadows; small words are lighter and finer-cut. */
:is(#select,#stagepick,#opts,#pause,#keys,#result,#tour,.vx-pod){
 --pv-foot-back:clamp(15px,calc(var(--s) * 2),18px);
 --pv-foot-choice:clamp(16px,calc(var(--s) * 3),24px);
 --pv-foot-go:clamp(18px,calc(var(--s) * 4.2),34px);
 --pv-foot-label:clamp(11px,calc(var(--s) * 1.5),14px);
 --pv-foot-caption:clamp(10px,calc(var(--s) * 1.3),12px);
 --pv-foot-gap:calc(var(--s) * 2.6);
}
/* Up to 1100px wide the spectator modes put two advance actions on the line: a little tighter. */
@media(max-width:1100px){#select,#stagepick{--pv-foot-go:clamp(18px,calc(var(--s) * 3.6),34px);--pv-foot-gap:calc(var(--s) * 2.2)}}
html.phone :is(#select,#stagepick,#opts,#pause,#keys,#result,#tour,.vx-pod){--pv-foot-back:14px;--pv-foot-choice:15px;--pv-foot-go:19px;--pv-foot-label:11px;--pv-foot-caption:10px;--pv-foot-gap:6px}
#select>.pv-select-foot,#stagepick>.row{--pv-st-off:var(--pv-st-off-small);--pv-stencil-mask:var(--pv-stencil-mask-fine)}
:is(#select>.pv-select-foot,#stagepick>.row) .btn,:is(#select>.pv-select-foot,#stagepick>.row) .btn:is(:hover,:focus-visible,:active){
 background:none;box-shadow:none;filter:none;transform:none;clip-path:none;border-radius:0;text-shadow:none;animation:none;
 color:var(--pv-paper);font-family:var(--pv-font-display);font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
 justify-content:center;
}
:is(#select>.pv-select-foot,#stagepick>.row) .btn{font-size:var(--pv-foot-back);line-height:1.25;padding:0 10px}
:is(#select #selRandom,#select #selPick,#stagepick #spRandDyn){font-size:var(--pv-foot-go)}
/* The spectator action is long: it takes the choice size, still above NAZAD, set a little tighter. */
#select #selWatchR{font-size:var(--pv-foot-choice)}
#select #selWatchR .pv-st{letter-spacing:.03em}
:is(#select>.pv-select-foot,#stagepick>.row) .btn .pv-st{position:relative;padding-left:var(--pv-dot-gutter);--pv-st-keep:var(--pv-dot-gutter)}

/* Team size and difficulty: rows of choice words with the red dot on the active one. The dot
   sizes are fractions of the word size, so the word's gutter and the caption indent agree. */
#select :is(#diff,#teamSize){
 display:flex;flex-wrap:nowrap;gap:calc(var(--s) * .8);margin:0;padding:0;background:none;box-shadow:none;border-radius:0;transform:none;
 --pv-seg-size:var(--pv-foot-choice);
 --pv-dot:calc(var(--pv-seg-size) * .5);--pv-dot-gap:calc(var(--pv-seg-size) * .3);--pv-dot-inset:calc(var(--pv-seg-size) * .05);
 --pv-dot-gutter:calc(var(--pv-dot-inset) + var(--pv-dot) + var(--pv-dot-gap));
}
#select :is(#diff,#teamSize) button{
 appearance:none;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;box-sizing:border-box;
 margin:0;padding:0 calc(var(--s) * .5);border:0;border-radius:0;background:none;box-shadow:none;filter:none;transform:none;
 color:var(--pv-paper);font-style:normal;text-transform:none;letter-spacing:0;white-space:nowrap;cursor:pointer;
}
#select :is(#diff,#teamSize) button:is(.on,[aria-pressed=true]){background:none!important;box-shadow:none}
#select :is(#diff,#teamSize) button .pv-st{position:relative;font-size:var(--pv-seg-size);line-height:1.2;padding-left:var(--pv-dot-gutter);--pv-st-keep:var(--pv-dot-gutter)}
#select #teamSize button .pv-st{letter-spacing:.08em}
/* Team-size words line up with the level words: the same box, with the caption's height kept free. */
#select #teamSize button{padding-bottom:calc(var(--pv-foot-caption) * 1.1)}
#select #diff button small{
 display:block;margin:0;padding-left:var(--pv-dot-gutter);font:600 var(--pv-foot-caption)/1.1 var(--pv-font-ui);
 letter-spacing:.06em;text-transform:none;color:var(--pv-quiet-ink);opacity:1;
}
#select :is(#diff,#teamSize) button .pv-st::before,:is(#select>.pv-select-foot,#stagepick>.row) .btn .pv-st::before{
 content:"";position:absolute;left:var(--pv-dot-inset);top:50%;width:var(--pv-dot);height:var(--pv-dot);transform:translateY(-50%);border-radius:50%;
}
/* The active level and team size: full paper with the red dot. */
#select :is(#diff,#teamSize) button[aria-pressed=true] .pv-st{color:var(--pv-paper)}
#select :is(#diff,#teamSize) button[aria-pressed=true] .pv-st::before{background:var(--pv-red);border-radius:50%;box-shadow:0 0 .2em var(--pv-red)}
/* Hover and focus light the word; the dot stays on the active choice. Actions take the dot. */
#select :is(#diff,#teamSize) button:is(:hover,:focus-visible) .pv-st,:is(#select>.pv-select-foot,#stagepick>.row) .btn:is(:hover,:focus-visible) .pv-st{color:var(--pv-paper)}
:is(#select>.pv-select-foot,#stagepick>.row) .btn:is(:hover,:focus-visible) .pv-st::before,#stagepick #spRandDyn .pv-st::before{background:var(--pv-red);box-shadow:0 0 .2em var(--pv-red)}
#select :is(#diff,#teamSize) button:disabled{opacity:.4;cursor:default}
/* VELIČINA TIMA and TEŽINA BOTOVA: small pink labels above their choices. The team-size label
   follows #teamSize in the DOM (serbian-ui.js) and is moved above it with order, so it can
   share the group's [hidden] state whenever the engine toggles it. */
#select :is(.tl-diff,.pv-team){display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;transform:none}
#select .pv-team-label{order:-1}
/* Wherever the engine hides team size (Turnir, the spectator modes, step 2), the group and its
   label leave the line; only the footer's height is fixed across steps and modes. */
html #select #teamSize[hidden]{display:none!important}
#select #teamSize[hidden]+.pv-team-label{display:none}
#select :is(.tl-diff,.pv-team) .label{display:block;margin:0 0 0 calc(var(--s) * .5);font:800 var(--pv-foot-label)/1.1 var(--pv-font-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--pv-label-ink);text-shadow:none;white-space:nowrap}
/* The arena pick's shape icon belongs to the old red button. */
#stagepick #spRandDyn .sp-sh{display:none}
#stagepick #spRandDyn .sp-t{font:inherit;letter-spacing:inherit;text-transform:inherit}
/* #selPick: the engine rewrites its text, so the whole button is the word (no cut) with the dot;
   a block box (vertically centred with align-content) keeps the dot inline before the first word. */
#select #selPick{color:var(--pv-paper);font-family:var(--pv-font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
html #select #selPick:not([hidden]){display:block;align-content:center}
#select #selPick::before{content:""!important;position:static;inset:auto;z-index:auto;transform:none;clip-path:none;filter:none;animation:none;display:inline-block;vertical-align:.08em;width:var(--pv-dot);height:var(--pv-dot);margin-right:var(--pv-dot-gap);border-radius:50%;background:var(--pv-red);box-shadow:0 0 .2em var(--pv-red)}
/* The satire note sits in the screen's bottom padding, under the footer; on desktop it moves
   to the right edge, under the advance action, clear of the difficulty captions. */
#select .pv-dialogue-note{bottom:1px}
html:not(.phone) #select .pv-dialogue-note{left:auto;right:24px;transform:none}

/* Focus: the vocabulary's 2px paper ring, inset so it stays inside each hit area; controller
   focus (part-070.js forces a yellow ring with !important) gets the same ring. */
#select>.pv-select-foot button:focus-visible,#stagepick>.row button:focus-visible{outline:2px solid var(--pv-paper);outline-offset:-2px}
html.pad #select>.pv-select-foot button:focus,html.pad #stagepick>.row button:focus{outline:2px solid var(--pv-paper)!important;outline-offset:-2px!important}

/* Desktop and tablet. The footer track takes 14px of the screen's bottom padding (the satire
   note keeps the rest), so the portrait grid above it does not move: grid bottom = padding +
   footer + gap, as in serbian.css at every breakpoint. */
html:not(.phone) #select{grid-template-rows:112px minmax(0,1fr) 126px 56px;padding-bottom:14px}
@media(max-width:900px){html:not(.phone) #select{grid-template-rows:112px minmax(0,1fr) 164px 51px;padding-bottom:14px}}
@media(max-height:620px){html:not(.phone) #select{grid-template-rows:86px minmax(0,1fr) 92px 40px;padding-bottom:14px}}
/* One ruled line: NAZAD, team size | difficulty, then the advance actions at the right.
   :not(#selBack) only adds the id weight that serbian.css's #select>.row:has(#selBack) carries. */
html:not(.phone) #select>.pv-select-foot:not(#selBack){
 display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:flex-start;gap:var(--pv-foot-gap);
 box-sizing:border-box;width:100%;max-width:none;height:100%;padding:6px 0 0;
 background:linear-gradient(var(--pv-rule-ink),var(--pv-rule-ink)) top/100% 1px no-repeat;
}
html:not(.phone) #select>.pv-select-foot>*{flex:none;width:auto;margin:0}
/* Spectator modes have no team-size choice; it gives up its place (0.17.1 did the same). */
html:not(.phone) #select>.pv-select-foot:has(#selWatchR:not([hidden])) .pv-team{display:none}
html:not(.phone) #select .tl-diff{border-left:1px solid var(--pv-rule-ink);padding-left:var(--pv-foot-gap)}
html:not(.phone) #select>.pv-select-foot .btn{min-height:33px}
html:not(.phone) #select #selBack{width:auto;min-width:112px}
html:not(.phone) #select #selRandom{width:auto;min-width:132px;margin-left:auto}
html:not(.phone) #select #selWatchR{width:auto;height:auto;min-width:230px;min-height:42px}
html:not(.phone) #select #teamSize button{min-width:66px;min-height:33px}
/* Difficulty: never smaller than the title buttons were (up to 97x45 at 1920x1080). */
html:not(.phone) #select #diff button{min-height:calc(var(--s) * 4.3);min-width:calc(var(--s) * 9)}
@media(max-height:620px){
 html:not(.phone) #select #selBack{min-width:90px}
 html:not(.phone) #select #selRandom{min-width:112px}
 html:not(.phone) #select #selWatchR{min-width:216px;min-height:33px}
}
/* Touch tablets (coarse pointer, desktop layout) preview on the first tap and show the confirm
   action. It has no room on the footer line, and 0.17.1 dropped it below the screen; it sits in
   the free top-right corner instead, clear of the heading and the fighter panels. */
html:not(.phone) #select #selPick{position:absolute;z-index:3;top:24px;right:24px;margin:0;max-width:min(300px,30%);min-width:112px;min-height:74px;white-space:normal;text-align:right;justify-content:flex-end}
@media(max-height:620px){html:not(.phone) #select #selPick{top:10px}}
html:not(.phone) #stagepick #spBack{min-width:80px;min-height:33px}
html:not(.phone) #stagepick #spRandDyn{min-width:212px;min-height:44px}
/* Rotated tablets (768x1024) had taller 0.17.1 buttons (html.rot .btn padding). */
html.rot:not(.phone) #select>.pv-select-foot .btn,html.rot:not(.phone) #stagepick #spBack{min-height:38px}

/* Phones. The footer keeps its 0.17.1 32px row, now NAZAD and the spectator action. At 667px it
   cannot also hold the larger words and still end before the fighter art, so NASUMIČNO and the
   labelled team size join the confirm action in the right column, stacked above it (the fighter
   panel gives up that height), and TEŽINA BOTOVA sits on its own line just above the footer,
   under the portrait grid (the grid's two reserved card rows end above it in both steps).
   Tab order is unchanged. */
html.phone #select>.pv-select-foot{height:32px;align-items:center;gap:var(--pv-foot-gap)}
/* VELIČINA TIMA with its choices cannot sit on the 32px footer row (the grid leaves no height for
   a label above it), so on phones the team-size group joins the right column too, above NASUMIČNO,
   centred in the confirm action's width. */
html.phone #select .pv-team{
 position:absolute;z-index:3;right:var(--pv-pick-right);bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + var(--pkH) + 40px);
 width:calc(max(210px,33cqw) - 2 * var(--pv-pick-inset));display:grid;justify-content:center;justify-items:start;row-gap:1px;
}
html.phone #select #selBack{min-width:63px;min-height:27px}
html.phone #select{--pv-pick-inset:clamp(12px,3vw,48px);--pv-pick-right:calc(max(16px,env(safe-area-inset-right,0px)) + var(--pv-pick-inset))}
html.phone #select #selRandom{
 position:absolute;z-index:3;right:var(--pv-pick-right);bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + var(--pkH) + 4px);
 width:calc(max(210px,33cqw) - 2 * var(--pv-pick-inset));min-width:90px;min-height:32px;margin:0;
}
html.phone #select .sel-mid{padding-bottom:calc(var(--pkH) + 10px + 36px + 40px)}
html.phone #select #selWatchR{min-width:170px;min-height:27px;font-size:16px}
html.phone #select #teamSize button{min-width:47px;min-height:24px;padding:0;justify-content:center}
html.phone #select #teamSize button .pv-st{letter-spacing:.04em}
html.phone #select>.pv-select-foot :is(.btn,#teamSize button){padding-inline:4px}
/* The confirm action loses the donor's yellow glow pulse with its box. */
html.phone #select #selPick{animation:none;filter:none;letter-spacing:.02em}
html.phone #select .tl-diff{position:absolute;z-index:3;left:16px;bottom:43px}
html.phone.rot #select .tl-diff{bottom:47px}
html.phone #select #diff button{min-width:52px;min-height:25px}
html.phone.rot #select #diff button{min-height:31px}
/* The heading's taller stencil line box (room for carons) must not push the portrait grid down
   (phones: the heading row is sized by its content, at line-height 1 in 0.17.1). */
html.phone #select .sel-top h2{margin-block:-.075em}
html.phone #stagepick #spBack{min-width:71px;min-height:32px}
html.phone #stagepick #spRandDyn{min-width:150px;min-height:32px}
html.phone.rot #stagepick #spBack{min-width:63px;min-height:27px}
html.phone.rot #stagepick #spRandDyn{min-width:141px;min-height:28px}

/* Small fix: an empty opponent panel drew an empty framed box on desktop in step 1. */
#select .sel-mid>div:has(.nameplate:empty){background:none!important;box-shadow:none!important}

/* ===================================================================== 4. Shared by Opcije, pause, Kontrole, results and tournament
   Actions on these screens use the footer sizes of section 3 (--pv-foot-back < --pv-foot-choice
   < --pv-foot-go): NAZAD and the other back actions smallest, secondary actions at the choice
   size, the primary action largest. Every button keeps its 0.17.1 padding, so its box is never
   smaller than in 0.17.1 (measured at every size of the responsive matrix); only fills, frames
   and shadows go. Every label is a stencil word (.pv-st, wrapped by serbian-ui.js, which also
   re-wraps the labels the engine rewrites (#rAgain, #rChars) or builds later (the podium). */
:is(#opts,#pause,#keys,#result,#tour) .btn,:is(#opts,#pause,#keys,#result,#tour) .btn:is(:hover,:focus-visible,:active),
.vx-pod .pd-btns .btn,.vx-pod .pd-btns .btn:is(:hover,:focus-visible,:active){
 background:none;box-shadow:none;filter:none;transform:none;clip-path:none;border-radius:0;text-shadow:none;animation:none;
 color:var(--pv-paper);font-family:var(--pv-font-display);font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
 justify-content:center;align-items:center;text-align:center;line-height:1.25;
}
:is(#opts,#pause,#keys,#result,#tour),.vx-pod{--pv-st-off:var(--pv-st-off-small)}
/* Secondary entries here were 19px boxed words in 0.17.1 on desktop: the choice size keeps that
   floor (section 3's phone sizes still apply on phones, where 0.17.1 used 15px). */
:is(#opts,#pause,#keys,#result,#tour,.vx-pod){--pv-foot-choice:clamp(19px,calc(var(--s) * 3),24px)}
/* Rotated tablets (768x1024) set every 0.17.1 button at 17px (html.rot .btn): back actions keep that. */
html.rot:not(.phone) :is(#opts,#pause,#keys,#result,#tour,.vx-pod){--pv-foot-back:17px}
/* Small words (back and secondary) take the finer cut. */
#opts .btn .pv-st,:is(#keysBack,#pvKeysReset,#tQuit,#pOpts,#pQuit) .pv-st{--pv-stencil-mask:var(--pv-stencil-mask-fine)}
/* The dot: reserved gutter on every word so nothing shifts; shown on hover and focus. */
:is(#opts,#pause,#keys,#result,#tour) .btn .pv-st,.vx-pod .pd-btns .btn .pv-st,#pause .pv-pause-links .pv-st{position:relative;padding-left:var(--pv-dot-gutter);--pv-st-keep:var(--pv-dot-gutter);transition:color .14s}
:is(#opts,#pause,#keys,#result,#tour) .btn .pv-st::before,.vx-pod .pd-btns .btn .pv-st::before,#pause .pv-pause-links .pv-st::before{
 content:"";position:absolute;left:var(--pv-dot-inset);top:50%;width:var(--pv-dot);height:var(--pv-dot);border-radius:50%;
 background:var(--pv-red);box-shadow:0 0 .2em var(--pv-red);transform:translateY(-50%) scale(0);transition:transform .14s;
}
:is(#opts,#pause,#keys,#result,#tour) .btn:is(:hover,:focus-visible) .pv-st,.vx-pod .pd-btns .btn:is(:hover,:focus-visible) .pv-st,#pause .pv-pause-links button:is(:hover,:focus-visible) .pv-st{color:var(--pv-paper)}
:is(#opts,#pause,#keys,#result,#tour) .btn:is(:hover,:focus-visible) .pv-st::before,.vx-pod .pd-btns .btn:is(:hover,:focus-visible) .pv-st::before,#pause .pv-pause-links button:is(:hover,:focus-visible) .pv-st::before{transform:translateY(-50%) scale(1)}
/* Focus: the vocabulary's 2px paper ring. On a control without a stencil word (sliders, key rows,
   SEĆANJE) it is inset in the control's box; controller focus (part-070.js forces a yellow ring
   with !important) gets the same ring. Controls with a word carry the ring on the word (section 9). */
:is(#opts,#pause,#keys,#result,#tour) :is(button,input[type=range]):focus-visible,.vx-pod .pd-btns button:focus-visible{outline:2px solid var(--pv-paper);outline-offset:-2px}
html.pad :is(#opts,#pause,#keys,#result,#tour) :is(button,input[type=range]):focus,html.pad .vx-pod .pd-btns button:focus{outline:2px solid var(--pv-paper)!important;outline-offset:-2px!important}
/* Stencil headings (the inline 0.17.1 size stays; weight, case and cut change). A line-height of
   1.25 keeps the carons inside the masked box (and is shorter than the old normal line). */
:is(#opts,#keys)>h2{
 font-weight:700!important;line-height:1.25;letter-spacing:.14em;text-transform:uppercase;color:var(--pv-paper);
 -webkit-text-stroke:0!important;text-shadow:none!important;
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}

/* ===================================================================== 5. Opcije (#opts)
   Stencil heading over the dimmed scene (as in the mockup), the panel without its box, rows
   divided by paper rules, slim sliders with a red knob, and NAZAD / KONTROLE as stencil words
   under the panel's edges. The rules are drawn outside the rows' boxes, so nothing moves. */
#opts{background:#151820cc}
#opts .panel{background:none!important;box-shadow:none!important;clip-path:none;border-radius:0!important;--pv-row-gap:14px}
html.phone #opts .panel{--pv-row-gap:8px}
#opts .panel>.label{font:800 13px/1.2 var(--pv-font-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--pv-label-ink)}
#opts .vol-row{position:relative;font-family:var(--pv-font-ui);font-weight:700;letter-spacing:.02em;color:var(--pv-paper)}
#opts .vol-row::before,#opts .vol-row:last-of-type::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--pv-rule-ink);pointer-events:none}
#opts .vol-row::before{top:calc(var(--pv-row-gap) / -2)}
#opts .vol-row:last-of-type::after{bottom:calc(var(--pv-row-gap) / -2)}
#opts .vol-row output{font-family:var(--pv-font-ui);font-weight:700;color:var(--pv-quiet-ink)}
/* The input keeps its 30px box (the grab area); only the track and knob are redrawn. */
#opts input[type=range]{-webkit-appearance:none;appearance:none;background:none;cursor:pointer;--pv-knob:18px}
html.phone #opts input[type=range]{--pv-knob:20px}
#opts input[type=range]::-webkit-slider-runnable-track{height:3px;border:0;border-radius:0;background:#f6efda66}
#opts input[type=range]::-webkit-slider-thumb{
 -webkit-appearance:none;appearance:none;width:var(--pv-knob);height:var(--pv-knob);margin-top:calc((3px - var(--pv-knob)) / 2);
 border:0;border-radius:50%;background:var(--pv-red);box-shadow:0 0 6px #bd2b39aa;
}
#opts input[type=range]::-moz-range-track{height:3px;border:0;border-radius:0;background:#f6efda66}
#opts input[type=range]::-moz-range-progress{height:3px;background:var(--pv-paper)}
#opts input[type=range]::-moz-range-thumb{width:var(--pv-knob);height:var(--pv-knob);border:0;border-radius:50%;background:var(--pv-red);box-shadow:0 0 6px #bd2b39aa}
/* The credit keeps the 16px that .panel p gave it in 0.17.1. */
#opts .pv-music-credit{font-family:var(--pv-font-ui);font-weight:600;letter-spacing:.03em}
/* .panel p (donor) painted the credit lavender: paper at a readable opacity instead. */
#opts .panel .pv-music-credit{color:#f6efdacc}
#opts .panel .pv-music-credit a{color:var(--pv-paper)}
/* NAZAD left, KONTROLE right, on the panel's width. */
#opts .pv-opts-actions{width:min(520px,100%);justify-content:space-between;flex-wrap:nowrap}
/* Phones have no KONTROLE here: NAZAD stays centred, clear of the touch stick when opened from pause. */
html.phone #opts .pv-opts-actions{justify-content:center}
/* Jezik · Language (#pvLangRow, 0.19): the two languages as choice words on one ruled row, the
   current one in full paper with the red dot (aria-pressed, set by serbian-ui.js). */
/* Phones: the row's panel gives up most of its padding so Opcije still fits 667x375 without scrolling. */
html.phone #opts .pv-lang{padding-block:6px}
#opts .pv-lang-row{position:relative;display:flex;flex-wrap:wrap;gap:0 calc(var(--s) * 2);align-items:center}
#opts .pv-lang-row::before,#opts .pv-lang-row::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--pv-rule-ink);pointer-events:none}
#opts .pv-lang-row::before{top:calc(var(--pv-row-gap) / -2)}
#opts .pv-lang-row::after{bottom:calc(var(--pv-row-gap) / -2)}
#opts .pv-lang-row .btn{font-size:var(--pv-foot-choice);padding-inline:0}
#opts .pv-lang-row .btn[aria-pressed=true] .pv-st{color:var(--pv-paper)}
#opts .pv-lang-row .btn[aria-pressed=true] .pv-st::before{transform:translateY(-50%) scale(1)}
#opts #optsBack{font-size:var(--pv-foot-back)}
#opts #pvKeysOptions{font-size:var(--pv-foot-choice)}

/* ===================================================================== 6. Pause (#pause)
   A small pink PAUZA label and the entries as a centred list of stencil words over the dimmed
   fight; NASTAVI holds the dot unless another entry is hovered or focused. DOSIJEI and the
   quiet SEĆANJE sit on a ruled, smaller line below. */
#pause{background:#151820d9!important}
#pause>h2{
 font:800 clamp(13px,calc(var(--s) * 2),18px)/1.2 var(--pv-font-ui)!important;letter-spacing:.26em;text-transform:uppercase;
 color:var(--pv-label-ink);-webkit-text-stroke:0!important;text-shadow:none!important;margin:0!important;
}
#pause #pResume{font-size:var(--pv-foot-go)}
#pause #pOpts,#pause #pQuit{font-size:var(--pv-foot-choice)}
/* A hovered entry (list or links line) takes the dot from a lingering focus. */
#pause:has(:is(.btn,.pv-pause-links button):hover) :is(.btn,.pv-pause-links button):focus-visible:not(:hover) .pv-st{color:var(--pv-st-off)}
#pause:has(:is(.btn,.pv-pause-links button):hover) :is(.btn,.pv-pause-links button):focus-visible:not(:hover) .pv-st::before{transform:translateY(-50%) scale(0)}
/* Nothing hovered or focused: NASTAVI is the current choice. */
#pause:not(:has(:is(.btn,.pv-pause-links button):is(:hover,:focus-visible))) #pResume .pv-st{color:var(--pv-paper)}
#pause:not(:has(:is(.btn,.pv-pause-links button):is(:hover,:focus-visible))) #pResume .pv-st::before{transform:translateY(-50%) scale(1)}
#pause .pv-pause-links{
 width:min(380px,100%);gap:calc(var(--s) * 3);margin-top:4px;padding-top:6px;
 background:linear-gradient(var(--pv-rule-ink),var(--pv-rule-ink)) top/100% 1px no-repeat;
}
#pause .pv-pause-links button,#pause .pv-pause-links button:is(:hover,:focus-visible,:active){
 background:none;border-color:transparent;box-shadow:none;transform:none;border-radius:0;color:var(--pv-paper);
}
/* The secondary line is smaller than the list: DOSIJEI at the back size. */
#pause .pv-pause-links button:not(.pv-quiet){font:700 var(--pv-foot-back)/1.25 var(--pv-font-display);letter-spacing:.14em;text-transform:uppercase}
#pause .pv-pause-links button .pv-st{--pv-stencil-mask:var(--pv-stencil-mask-fine)}
/* serbian.css sets the links' font shorthand at (0,1,1), over .pv-quiet's own family and weight. */
/* SEĆANJE is quieter than DOSIJEI on every size: a smaller, lighter word (85% of the back size,
   weight 500, narrower spacing; never under 0.17.1's 13px) in the quiet ink, no cut, no dot; full paper on hover/focus. A
   tight charcoal halo keeps it readable where it sits over the white floor logo. Its box keeps 0.17.1's 79x34 hit area. */
#pause .pv-pause-links .pv-quiet{font:500 max(13px,calc(var(--pv-foot-back) * .85))/1.25 var(--pv-font-ui);letter-spacing:.2em;text-transform:uppercase;min-width:79px;min-height:34px}
#pause .pv-pause-links button.pv-quiet{color:var(--pv-quiet-ink);text-shadow:0 0 3px var(--pv-ink),0 1px 2px var(--pv-ink)}
#pause .pv-pause-links button.pv-quiet:is(:hover,:focus-visible){color:var(--pv-paper)}

/* ===================================================================== 7. Kontrole (#keys)
   Behaviour is serbian-controls.js's; only the look changes. Stencil heading over the dimmed
   scene, panels without boxes (a rule on top instead), key rows as ruled rows with the key
   names kept on paper keycaps (the most legible part of the screen), the row awaiting a key
   marked with the red dot. NAZAD, VRATI POČETNE and ISPROBAJ KONTROLE are stencil words. */
#keys{background:#151820c2}
#keys .panel{
 background:linear-gradient(var(--pv-rule-ink),var(--pv-rule-ink)) top/100% 1px no-repeat!important;
 box-shadow:none!important;clip-path:none;border-radius:0!important;
}
#keys .panel .label{font-family:var(--pv-font-ui);font-weight:800;letter-spacing:.26em;color:var(--pv-label-ink)}
#keys .keys kbd{background:var(--pv-ink);color:var(--pv-paper);border-radius:2px;box-shadow:inset 0 0 0 1px #f6efda59}
#keys .pv-key-row{background:none;border-color:transparent transparent var(--pv-rule-ink);border-radius:0;font-family:var(--pv-font-ui)}
#keys .pv-key-row:is(:hover,[aria-pressed="true"]){background:#f6efda14;border-color:transparent transparent var(--pv-paper)}
/* 0.17.1 named BarlowSC, which no stylesheet defines, so the editor fell back to Arial; Barlow is
   narrower, so the key names go up a pixel to read at least as easily. */
#keys .pv-key-row kbd{font-family:var(--pv-font-ui);font-size:15px}
/* serbian-controls.css inks the rows #fff3da and the keycaps #211c24: the palette paper and charcoal. */
#keys .pv-key-row{color:var(--pv-paper)}
#keys .pv-key-row:not([aria-pressed="true"]) kbd{color:var(--pv-ink)}
#keys .pv-key-row>span::before{
 content:"";display:inline-block;width:var(--pv-dot);height:var(--pv-dot);margin-right:var(--pv-dot-gap);vertical-align:.08em;
 border-radius:50%;background:var(--pv-red);box-shadow:0 0 .2em var(--pv-red);transform:scale(0);transition:transform .14s;
}
#keys .pv-key-row[aria-pressed="true"]>span::before{transform:scale(1)}
#keys .pv-key-row[aria-pressed="true"] kbd{background:var(--pv-red);border-color:var(--pv-red);color:var(--pv-paper)}
#keys .pv-key-header p,#keys .pv-key-status{font-family:var(--pv-font-ui)}
/* .panel p (donor) painted the editor's lines lavender: paper instead. The success and error
   colours of the status line stay as serbian-controls.css sets them. */
#keys .panel :is(.pv-key-header p,.pv-key-status:not([data-kind=success],[data-kind=error]),p:not(.pv-key-status)){color:#f6efdae6}
/* Short desktops (serbian-controls.css makes the footer sticky there): an opaque charcoal band
   with a short fade on top, so the scrolled text never shows through the unboxed words. */
@media(max-height:700px),(max-width:690px){
 /* The sticky row stops at #keys' 24px bottom padding: a charcoal shadow fills that strip too. */
 html:not(.phone) #keys>.row:has(#keysBack){background:linear-gradient(#15182000,#151820 16px);padding-top:18px;box-shadow:0 24px 0 #151820}
 html:not(.phone) #keys{scroll-padding-bottom:80px}
}
/* VRATI POČETNE is a tool inside the editor panel: the smallest size, so it does not read as a heading. */
#keys #pvKeysReset{font-size:var(--pv-foot-back)}
#keys #keysBack{font-size:var(--pv-foot-back)}
#keys #keysTry{font-size:var(--pv-foot-go)}

/* ===================================================================== 8. Results (#result), tournament bracket (#tour) and podium (.vx-pod)
   Layout unchanged. The winner line becomes a stencil heading (its colour is the fighter's,
   set inline by the engine); the actions are a centred list as in pause, with the primary
   action largest and holding the dot by default. On the bracket only the headings and the
   actions change (the bracket diagram is engine-drawn art); the fighter panels lose the
   violet. On the podium, the title and the buttons. */
/* The dimming starts high and is 70% charcoal by mid-screen, where the actions sit, so they read
   on phones over a light arena floor; the winner art above stays mostly clear. */
#result{background:linear-gradient(#15182000 15%,#151820b3 50%,#151820f0)!important}
#resName{
 font-weight:700;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;transform:none;
 -webkit-text-stroke:0!important;text-shadow:none!important;margin-block:-.175em;
 /* A charcoal paint edge (as the mockup's knockout word) keeps it legible over the arena floor;
    it is drawn before the mask, so the cut stays clean. */
 filter:drop-shadow(0 0 .05em #151820) drop-shadow(.03em .05em 0 #151820);
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}
#result #resSub{font-family:var(--pv-font-ui);font-weight:700;color:var(--pv-paper);text-shadow:0 1px 3px #151820,0 0 8px #151820}
#result #rAgain{font-size:var(--pv-foot-go)}
#result #rChars{font-size:var(--pv-foot-choice)}
#result #rMenu{font-size:var(--pv-foot-choice)}
/* A charcoal shadow under the action words (cut with them by the mask) for the brightest floors. */
#result .menu .btn .pv-st{text-shadow:0 1px 3px var(--pv-ink),0 0 8px var(--pv-ink)}
#result:has(.menu .btn:hover) .menu .btn:focus-visible:not(:hover) .pv-st{color:var(--pv-st-off)}
#result:has(.menu .btn:hover) .menu .btn:focus-visible:not(:hover) .pv-st::before{transform:translateY(-50%) scale(0)}
#result:not(:has(.menu .btn:is(:hover,:focus-visible))) #rAgain .pv-st{color:var(--pv-paper)}
#result:not(:has(.menu .btn:is(:hover,:focus-visible))) #rAgain .pv-st::before{transform:translateY(-50%) scale(1)}

#tour .tb-title .label{font-family:var(--pv-font-ui);font-style:normal;font-weight:800;letter-spacing:.26em;color:var(--pv-label-ink)}
#tour .tb-title h2,#tour .bk-head{
 background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--pv-paper);-webkit-text-stroke:0;filter:none;
 font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}
/* Each taller line box gives back its extra height in negative margins, so nothing moves. */
#tour .tb-title h2{line-height:1.25;margin-block:calc(.6cqh - .15em) -.15em;letter-spacing:.05em}
/* Oswald 700 is wider than the donor's 400: the round title's box (22cqw in part-050.js) gets the
   free width between the semi-final columns, so OSMINA FINALA stays on one line as in 0.17.1. */
#tour .tb-title{width:25cqw}
#tour .bk-head{transform:translateX(-50%);line-height:1.25;margin-top:-.125em;letter-spacing:.06em}
html #tour :is(#tMe,#tOpp){background:#151820e0}
/* part-050.js paints the fighter lines (.tinfo: difficulty, record) lavender #dcd2fb: paper instead. */
html #tour .tinfo{color:var(--pv-paper)}
#tour #tGo{font-size:var(--pv-foot-go)}
#tour #tQuit{font-size:var(--pv-foot-back)}
/* The footer keeps its 0.17.1 geometry: the action column is as wide as it was (139px; 146px on
   rotated tablets; 100px on phones), so the fighter panels keep their width and their stat rows.
   U BORBU takes a smaller advance size here (still the largest word on the screen) with tighter
   spacing and padding; NAPUSTI TURNIR drops the dot gutter (it lights on hover and focus). */
#tour{--pv-foot-go:clamp(19px,calc(var(--s) * 3),22px)}
html.phone #tour{--pv-foot-go:17px}
#tour .tb-go{width:139px}
html.rot:not(.phone) #tour .tb-go{width:146px}
html.phone #tour .tb-go{width:100px}
#tour .tb-go .btn{max-width:100%;box-sizing:border-box;padding-inline:4px;white-space:nowrap}
#tour #tGo{min-width:129px;min-height:46px;letter-spacing:.06em}
html.phone #tour #tGo{min-width:94px;min-height:32px;padding-inline:2px;letter-spacing:.04em}
#tour #tQuit{min-height:33px;letter-spacing:.04em}
html.phone #tour #tQuit{min-height:22px;padding-inline:1px;letter-spacing:0}
#tour #tQuit .pv-st{padding-left:0;--pv-st-keep:0px}
#tour #tQuit .pv-st::before{content:none}
/* 0.17.1 fit-scaled the rotated tablet's bracket to .9725 (its skewed round tags ran past the
   right edge); the restyled tags fit, so the screen is drawn at full size. The stats keep the size
   they were drawn at in 0.17.1 (12px x .9725), with a 2px narrower gap, and so their 3 rows. */
html.rot:not(.phone) #tour .tst-row{font-size:11.67px;column-gap:14px}
/* Round tags and the "next" marker (engine CSS in part-050.js: skewed, clipped gradient tags).
   Pink small labels, no skew, clip or gradient, same anchor (translate(-50%,-50%) kept) and the
   engine's size. The four round hues (orange, violet, cyan, yellow) become four palette strokes
   under the word (red, label pink, teal, paper), so the rounds stay told apart; the current round
   reads in paper with a thicker stroke, rounds played are dimmed. */
#tour .bk-lbl,#tour .bk-lbl.on{
 transform:translate(-50%,-50%);clip-path:none;background:none;text-shadow:0 0 4px #151820;
 padding:.5cqh .8cqw;font:800 max(2.6cqh,8px)/1.2 var(--pv-font-ui);letter-spacing:.08em;color:var(--pv-label-ink);
 box-shadow:inset 0 -2px 0 var(--bk-round,var(--pv-red));
}
#tour .bk-lbl.o{--bk-round:var(--pv-red)}
#tour .bk-lbl.v{--bk-round:var(--pv-label-ink)}
#tour .bk-lbl.c{--bk-round:#8ab4af}
#tour .bk-lbl.y{--bk-round:var(--pv-paper)}
#tour .bk-lbl{opacity:.85}
#tour .bk-lbl.on{opacity:1;color:var(--pv-paper);box-shadow:inset 0 -3px 0 var(--bk-round,var(--pv-red))}
#tour .bk-lbl.done{opacity:.5}
#tour .bk-next,#tour .bk-pair.R .bk-next{transform:translateY(-50%)}
#tour .bk-pair.fin .bk-next{transform:translateX(-50%)}
#tour .bk-next{background:none;box-shadow:none;color:var(--pv-paper);font:800 max(2cqh,8px)/1 var(--pv-font-ui);letter-spacing:.14em;text-shadow:0 0 4px #151820}
#tour .bk-next::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.35em;vertical-align:.02em;border-radius:50%;background:var(--pv-red);box-shadow:0 0 .2em var(--pv-red)}
/* The screens' advance actions always carry the dot, like NASUMIČNA ARENA on the arena pick. */
:is(#keys #keysTry,#tour #tGo) .pv-st{color:var(--pv-paper)}
:is(#keys #keysTry,#tour #tGo) .pv-st::before{transform:translateY(-50%) scale(1)}

.vx-pod .pd-head small{font-family:var(--pv-font-ui);letter-spacing:.26em;color:var(--pv-label-ink)}
.vx-pod .pd-title{
 background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--pv-paper);-webkit-text-stroke:0;filter:none;
 font-weight:700;letter-spacing:.08em;line-height:1.25;margin-block:calc(.8cqh - .125em) -.125em;
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}
.vx-pod .pd-btns .btn.hot{font-size:var(--pv-foot-go)}
.vx-pod .pd-btns .btn.ghost{font-size:var(--pv-foot-choice)}

@media(prefers-reduced-motion:reduce){
 :is(#opts,#pause,#keys,#result,#tour) .btn .pv-st,:is(#opts,#pause,#keys,#result,#tour) .btn .pv-st::before,
 .vx-pod .pd-btns .btn .pv-st,.vx-pod .pd-btns .btn .pv-st::before,#pause .pv-pause-links .pv-st,#pause .pv-pause-links .pv-st::before,#keys .pv-key-row>span::before{transition:none}
}

/* ===================================================================== 9. Focus ring on the word
   Keyboard and controller focus draw the 2px paper ring around the stencil word (dot included)
   instead of the whole hit area, so a focused entry never looks like a boxed button again. The
   word drops its cut while focused (the mask would also hide the ring). The box ring is removed
   only where :has(.pv-st) is understood; elsewhere both show, never neither. Controls without a
   word (sliders, key rows, SEĆANJE, #selPick) keep the box ring from sections 2-4. */
#title :is(.btn,.pv-menu-sub button):focus-visible:has(.pv-st),#select>.pv-select-foot button:focus-visible:has(.pv-st),#stagepick>.row button:focus-visible:has(.pv-st),:is(#opts,#pause,#keys,#result,#tour) button:focus-visible:has(.pv-st),.vx-pod .pd-btns button:focus-visible:has(.pv-st){outline:none}
#title :is(.btn,.pv-menu-sub button):focus-visible .pv-st,#select>.pv-select-foot button:focus-visible .pv-st,#stagepick>.row button:focus-visible .pv-st,:is(#opts,#pause,#keys,#result,#tour) button:focus-visible .pv-st,.vx-pod .pd-btns button:focus-visible .pv-st{-webkit-mask:none;mask:none;outline:2px solid var(--pv-paper);outline-offset:.12em}
html.pad #title :is(.btn,.pv-menu-sub button):focus:has(.pv-st),html.pad #select>.pv-select-foot button:focus:has(.pv-st),html.pad #stagepick>.row button:focus:has(.pv-st),html.pad :is(#opts,#pause,#keys,#result,#tour) button:focus:has(.pv-st),html.pad .vx-pod .pd-btns button:focus:has(.pv-st){outline:none!important}
html.pad #title :is(.btn,.pv-menu-sub button):focus .pv-st,html.pad #select>.pv-select-foot button:focus .pv-st,html.pad #stagepick>.row button:focus .pv-st,html.pad :is(#opts,#pause,#keys,#result,#tour) button:focus .pv-st,html.pad .vx-pod .pd-btns button:focus .pv-st{-webkit-mask:none;mask:none;outline:2px solid var(--pv-paper)!important;outline-offset:.12em!important}

/* ===================================================================== 10. Fight banners (#banner, #cbBanner) and arena notices
   The donor's comic pop (stroke, orange/violet shadow stack, overshooting scale) goes. Round,
   POČINJE!, time-up and the Svi protiv svih banners are a tilted paper stencil word with a thin
   charcoal paint edge (legible on bright arenas; drawn before the mask, so the cut stays clean).
   NOKAUT! (and ISPAO SI in Svi protiv svih) is red with a red paint glow over a heavier charcoal
   outline: the engine writes only text into #banner, so serbian-ui.js tags those finishers
   data-pv-banner="ko". Positions of both banners stay as the donor sets them; so do their sizes,
   except #banner below 1260px wide (see below). The combo banner keeps its
   name/icon/label rows; only the name becomes a stencil word. Arena notices keep every position
   rule of serbian.css (nothing here touches .pv-arena-events); the word loses its paper box and
   side bar and gets a red underline stroke. Each block-padding is 0 so the mask's 1lh period
   starts on the text line, and the underline falls in the uncut top of the next period. */
/* Size: the donor's clamp(48px,11vw,120px) let VREME JE ISTEKLO! (17 letters, Oswald, spaced) run
   edge to edge below 1260px wide. Here it is clamp(44px,9.5vw,120px): 9.5vw keeps that line inside
   ~86% of the width, and the minimum drops from 48px to 44px so it still fits at 1024px and below.
   The 120px maximum (every width from 1264px up) and the phone size (html.phone #banner,
   clamp(40px,14vh,80px), which wins on specificity) are unchanged. */
#banner{
 font-size:clamp(44px,9.5vw,120px);font-family:var(--pv-font-display);font-weight:700;font-style:normal;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;
 color:var(--pv-paper);-webkit-text-stroke:0;paint-order:normal;text-shadow:none;
 transform:translateY(-50%) rotate(-4deg);
 filter:drop-shadow(0 0 .04em var(--pv-ink)) drop-shadow(.03em .05em 0 var(--pv-ink));
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}
/* Red on the red and brown arenas (Skupština carpet) needs more than the paper word's edge: a .05em
   charcoal halo plus a tight second one make a solid dark outline before the offset and the glow. */
#banner[data-pv-banner="ko"]{
 color:var(--pv-red);
 filter:drop-shadow(0 0 .05em var(--pv-ink)) drop-shadow(0 0 .02em var(--pv-ink)) drop-shadow(.03em .05em 0 var(--pv-ink)) drop-shadow(0 0 .12em #bd2b39aa);
}
/* Phone portrait rotates #app, so the donor's 14vh (html.phone #banner) reads the long axis there and
   hit its 80px cap: the wider stencil line then ran under the touch buttons. 14% of the rotated
   frame's height (the real width) gives the same size as the landscape phone. */
html.phone.rot #banner{font-size:clamp(40px,calc(var(--rw,100vw) * .14),80px)}
#banner.pop{animation:pv-stencil-banner .32s ease-out}
@keyframes pv-stencil-banner{from{opacity:0;transform:translateY(-50%) rotate(-4deg) scale(1.12)}}
/* No current engine path writes a sub-line into #banner; should one appear it is a pink label,
   on its own line, sized so the banner's cut stays a thin line through it. */
#banner small{font:800 .26em/1.4 var(--pv-font-ui);letter-spacing:.26em;color:var(--pv-label-ink);-webkit-text-stroke:0;text-shadow:none}

#cbBanner{-webkit-text-stroke:0;paint-order:normal;text-shadow:none}
/* SERIJA · <fighter>: a small label in the fighter's accent (set inline by the engine) with a tight
   charcoal halo, no offset shadow, so a red accent still reads over the red carpet or a red shirt. */
#cbBanner small{font-family:var(--pv-font-ui);font-weight:800;letter-spacing:.2em;text-shadow:0 0 2px var(--pv-ink),0 0 4px var(--pv-ink),0 0 1px var(--pv-ink)}
/* The combo name is the banner's only direct span (the icons are spans inside <b>); centred under
   the icons (serbian.css narrowed it without centring it). The paint edge is a little heavier than
   the round banner's: the name sits over the bright arena floor. */
#cbBanner>span{
 margin-inline:auto;font-family:var(--pv-font-display);font-weight:700;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;
 color:var(--pv-paper);transform:rotate(-3deg);
 filter:drop-shadow(0 0 .06em var(--pv-ink)) drop-shadow(.04em .06em 0 var(--pv-ink));
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
}
#cbBanner.pop{animation:pv-stencil-combo 1.5s ease-out forwards}
@keyframes pv-stencil-combo{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:none}75%{opacity:1}to{opacity:0;transform:translateY(-10px)}}

#pvArenaEvents .pv-arena-event{
 padding-block:0;background:none;border-left:0;border-radius:0;box-shadow:none;border-bottom:.12em solid var(--pv-red);
 color:var(--pv-paper);font-family:var(--pv-font-display);font-weight:700;font-style:normal;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;
 transform:rotate(3deg);
 filter:drop-shadow(0 0 .04em var(--pv-ink)) drop-shadow(.03em .05em 0 var(--pv-ink));
 -webkit-mask:var(--pv-stencil-mask);mask:var(--pv-stencil-mask);
 animation:pv-stencil-notice .16s ease-out;
}
/* Phone sizes (20-24px): the centred row sits over busy scenery, so the word gets a solid charcoal
   plate (paper lettering, same size, red underline kept) instead of the stencil cut and edge shadow. */
html.phone #pvArenaEvents .pv-arena-event{background:var(--pv-ink);color:var(--pv-paper);padding:.06em .4em .02em;-webkit-mask:none;mask:none;filter:none}
/* Desktop: tilt about the right end, so a long notice (TAXI DRIVERS ARE COMING) does not drop its right
   end onto the right hit counter (#hc2) below it; the left end rises instead, still under the health bar. */
/* No plate on desktop (owner-approved look); a heavier charcoal edge keeps the word legible over the
   Skupština benches and other busy scenery. */
html:not(.phone) #pvArenaEvents .pv-arena-event{transform-origin:100% 50%;
 -webkit-text-stroke:.08em var(--pv-ink);paint-order:stroke fill;
 filter:drop-shadow(0 0 .03em var(--pv-ink)) drop-shadow(0 0 .08em var(--pv-ink)) drop-shadow(.04em .06em 0 var(--pv-ink))}
@keyframes pv-stencil-notice{from{opacity:0;transform:translateY(-6px) rotate(3deg)}}

/* Bracket: TVOJ BORAC / SLEDEĆI PROTIVNIK (part-050.js paints them cyan) are small pink labels. */
#tour .tb-who{color:var(--pv-label-ink)}

@media(prefers-reduced-motion:reduce){
 #banner.pop,#pvArenaEvents .pv-arena-event{animation:none}
 /* The combo banner is shown only by its animation: without it, it shows while .pop is set (1.5s). */
 #cbBanner.pop{animation:none;opacity:1}
}