/* One stylesheet, two layouts picked from the viewport's shape (body[data-layout]): wide and tall.
   --u is the layout unit; body.touch shows the on-screen stick and hides key hints. */
:root { --az: #2f7dff; --cr: #ff3b4e; --az-tag: #cfe2ff; --cr-tag: #ffd3d6; --az-ban: #8fc0ff; --cr-ban: #ff8f9a; --fire: #ff8a1f; --gold: #ffd54a; --ink: #05070d; --u: min(1vw, 1.78vh);
  /* The safe area (a notch, a home bar) is read here and nowhere else. A host that writes the insets into the page is believed first. */
  --st: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --sr: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); --sb: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --sl: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: #f3f5fa; font: 600 calc(var(--u) * 1.5) / 1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
body[data-layout="tall"] { --u: min(2.1vw, 1.2vh); }
[hidden] { display: none !important; }
/* The pitch and the controls are the game's alone: no panning, zooming or long-press menu from a touch on them. */
#c, #hud, #joy, #pad, .btn { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
/* A finger on a button is on the button itself, never on a word or a picture inside it: those change while it is held
   (SHOOT becomes RELEASE), and a touch that began on something since replaced can lose its ending. */
#pad .btn * { pointer-events: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
/* The moment a signature shot is struck: a brief wash of its own colour over the picture. Each has its own shape and
   length as well as its colour: fire swells from below, lightning is one hard flash, the sky strike comes from above,
   the eclipse darkens the edges, frost is a slow pale breath, the sonic strike a quick ring. Of the ten that came
   later: the spiral is a pinwheel, the scorpion one slash, the comet (and the keeper's throw) light from the top of the
   picture, the earthskip a strip along the ground, the mirage either side of it, sand a slow haze from below, the
   gravity pass two rings, the rocket an ember at the boot and then (lit) a streak right across. Twin Thunder is the
   striker's colour (Kai blue, Rio gold), and both when the brother strikes it on (relay). */
#flash.inferno { background: radial-gradient(circle at 50% 70%, rgba(255, 140, 30, 0.34), rgba(255, 60, 0, 0) 68%); animation: fl 0.42s ease-out; }
#flash.thunder { background: radial-gradient(circle at 50% 55%, rgba(150, 215, 255, 0.42), rgba(47, 140, 255, 0) 58%); animation: fl 0.16s steps(3, jump-none); }
#flash.sky { background: linear-gradient(to bottom, rgba(255, 214, 80, 0.4), rgba(255, 170, 30, 0) 62%); animation: fl 0.3s ease-out; }
#flash.eclipse { background: radial-gradient(circle at 50% 50%, rgba(166, 107, 255, 0.1) 22%, rgba(40, 10, 90, 0.42) 100%); animation: fl 0.5s ease-out; }
#flash.frost { background: radial-gradient(circle at 50% 60%, rgba(200, 244, 255, 0.34), rgba(120, 220, 255, 0) 64%); animation: fl 0.55s ease-out; }
#flash.sonic { background: radial-gradient(circle at 50% 60%, rgba(255, 166, 43, 0) 18%, rgba(255, 196, 100, 0.36) 30%, rgba(255, 140, 0, 0) 56%); animation: fl 0.26s ease-out; }
#flash.spiral { background: conic-gradient(from 20deg at 50% 58%, rgba(46, 230, 255, 0.3), rgba(46, 230, 255, 0) 25%, rgba(46, 230, 255, 0.3) 50%, rgba(46, 230, 255, 0) 75%, rgba(46, 230, 255, 0.3)); animation: fl 0.34s ease-out; }
#flash.scorpion { background: linear-gradient(115deg, rgba(209, 77, 255, 0) 38%, rgba(228, 150, 255, 0.42) 50%, rgba(209, 77, 255, 0) 62%); animation: fl 0.2s ease-out; }
#flash.comet { background: radial-gradient(circle at 50% 10%, rgba(255, 150, 215, 0.4), rgba(170, 90, 255, 0.14) 40%, rgba(120, 60, 255, 0) 70%); animation: fl 0.5s ease-out; }
#flash.skip { background: linear-gradient(to top, rgba(255, 190, 60, 0.42), rgba(255, 177, 31, 0) 34%); animation: fl 0.22s ease-out; }
#flash.mirage { background: linear-gradient(90deg, rgba(143, 140, 255, 0.32), rgba(143, 140, 255, 0) 30%, rgba(143, 140, 255, 0) 70%, rgba(143, 140, 255, 0.32)); animation: fl 0.4s ease-out; }
#flash.twin { background: radial-gradient(circle at 50% 55%, rgba(150, 230, 255, 0.4), rgba(47, 208, 255, 0) 56%); animation: fl 0.16s steps(3, jump-none); }
#flash.twin.rio { background: radial-gradient(circle at 50% 55%, rgba(255, 226, 130, 0.4), rgba(255, 194, 51, 0) 56%); }
#flash.relay { background: linear-gradient(100deg, rgba(47, 208, 255, 0.36), rgba(47, 208, 255, 0) 46%, rgba(255, 194, 51, 0) 54%, rgba(255, 194, 51, 0.36)); animation: fl 0.2s steps(3, jump-none); }
#flash.sand { background: linear-gradient(to top, rgba(233, 201, 138, 0.42), rgba(233, 201, 138, 0.12) 45%, rgba(233, 201, 138, 0) 80%); animation: fl 0.6s ease-out; }
#flash.gravity { background: radial-gradient(circle at 50% 55%, rgba(61, 255, 134, 0) 12%, rgba(61, 255, 134, 0.3) 20%, rgba(61, 255, 134, 0) 30%, rgba(61, 255, 134, 0.22) 42%, rgba(61, 255, 134, 0) 54%); animation: fl 0.4s ease-out; }
#flash.rocket { background: radial-gradient(circle at 50% 78%, rgba(255, 90, 70, 0.3), rgba(255, 59, 70, 0) 50%); animation: fl 0.2s ease-out; }
#flash.rocket.lit { background: linear-gradient(to bottom, rgba(255, 59, 70, 0) 30%, rgba(255, 120, 90, 0.34) 46%, rgba(255, 240, 220, 0.5) 52%, rgba(255, 120, 90, 0.34) 58%, rgba(255, 59, 70, 0) 74%); animation: fl 0.22s ease-out; }
#flash.counter { background: radial-gradient(ellipse at 50% 0%, rgba(160, 120, 255, 0.36), rgba(138, 92, 255, 0) 62%); animation: fl 0.36s ease-out; }
#flash.double { background: linear-gradient(160deg, rgba(255, 214, 92, 0) 30%, rgba(255, 236, 170, 0.38) 48%, rgba(255, 214, 92, 0) 66%); animation: fl 0.26s ease-out; }
#flash.bicycle { background: linear-gradient(20deg, rgba(150, 225, 255, 0) 30%, rgba(214, 244, 255, 0.4) 48%, rgba(150, 225, 255, 0) 66%); animation: fl 0.28s ease-out; }
/* 0.6.0: the heroes' shots, each in its own colours and its own shape */
#flash.aurora { background: linear-gradient(to top, rgba(61, 255, 192, 0) 20%, rgba(61, 255, 192, 0.3) 52%, rgba(158, 82, 255, 0.3) 70%, rgba(158, 82, 255, 0) 92%); animation: fl 0.5s ease-out; }
#flash.plasma { background: radial-gradient(circle at 50% 55%, rgba(255, 61, 240, 0.4), rgba(51, 242, 255, 0.16) 36%, rgba(51, 242, 255, 0) 60%); animation: fl 0.18s steps(3, jump-none); }
#flash.petal { background: radial-gradient(circle at 30% 40%, rgba(255, 127, 181, 0.3), rgba(255, 127, 181, 0) 30%), radial-gradient(circle at 70% 65%, rgba(255, 210, 230, 0.3), rgba(255, 210, 230, 0) 32%); animation: fl 0.5s ease-out; }
#flash.tide { background: linear-gradient(to top, rgba(42, 139, 255, 0.42), rgba(200, 240, 255, 0.16) 26%, rgba(42, 139, 255, 0) 46%); animation: fl 0.36s ease-out; }
#flash.nova { background: radial-gradient(circle at 50% 58%, rgba(255, 245, 200, 0.22), rgba(255, 229, 102, 0) 30%); animation: fl 0.3s ease-out; }
#flash.nova.lit { background: radial-gradient(circle at 50% 55%, rgba(255, 255, 240, 0.55), rgba(255, 229, 102, 0.3) 22%, rgba(255, 184, 64, 0) 52%); animation: fl 0.22s ease-out; }
#flash.meteor { background: radial-gradient(circle at 50% 8%, rgba(255, 106, 43, 0.42), rgba(115, 30, 5, 0.16) 44%, rgba(115, 30, 5, 0) 70%); animation: fl 0.45s ease-out; }
#flash.neon { background: linear-gradient(90deg, rgba(0, 229, 255, 0) 30%, rgba(0, 229, 255, 0.34) 46%, rgba(255, 56, 178, 0.34) 54%, rgba(255, 56, 178, 0) 70%); animation: fl 0.22s steps(2, jump-none); }
#flash.gale { background: linear-gradient(100deg, rgba(225, 245, 255, 0) 10%, rgba(225, 245, 255, 0.3) 40%, rgba(190, 220, 242, 0.1) 70%, rgba(190, 220, 242, 0) 95%); animation: fl 0.34s ease-out; }
#flash.lunar { background: radial-gradient(circle at 50% 50%, rgba(10, 14, 40, 0.3) 20%, rgba(170, 182, 255, 0.34) 46%, rgba(170, 182, 255, 0) 62%); animation: fl 0.45s ease-out; }
#flash.prism { background: linear-gradient(110deg, rgba(255, 64, 51, 0) 20%, rgba(255, 64, 51, 0.24) 32%, rgba(255, 191, 38, 0.24) 42%, rgba(77, 255, 77, 0.24) 52%, rgba(64, 179, 255, 0.24) 62%, rgba(178, 102, 255, 0.24) 72%, rgba(178, 102, 255, 0) 84%); animation: fl 0.4s ease-out; }
#flash.vortex { background: conic-gradient(from 60deg at 50% 55%, rgba(43, 255, 122, 0.28), rgba(26, 140, 128, 0) 30%, rgba(43, 255, 122, 0.28) 60%, rgba(26, 140, 128, 0) 90%); animation: fl 0.4s ease-out; }
#flash.magma { background: linear-gradient(to top, rgba(255, 61, 31, 0.44), rgba(255, 178, 38, 0.14) 30%, rgba(255, 61, 31, 0) 52%); animation: fl 0.4s ease-out; }
#flash.glitch { background: repeating-linear-gradient(to bottom, rgba(182, 255, 59, 0.22) 0 6%, rgba(255, 51, 217, 0) 6% 14%, rgba(255, 51, 217, 0.18) 14% 18%, rgba(182, 255, 59, 0) 18% 30%); animation: fl 0.18s steps(3, jump-none); }
#flash.solar { background: radial-gradient(circle at 50% 60%, rgba(255, 176, 0, 0) 14%, rgba(255, 220, 120, 0.38) 26%, rgba(255, 176, 0, 0.12) 40%, rgba(255, 176, 0, 0) 58%); animation: fl 0.3s ease-out; }
#flash.crystal { background: linear-gradient(135deg, rgba(122, 107, 255, 0) 30%, rgba(196, 186, 255, 0.36) 46%, rgba(122, 107, 255, 0.2) 54%, rgba(122, 107, 255, 0) 70%); animation: fl 0.3s ease-out; }
#flash.nebula { background: radial-gradient(circle at 40% 45%, rgba(162, 75, 255, 0.32), rgba(255, 102, 191, 0.16) 36%, rgba(162, 75, 255, 0) 66%); animation: fl 0.55s ease-out; }
@keyframes fl { from { opacity: 1; } to { opacity: 0; } }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
/* scoreboard: the side with the ball has its name lit and a ball beside it */
#score { position: absolute; top: calc(var(--u) * 1.2 + var(--st)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * 0.5) calc(var(--u) * 1.3); background: rgba(6, 10, 22, 0.82); border-radius: calc(var(--u) * 1); border: 1px solid rgba(255, 255, 255, 0.14); pointer-events: none; white-space: nowrap; }
#score b { font-size: calc(var(--u) * 2.7); font-weight: 900; min-width: 1.1em; text-align: center; }
#score .tn { font-size: max(8px, calc(var(--u) * 1.45 * min(1, 7.5 / var(--n, 7)))); letter-spacing: 0.08em; padding-bottom: 0.15em; border-bottom: calc(var(--u) * 0.32) solid; opacity: 0.72; transition: opacity 0.15s; }
#score .dot { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dfe5f2 55%, #8b93a8); opacity: 0.1; transition: opacity 0.15s; }
#score[data-poss="0"] #pd0, #score[data-poss="1"] #pd1 { opacity: 1; box-shadow: 0 0 calc(var(--u) * 0.9) rgba(255, 255, 255, 0.8); }
#score[data-poss="0"] .t0, #score[data-poss="1"] .t1 { opacity: 1; text-shadow: 0 0 0.6em currentColor; }
.t0 { border-color: var(--az); } .t1 { border-color: var(--cr); }
/* the clock (the match's time, counting up) with the period under it in small capitals, both inside one pill no taller than the score */
#clockBox { display: grid; justify-items: center; font-size: calc(var(--u) * 2); line-height: 1.05; background: rgba(255, 255, 255, 0.1); padding: 0.1em 0.6em; border-radius: 0.5em; }
#clock { font-variant-numeric: tabular-nums; }
#phase { font-size: max(8px, calc(var(--u) * 0.95)); font-weight: 800; letter-spacing: 0.04em; opacity: 0.85; white-space: nowrap; }
#phase:empty { display: none; }
/* where his score is too wide for the room beside the pause button (an upright phone, two long names), the possession dots give way (ui.js) */
#score.tight .dot { display: none; }
/* The penalty shootout: each side's kicks under the scoreboard (the left team's on the left, in the order taken: scored
   filled, missed crossed out, still to come empty, the one being taken ringed), the shootout's score between them. */
#tally { position: absolute; top: calc(var(--u) * 6.9 + var(--st)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 1); padding: 0.2em 0.9em; border-radius: 1em; background: rgba(6, 10, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap; pointer-events: none; }
#tally span { display: flex; align-items: center; gap: max(3px, calc(var(--u) * 0.45)); padding-bottom: 0.25em; border-bottom: max(2px, calc(var(--u) * 0.25)) solid var(--az); }
#tally1 { border-color: var(--cr) !important; }
#tally b { font-size: max(8px, calc(var(--u) * 1.4)); font-weight: 900; font-variant-numeric: tabular-nums; }
#tally i { width: max(9px, calc(var(--u) * 1.15)); height: max(9px, calc(var(--u) * 1.15)); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); box-sizing: border-box; }
#tally i.g { background: #5be38a; border-color: #5be38a; }
#tally i.m { border-color: #ff5c6a; background: linear-gradient(45deg, transparent 38%, #ff5c6a 38% 62%, transparent 62%); }
#tally i.now { border-color: var(--gold); box-shadow: 0 0 0.5em rgba(255, 213, 74, 0.8); }
/* whose kick it is, and how to take it or save it */
#hint { position: absolute; left: 50%; bottom: calc(var(--u) * 2.4 + var(--sb)); transform: translateX(-50%); width: max-content; max-width: calc(var(--u) * 42); padding: 0.3em 0.9em; border-radius: 1em; background: rgba(6, 10, 22, 0.78); font-size: max(8px, calc(var(--u) * 1.3)); letter-spacing: 0.03em; line-height: 1.3; text-align: center; pointer-events: none; }
#hint b { color: var(--gold); font-weight: 900; letter-spacing: 0.08em; }
/* in the shootout the energy and the moves bar mean nothing: the record and the hint take their places */
#hud.pens #energy, #hud.pens #who { display: none; }
#hud.pens #tag { top: calc(var(--u) * 10.2 + var(--st)); }
#hud.pens #talk { top: calc(var(--u) * 12.9 + var(--st)); }
/* SHOOT aimed over the bar: its charge ring turns red */
.btn.big.over { --gold: #ff5c6a; }
/* where a penalty is aimed (the point of the goal line, at the height it will cross it), red once it would go over the
   bar; in blue, where his keeper will dive. Under every other part of the display, as the name tags are. */
#aimMark { position: absolute; left: 0; top: 0; z-index: -1; width: max(26px, calc(var(--u) * 3.2)); height: max(26px, calc(var(--u) * 3.2)); margin: min(-13px, calc(var(--u) * -1.6)) 0 0 min(-13px, calc(var(--u) * -1.6)); border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px rgba(255, 213, 74, 0.6); pointer-events: none !important; will-change: transform; }
#aimMark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55); }
#aimMark.over { --gold: #ff5c6a; } #aimMark.dive { --gold: #8fd6ff; border-style: dashed; }
#tag { position: absolute; top: calc(var(--u) * 6.9 + var(--st)); left: 50%; transform: translateX(-50%); background: var(--cr); padding: 0.1em 0.9em; border-radius: 1em; font-size: max(8px, calc(var(--u) * 1.4)); letter-spacing: 0.12em; white-space: nowrap; pointer-events: none; }
#pauseBtn { position: absolute; top: calc(var(--u) * 1.2 + var(--st)); right: calc(var(--u) * 1.4 + var(--sr)); width: max(48px, calc(var(--u) * 6)); height: max(48px, calc(var(--u) * 6)); border-radius: 50%; background: rgba(6, 10, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 900; font-size: calc(var(--u) * 1.9); }
/* energy: the bar fills past each ability's mark, and the mark lights up */
#energy { position: absolute; left: 50%; bottom: calc(var(--u) * 1.6 + var(--sb)); transform: translateX(-50%); width: calc(var(--u) * 36); height: calc(var(--u) * 2.5); background: rgba(6, 10, 22, 0.82); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 1em; pointer-events: none; }
#enFill { height: 100%; width: 30%; border-radius: 1em; background: linear-gradient(90deg, #ffb300, var(--fire) 60%, #ff3d00); transition: width 0.12s linear; }
#energy .tk { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.5); }
#energy .tk svg { position: absolute; left: 50%; bottom: 118%; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); transform: translateX(-50%); color: rgba(255, 255, 255, 0.4); filter: drop-shadow(0 1px 1px #000); transition: color 0.15s, transform 0.15s; }
#energy .tk.on svg { color: var(--gold); transform: translateX(-50%) scale(1.18); }
#energy .tk.on svg { color: var(--tone, var(--gold)); }
#who { position: absolute; left: 50%; bottom: calc(var(--u) * 7.2 + var(--sb)); transform: translateX(-50%); display: flex; align-items: baseline; gap: 0.7em; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.6); }
#who b { font-size: calc(var(--u) * 1.9); letter-spacing: 0.14em; font-weight: 900; color: var(--tone, #fff); }
#who span { font-size: max(8px, calc(var(--u) * 1.25)); letter-spacing: 0.06em; opacity: 0.85; }
#tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }      /* under everything else over the pitch: a name never covers the score or a button */
#tags i { position: absolute; left: 0; top: 0; font: 800 max(9px, calc(var(--u) * 1.15)) / 1 system-ui, sans-serif; font-style: normal; letter-spacing: 0.08em; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px #000, 0 0 5px rgba(0, 0, 0, 0.8); will-change: transform; }
#tags i.t0 { color: var(--az-tag); } #tags i.t1 { color: var(--cr-tag); } #tags i.me { color: var(--gold); } #tags i u { text-decoration: none; margin-left: 0.4em; padding: 0.05em 0.35em; border-radius: 0.3em; background: rgba(0, 0, 0, 0.55); font-size: max(8px, 0.86em); color: #fff; }
#talk { position: absolute; left: 50%; top: calc(var(--u) * 9.7 + var(--st)); transform: translateX(-50%); max-width: calc(100% - var(--sl) - var(--sr) - var(--u) * 4); padding: 0.3em 0.9em; border-radius: 1em; background: rgba(6, 10, 22, 0.7); font-size: calc(var(--u) * 1.5); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; animation: talk 2.6s ease-out both; }
#talk b { color: var(--gold); font-weight: 800; }
@keyframes talk { 0% { opacity: 0; transform: translate(-50%, 0.5em); } 8%, 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#enTxt { position: absolute; inset: 0; display: grid; place-items: center; font-size: max(8px, calc(var(--u) * 1.3)); letter-spacing: 0.2em; text-shadow: 0 1px 2px #000; }
#enGain { position: absolute; right: 0; bottom: 118%; font-size: calc(var(--u) * 1.5); line-height: 1.2; color: var(--gold); opacity: 0; white-space: nowrap; text-shadow: 0 1px 3px #000; }
#enGain.on { animation: gain 1.1s ease-out; }
@keyframes gain { 0% { opacity: 0; transform: translateY(60%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-60%); } }

/* the stick: push it to the edge to sprint (the ring lights up) */
#joy { position: absolute; left: 0; bottom: 0; width: 46%; height: 64%; display: none; --jr: max(84px, calc(var(--u) * 12)); }
body.touch #joy { display: block; }
#joyBase { position: absolute; left: calc(var(--jr) + var(--sl)); top: calc(100% - var(--jr) - var(--sb)); width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 3px solid rgba(255, 255, 255, 0.3); pointer-events: none; transition: border-color 0.1s, box-shadow 0.1s; }
#joyBase.on { background: rgba(255, 255, 255, 0.12); }
#joyBase span { position: absolute; left: 50%; top: -1.9em; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.14em; opacity: 0; color: var(--gold); text-shadow: 0 1px 2px #000; transition: opacity 0.1s; }
#joyBase.sprint { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 213, 74, 0.55); }
#joyBase.sprint span { opacity: 1; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }

/* buttons: an icon and one word each. Lit when it can be used, dim when it cannot, a sweep while it recovers. */
#pad { position: absolute; right: calc(var(--u) * 1.8 + var(--sr)); bottom: calc(var(--u) * 1.8 + var(--sb)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.1); }
#pad .abil, #pad .main { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.1); }
#pad .keys { display: none; margin: 0; font-size: max(8px, calc(var(--u) * 1.25)); opacity: 0.75; text-shadow: 0 1px 2px #000; }
.btn { --cd: 0; --c: #fff; position: relative; width: calc(var(--u) * 10.6); height: calc(var(--u) * 10.6); border-radius: 50%; background: rgba(8, 13, 28, 0.8); border: calc(var(--u) * 0.36) solid var(--c); color: var(--c); display: grid; place-content: center; justify-items: center; line-height: 1.05; overflow: hidden; transition: transform 0.05s, opacity 0.15s, filter 0.15s; box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.45); }
/* What is written in a round button has to fit the circle with room to spare, whatever letters a device draws: a small
   picture, one word, and at most two short lines under it, all kept near the middle, where a circle is widest. */
.btn .ic { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.btn b { font-size: max(8px, calc(var(--u) * 1.62)); letter-spacing: 0.03em; font-weight: 900; color: #fff; text-align: center; }
.btn small { font-size: max(8px, calc(var(--u) * 1.3)); font-weight: 700; color: #cfd6e6; }
.btn em { position: absolute; right: 12%; top: 8%; min-width: 2.1em; padding: 0.05em 0.3em; border-radius: 1em; background: var(--c); color: #071022; font: 900 max(8px, calc(var(--u) * 1.4)) / 1.25 system-ui, sans-serif; text-align: center; }
.btn kbd { font: 700 max(8px, calc(var(--u) * 1.15)) system-ui, sans-serif; margin-top: 0.2em; padding: 0.05em 0.5em; border-radius: 0.4em; background: rgba(255, 255, 255, 0.16); color: #fff; }
body.touch .btn kbd { display: none; }
.btn.on { transform: scale(0.92); background: rgba(255, 255, 255, 0.26); }
.btn.sp { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.btn.sp .ic { width: calc(var(--u) * 3.9); height: calc(var(--u) * 3.9); }
.btn.sp b { font-size: calc(var(--u) * 1.58); }
.btn.sk { --c: var(--tone, #e6eaf5); }
.btn.sk b { font-size: max(8px, calc(var(--u) * 1.3)); max-width: calc(var(--u) * 8); white-space: normal; }
.btn.b b { max-width: calc(var(--u) * 7.6); }
.btn.sk:not(.off) { box-shadow: 0 0 calc(var(--u) * 1.3) color-mix(in srgb, var(--c) 60%, transparent), 0 0.2em 0.8em rgba(0, 0, 0, 0.45); }
.btn.off { opacity: 0.42; filter: saturate(0.25); }
.btn.sk.poor em { background: #ff5c6a; color: #fff; }
.btn.b small, .btn.big small { max-width: calc(var(--u) * 10.6); text-align: center; white-space: normal; line-height: 1.05; }
.btn.b small { max-width: calc(var(--u) * 7.6); }
.btn.b.lob { --c: var(--gold); } .btn.b.lob .ring { opacity: 1; } .btn.b.lob .ic { display: none; }      /* HIGH PASS and "release" inside its ring: no room for the picture as well */
.btn .cd { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(0, 0, 0, 0.66) calc(var(--cd) * 360deg), transparent 0); }
.btn.big { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.btn.big .ic { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.btn.big b { font-size: calc(var(--u) * 2.1); }
.btn .without, .btn .flame, .btn .head, #pad.has .btn .without { display: none; }
#pad:not(.has) .btn .with { display: none; } #pad:not(.has) .btn .without { display: block; }
#pad:not(.has) .btn.big { --c: #ffd9de; } #pad:not(.has) .btn.b { --c: #cfe0ff; }
#pad:not(.has) .btn.big.air { --c: var(--gold); } #pad:not(.has) .btn.big.air.go { box-shadow: 0 0 calc(var(--u) * 2.4) rgba(255, 213, 74, 0.9); background: rgba(74, 58, 6, 0.86); } #pad:not(.has) .btn.big.air .without { display: none; } #pad:not(.has) .btn.big.air .head { display: block; }      /* a high ball coming: gold when it is on its way, lit up when it is time to press */
.btn.big.ready { --c: var(--tone, var(--fire)); box-shadow: 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--tone, #ff8a1f) 80%, transparent); }
.btn.big.ready small { color: var(--gold); }
.btn .ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: conic-gradient(var(--gold) calc(var(--chg, 0) * 360deg), rgba(255, 255, 255, 0.16) 0); -webkit-mask: radial-gradient(closest-side, transparent 85%, #000 86%); mask: radial-gradient(closest-side, transparent 85%, #000 86%); }
.btn.big.charging .ring { opacity: 1; }
.btn.big.charging { border-color: transparent; }
.btn.big.hot { background: radial-gradient(circle, #fff6d0, var(--tone, #ff5a00)); --c: #fff; animation: hot 0.25s infinite alternate; }
.btn.big.hot .ring { opacity: 0; }
.btn.big.hot .with { display: none; } .btn.big.hot .flame { display: block; color: #fff; }
.btn.big.hot b, .btn.big.hot small { color: #2a0c00; }
@keyframes hot { to { box-shadow: 0 0 calc(var(--u) * 3.4) #ff7a18; transform: scale(1.05); } }
/* With a mouse and keys the buttons are a legend, so they are drawn smaller: only where the screen is big enough for their words to stay readable. */
body:not(.touch) #pad { opacity: 0.92; }
body:not(.touch) #pad .keys { display: block; }
@media (min-width: 900px) and (min-height: 506px) { body:not(.touch) #pad { transform: scale(0.78); transform-origin: bottom right; } body:not(.touch) #pad kbd { font-size: max(10.3px, calc(var(--u) * 1.15)); } }
/* a team-mate out of the picture: an arrow at the edge, pointing to him */
.edge { position: absolute; left: 0; top: 0; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); margin: calc(var(--u) * -1.6) 0 0 calc(var(--u) * -1.6); display: none; pointer-events: none !important; }
.edge::before { content: ""; position: absolute; inset: 0; background: var(--az); clip-path: polygon(100% 50%, 15% 5%, 32% 50%, 15% 95%); filter: drop-shadow(0 0 2px #000); }

#banner { position: absolute; left: 50%; top: max(24%, calc(var(--u) * 16.4 + var(--st))); transform: translateX(-50%); text-align: center; pointer-events: none; animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); white-space: nowrap; }
#banner b { display: block; font-size: min(calc(var(--u) * 8), calc(94vw / var(--n, 8) / 0.7)); line-height: 1.1; font-weight: 900; font-style: italic; letter-spacing: 0.03em; text-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.55), 0 0 0.5em rgba(255, 138, 31, 0.6); }
#banner span { display: block; font-size: min(calc(var(--u) * 2), calc(94vw / var(--m, 20) / 0.7)); letter-spacing: 0.12em; text-shadow: 0 2px 4px #000; }      /* (--n, --m: the number of letters in each line: a long line is drawn small enough to fit the screen's width) */
#banner.t0 b { color: var(--az-ban); } #banner.t1 b { color: var(--cr-ban); }
@keyframes pop { from { transform: translateX(-50%) scale(0.5); opacity: 0; } }
#toast { position: absolute; left: 50%; top: calc(var(--u) * 13.1 + var(--st)); transform: translateX(-50%); white-space: nowrap; padding: 0.15em 1em; border-radius: 1em; background: rgba(6, 10, 22, 0.8); font-size: calc(var(--u) * 1.6); letter-spacing: 0.14em; pointer-events: none; }

.screen { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(5, 8, 18, 0.5), rgba(5, 8, 18, 0.88)); padding: calc(var(--u) * 2 + var(--st)) calc(var(--u) * 2 + var(--sr)) calc(var(--u) * 2 + var(--sb)) calc(var(--u) * 2 + var(--sl)); overflow: auto; touch-action: pan-y; }
.screen.solid { background: var(--ink); }
/* (0.7.2) a screen taller than the screen is made to fit it (ui.js, fitScreen): its unit times --fu (0.7 at the least) */
.screen[data-fu] { --u: calc(min(1vw, 1.78vh) * var(--fu, 1)); font-size: calc(var(--u) * 1.5); }      /* (the text it inherits too: the page's size was worked out from the page's unit) */
body[data-layout="tall"] .screen[data-fu] { --u: calc(min(2.1vw, 1.2vh) * var(--fu, 1)); }
.panel { width: min(calc(var(--u) * 62), 100%); background: rgba(9, 14, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: calc(var(--u) * 1.6); padding: calc(var(--u) * 2.4) calc(var(--u) * 2.8); text-align: center; box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.5); }
.panel.small { width: min(calc(var(--u) * 40), 100%); display: grid; gap: calc(var(--u) * 1); }
.panel.wide { width: min(calc(var(--u) * 86), 100%); }
.panel.bare { background: none; border: 0; box-shadow: none; }
.screen[data-over] .panel { width: 100%; }      /* (0.7.2) and where that is not enough, its panel takes the whole width (ui.js keeps it only where it helps) */
.logo { margin: 0; font-size: calc(var(--u) * 7); font-weight: 900; font-style: italic; letter-spacing: 0.02em; line-height: 1; text-shadow: 0 0.05em 0 rgba(0, 0, 0, 0.5); }
.logo span { background: linear-gradient(180deg, var(--gold), var(--fire) 55%, #ff3d00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.by { margin: 0.45em 0 0; font-size: calc(var(--u) * 1.55); font-weight: 800; font-style: italic; letter-spacing: 0.2em; color: var(--gold); }   /* the studio credit under the title */
.tagline { margin: 0.5em 0 1.2em; opacity: 0.85; letter-spacing: 0.06em; }
h2 { margin: 0 0 0.4em; font-size: calc(var(--u) * 3); font-style: italic; font-weight: 900; }
body[data-layout="wide"] #menu .panel { width: min(calc(var(--u) * 78), 100%); }      /* three buttons abreast, each with room for its name on one line */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1); }
.mode { padding: calc(var(--u) * 1.5) calc(var(--u) * 1); border-radius: calc(var(--u) * 1.1); background: linear-gradient(180deg, #ffb13d, #ff6a00); color: #1a0d00; display: grid; gap: 0.3em; min-height: max(48px, calc(var(--u) * 9)); align-content: center; }      /* (0.7.2: never under a finger's 48 px, in a screen made smaller to fit either) */
.mode b { font-size: calc(var(--u) * 1.9); font-weight: 900; } .mode small { font-size: max(8px, calc(var(--u) * 1.15)); font-weight: 600; }
.mode[data-mode="1v1"] { background: linear-gradient(180deg, #7db4ff, #2f7dff); color: #04122e; }
.mode[data-mode="2v2"], #createBtn { background: linear-gradient(180deg, #8ff0c4, #17b978); color: #032417; }
.modes.two { grid-template-columns: 1fr 1fr; }
#roomHome.solo .modes.two { grid-template-columns: minmax(0, 30em); justify-content: center; }      /* a copy of the game without rooms: the one button there is does not stretch across half the panel */
/* choosing a player: the chosen one's card is the large one, with a window onto the real game playing his two moves */
.screen.clear { background: none; place-items: stretch; padding: calc(var(--u) * 1.6 + var(--st)) calc(var(--u) * 2 + var(--sr)) calc(var(--u) * 1.6 + var(--sb)) calc(var(--u) * 2 + var(--sl)); }
.pick { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr auto; gap: calc(var(--u) * 1.2) calc(var(--u) * 1.6); width: min(100%, calc(var(--u) * 150)); height: 100%; margin: 0 auto; --tone: #fff; }
.pick h2 { grid-column: 1 / -1; margin: 0; text-align: center; }
.feature { display: grid; grid-template-rows: 1fr auto; min-height: 0; border-radius: calc(var(--u) * 1.4); border: calc(var(--u) * 0.3) solid var(--tone); overflow: hidden; background: rgba(9, 14, 30, 0.35); box-shadow: 0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--tone) 45%, transparent); }
.stage { position: relative; min-height: calc(var(--u) * 15); }
.stage span { position: absolute; left: 50%; bottom: 0.6em; transform: translateX(-50%); padding: 0.2em 1em; border-radius: 1em; background: rgba(6, 10, 22, 0.8); color: var(--tone); font-size: calc(var(--u) * 1.6); font-weight: 900; letter-spacing: 0.12em; white-space: nowrap; }
.about { background: rgba(9, 14, 30, 0.94); padding: calc(var(--u) * 1) calc(var(--u) * 1.6); text-align: left; }
.about p { margin: 0.25em 0; } .about .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6em; }
.about .who .el { margin-left: auto; font-size: max(8px, calc(var(--u) * 1.3)); font-weight: 900; letter-spacing: 0.05em; white-space: nowrap; color: var(--el, #fff); }      /* the look of his slides ("Slide: Fire"), in its own colour, at the end of the line (under it, where the line is full) */
.about .who b { font-size: calc(var(--u) * 2.4); font-weight: 900; color: var(--tone); } .about .who strong { font-size: calc(var(--u) * 2.6); font-weight: 900; font-style: italic; letter-spacing: 0.04em; } .about .who em { font-style: normal; opacity: 0.75; font-size: max(8px, calc(var(--u) * 1.3)); }
.about .mv { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 0.2em 0.6em; font-size: max(8px, calc(var(--u) * 1.3)); font-weight: 500; }
.about .mv .sw { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--tone); align-self: center; } .about .mv b { font-weight: 900; color: var(--tone); white-space: nowrap; } .about .mv small { opacity: 0.6; white-space: nowrap; font-size: max(8px, 0.88em); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); align-content: stretch; min-height: 0; }
.card { --tone: #fff; position: relative; display: grid; align-content: center; justify-items: start; gap: 0.15em; padding: calc(var(--u) * 1) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1.1); background: rgba(9, 14, 30, 0.92); border: calc(var(--u) * 0.25) solid rgba(255, 255, 255, 0.16); text-align: left; min-height: calc(var(--u) * 8.6); overflow: hidden; }
.card::before { content: attr(data-num); position: absolute; right: 0.15em; top: -0.12em; font-size: calc(var(--u) * 6.4); font-weight: 900; font-style: italic; color: var(--tone); opacity: 0.22; line-height: 1; }
.card b { font-size: calc(var(--u) * 2); font-weight: 900; font-style: italic; letter-spacing: 0.03em; } .card small { font-size: max(8px, calc(var(--u) * 1.12)); font-weight: 600; color: var(--tone); line-height: 1.25; }
.card.on { border-color: var(--tone); box-shadow: 0 0 calc(var(--u) * 1.6) color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 16%, rgba(9, 14, 30, 0.94)); }
.card:disabled { opacity: 0.35; cursor: default; } .card i { position: absolute; left: 0.5em; bottom: 0.3em; font-style: normal; font-size: calc(var(--u) * 1); opacity: 0.8; }
.pick .row { grid-column: 1 / -1; }
/* sixteen players: four across, names only (the large card says what the chosen one does). The other players of both teams and the goalkeepers are chosen on the players screen (the Players button between Teams and Play). */
#cards { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: calc(var(--u) * 0.7); }
#cards .card { min-height: 0; min-width: 0; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.6); justify-items: center; text-align: center; }
#cards .card b { font-size: max(8px, calc(var(--u) * 1.5 * var(--fit, 1))); letter-spacing: 0; }      /* --fit: a name longer than eight letters is set that much smaller (main.js) */ #cards .card small { display: none; } #cards .card::before { font-size: calc(var(--u) * 4.4); }
/* choosing the teams: a button for each of the twenty-four, in its colour */
#teams .panel { display: grid; gap: calc(var(--u) * 1.1); }
#teams h2 { margin: 0; }
.teamgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: max(36px, calc(var(--u) * 5.4)); gap: calc(var(--u) * 0.6); }
.teamgrid .team { --c: #fff; display: flex; align-items: center; gap: 0.45em; min-width: 0; padding: 0 calc(var(--u) * 0.7); border-radius: calc(var(--u) * 1); background: rgba(9, 14, 30, 0.92); border: calc(var(--u) * 0.25) solid rgba(255, 255, 255, 0.14); color: #fff; font-weight: 800; font-size: max(8px, calc(var(--u) * 1.3)); line-height: 1.1; text-align: left; }
.teamgrid .team i { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.5); }
.teamgrid .team span { min-width: 0; }
.teamgrid .team.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, rgba(9, 14, 30, 0.94)); box-shadow: 0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--c) 55%, transparent); }
.teamgrid .team.other { opacity: 0.4; }
#teams .bar { margin-top: 0; flex-wrap: wrap; }
#teams .ghost.side[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
#teams.room .ghost.side { display: none; }
.ghost.teams b, .ghost.team b { font-weight: 900; }
.ghost.teams { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; } .ghost.teams span::after { content: ":"; }
.ghost.teams .dot { display: none; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
/* on an upright phone the row has room for four buttons only when the teams' button is the word and the two teams' colours */
body[data-layout="tall"] .ghost.teams b, body[data-layout="tall"] .ghost.teams span::after { display: none; } body[data-layout="tall"] .ghost.teams .dot { display: block; }
body[data-layout="tall"] .pick .row { gap: calc(var(--u) * 0.8); } body[data-layout="tall"] .pick .row .ghost, body[data-layout="tall"] .pick .row .primary { padding-left: 0.85em; padding-right: 0.85em; }
body.touch .teamgrid { grid-auto-rows: 48px; }
@media (any-pointer: coarse) { .teamgrid { grid-auto-rows: 48px; } }
body[data-layout="tall"] .teamgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max(48px, calc(var(--u) * 7.6)); }
body[data-layout="tall"] .teamgrid .team { flex-direction: column; justify-content: center; gap: 0.3em; padding: 0.25em 0.2em; text-align: center; font-size: max(8px, min(calc(var(--u) * 2.6), 2.5vw)); }      /* the colour over the name, so that the longest name fits a narrow phone's quarter on one line */
body[data-layout="tall"] .teamgrid .team i { width: 1.2em; height: 1.2em; }
/* 0.6.0: twenty-seven teams on a screen too small for them with the usual spacing (main.js, teamsFit): drawn closer */
#teams.tight { padding-top: calc(4px + var(--st)); padding-bottom: calc(4px + var(--sb)); }
#teams.tight .panel { padding-top: 6px; padding-bottom: 6px; gap: 4px; }
#teams.tight .teamgrid { row-gap: 2.5px; }
.ghost.gk { --tone: #fff; } .ghost.gk b { font-weight: 900; } .ghost.gk.on { border-color: var(--tone); color: var(--tone); box-shadow: 0 0 calc(var(--u) * 1.2) color-mix(in srgb, var(--tone) 55%, transparent); }
/* choosing the players: the places of the side shown, in a row (his captain, his own side's kick-off place, in the
   middle), with the Any switch and the side's keeper beside them; then the sixteen to choose from, each with what his
   slide tackle looks like in its own colour; and at the foot the two sides, as on the team screen */
#squad .panel { display: grid; gap: calc(var(--u) * 1.1); }
#squad h2 { margin: 0; } #squad .note { margin: 0 auto; }
#squad .line { display: flex; align-items: stretch; gap: calc(var(--u) * 0.8); }
#squad .places { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: calc(var(--u) * 0.8); }
#squad .tools { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8); }
#squad .tools .ghost { white-space: nowrap; } #squad .tools .ghost:disabled { opacity: 0.4; cursor: default; }
.place { --tone: #8892a6; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.5em; min-width: 0; overflow: visible; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.9); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.06); border: calc(var(--u) * 0.25) solid color-mix(in srgb, var(--tone) 70%, transparent); text-align: left; min-height: max(44px, calc(var(--u) * 7)); }
.place .n { font-size: calc(var(--u) * 2.4); font-weight: 900; font-style: italic; color: var(--tone); min-width: 1.2em; text-align: center; }
.place .c { min-width: 0; display: grid; gap: 0.1em; line-height: 1.15; } .place .c b { font-size: max(9px, calc(var(--u) * 1.6)); font-weight: 900; } .place .c small { font-size: max(8px, calc(var(--u) * 1.1)); font-weight: 700; }
.place .c .cap { color: var(--gold); letter-spacing: 0.1em; font-weight: 900; }
.place.any { border-style: dashed; } .place.any .n, .place.any .c b { opacity: 0.7; } .place.any .c small:not(.cap) { font-weight: 500; opacity: 0.75; }
.place.sel { border: calc(var(--u) * 0.25) solid var(--gold); background: rgba(255, 210, 60, 0.12); box-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 210, 60, 0.4); }
#squadCards { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: max(44px, calc(var(--u) * 6)); gap: calc(var(--u) * 0.6); }
#squadCards .card { min-height: 0; min-width: 0; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.5); justify-items: center; text-align: center; }
#squadCards .card b { font-size: max(8px, calc(var(--u) * 1.4 * var(--fit, 1))); letter-spacing: 0; } #squadCards .card small { font-size: max(8px, calc(var(--u) * 1.05)); } #squadCards .card::before { font-size: calc(var(--u) * 3.8); }
#squadCards .card.in { border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 8%, rgba(9, 14, 30, 0.92)); }      /* in another place of this side (the one in the chosen place is lit, .on) */
#squad .bar { margin-top: 0; flex-wrap: wrap; }
#squad .ghost.side[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
#squad.room .ghost.side { display: none; }      /* in a room: his own side only */
body.touch .place { min-height: max(48px, calc(var(--u) * 7)); } body.touch #squadCards { grid-auto-rows: max(48px, calc(var(--u) * 6)); }
@media (any-pointer: coarse) { .place { min-height: max(48px, calc(var(--u) * 7)); } #squadCards { grid-auto-rows: max(48px, calc(var(--u) * 6)); } }
/* upright: the places across the panel with the number over the name, the Any switch and the keeper under them, the cards four across */
body[data-layout="tall"] #squad .line { flex-direction: column; }
body[data-layout="tall"] .place { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0.1em; padding: calc(var(--u) * 0.6) calc(var(--u) * 0.4); }
body[data-layout="tall"] .place .c { justify-items: center; }
body[data-layout="tall"] #squadCards { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max(48px, calc(var(--u) * 6.4)); } body[data-layout="tall"] #squadCards .card small { display: block; }
/* A room screen. Its front page: what can be played from here, and a code to join a friend with. Then the lobby,
   which has to hold a good deal on a small screen, so it is laid out in rows that each use the full width: the bar
   (Back, the room's kind and code, the host's Start), the two sides and who is in each place, a line of advice
   (with the Team button beside it and, in a 1 v 1 room, the Players button), and the sixteen players to choose from, names only. */
#room .panel { display: flex; flex-direction: column; }
.join { display: flex; gap: calc(var(--u) * 1); justify-content: center; align-items: center; margin-top: calc(var(--u) * 1.4); }
.join input { width: 7.5em; padding: 0.45em 0.6em; border-radius: 0.6em; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); color: #fff; font: 900 calc(var(--u) * 2) / 1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; user-select: text; -webkit-user-select: text; }
.note.warn { color: #ffb4bb; opacity: 1; }
.bar { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.2); }
#room.in .bar { order: -1; margin: 0 0 calc(var(--u) * 0.8); justify-content: space-between; flex-wrap: wrap; }
#room.in h2 { display: none; }
.code { margin: 0; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.3em 0.6em; justify-content: center; align-items: center; }
#roomNet:not(:empty) { flex-basis: 100%; text-align: center; }      /* "Reconnecting": a line of its own under the code */
.code i { font-style: normal; font-weight: 900; font-size: max(9px, calc(var(--u) * 1.3)); letter-spacing: 0.06em; padding: 0.2em 0.7em; border-radius: 1em; background: var(--gold); color: #1a1300; white-space: nowrap; }
.code span { font-size: max(8px, calc(var(--u) * 1.2)); opacity: 0.8; white-space: nowrap; }
.code b { font: 900 calc(var(--u) * 2.8) / 1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.2em; color: var(--gold); user-select: text; -webkit-user-select: text; }
#startBtn:disabled { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); border: 1px dashed rgba(255, 255, 255, 0.35); font-size: max(9px, calc(var(--u) * 1.3)); font-weight: 700; cursor: default; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); }
.side { min-width: 0; }
.side h3 { margin: 0 0 0.35em; font-size: max(8px, calc(var(--u) * 1.3)); letter-spacing: 0.14em; padding-bottom: 0.15em; border-bottom: calc(var(--u) * 0.3) solid; } .side.t0 h3 { border-color: var(--az); } .side.t1 h3 { border-color: var(--cr); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.6); }
#lobby.one .slots { grid-template-columns: 1fr; }
.slot { --tone: #8892a6; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5em; width: 100%; min-width: 0; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.9); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.06); border: calc(var(--u) * 0.22) solid color-mix(in srgb, var(--tone) 70%, transparent); text-align: left; min-height: max(48px, calc(var(--u) * 6)); }
.slot .n { font-size: calc(var(--u) * 2.2); font-weight: 900; font-style: italic; color: var(--tone); min-width: 1.2em; }
.slot .c { min-width: 0; } .slot .c b { display: block; font-size: max(9px, calc(var(--u) * 1.5)); font-weight: 900; line-height: 1.15; } .slot .c small { display: block; font-size: max(8px, calc(var(--u) * 1.05)); opacity: 0.75; font-weight: 500; line-height: 1.2; }
.slot .c .mv { display: none; } body[data-layout="wide"] #lobby.one .slot .c .mv { display: block; }      /* his two moves: only where a place is wide enough for them (one place a side, on a wide screen) */
/* who is in the place: YOU, P2, BOT or OPEN, and the host's mark */
.slot .w { display: grid; justify-items: end; gap: 0.25em; white-space: nowrap; }
.slot .w b { font-size: max(9px, calc(var(--u) * 1.2)); font-weight: 900; letter-spacing: 0.08em; padding: 0.2em 0.7em; border-radius: 1em; background: rgba(255, 255, 255, 0.2); }
.slot .w i { font-style: normal; font-size: max(8px, calc(var(--u) * 0.95)); font-weight: 900; letter-spacing: 0.1em; padding: 0.15em 0.6em; border-radius: 1em; border: 1px solid var(--gold); color: var(--gold); }
.slot.me { border-color: var(--gold); background: rgba(255, 210, 60, 0.1); } .slot.me .w b { background: var(--gold); color: #1a1300; }
.slot.bot, .slot.open { border-style: dashed; } .slot.bot .w b, .slot.open .w b { background: none; border: 1px dashed rgba(255, 255, 255, 0.55); }
button.slot { cursor: pointer; } button.slot:disabled { cursor: default; color: inherit; }
.say { display: flex; align-items: center; gap: calc(var(--u) * 1); margin: calc(var(--u) * 0.7) 0; } .say .note { margin: 0 auto; flex: 1; } #lobby.one .say .note { text-align: left; } .say .players { flex: none; white-space: nowrap; }
#lobbyCards { grid-template-columns: repeat(8, 1fr); grid-auto-rows: max(48px, calc(var(--u) * 5)); gap: calc(var(--u) * 0.6); }
#lobbyCards .card { min-height: 0; min-width: 0; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.4); justify-items: center; text-align: center; }
#lobbyCards .card b { font-size: max(8px, calc(var(--u) * 1.35 * var(--fit, 1))); letter-spacing: 0; } #lobbyCards .card small { display: none; } #lobbyCards .card::before { font-size: calc(var(--u) * 3.6); }
#resNote { margin: 0 auto 0.4em; }
/* results: three totals (competitive 1 v 1, competitive 2v2, everything else), then the matches themselves */
#recTotals { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1); margin: 0.4em 0 0.8em; } #recTotals div { min-width: 0; padding: calc(var(--u) * 0.8) calc(var(--u) * 0.5); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.06); } #recTotals b { display: block; font-size: calc(var(--u) * 2.4); font-weight: 900; white-space: nowrap; } #recTotals span { display: block; font-size: max(8px, calc(var(--u) * 1.1)); opacity: 0.85; letter-spacing: 0.06em; } #recTotals small { display: block; font-size: max(8px, calc(var(--u) * 1)); opacity: 0.6; font-weight: 500; }
#recList { display: grid; gap: 0.3em; max-height: min(34vh, calc(var(--u) * 17)); overflow: auto; text-align: left; font-size: max(8px, calc(var(--u) * 1.25)); font-weight: 500; } #recList p { margin: 0; padding: 0.35em 0.6em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.04); display: grid; grid-template-columns: auto 1fr auto; gap: 0.8em; } #recList b { font-weight: 900; } #recList .w { color: #8ff0c4; } #recList .l { color: #ff9aa3; } #recList .d { color: var(--gold); }

.mode:disabled { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); cursor: default; border: 1px dashed rgba(255, 255, 255, 0.25); }
.mode:not(:disabled):active, .primary:active, .ghost:active { transform: scale(0.97); }
.diff { margin-top: calc(var(--u) * 1.6); display: flex; gap: calc(var(--u) * 0.7); justify-content: center; align-items: center; }
.diff button, .ghost { padding: 0.5em 1.2em; border-radius: 2em; border: 1px solid rgba(255, 255, 255, 0.3); min-height: calc(var(--u) * 4.4); }
/* Where fingers are used, nothing to press is smaller than 48 px either way. */
@media (any-pointer: coarse) { .diff button, .ghost, .primary { min-height: 48px; min-width: 48px; } }
body.touch .diff button, body.touch .ghost, body.touch .primary { min-height: 48px; min-width: 48px; }
@media (any-pointer: coarse) { .join input { min-height: 48px; } }
body.touch .join input { min-height: 48px; }
.diff button.on { background: #fff; color: #0a1020; border-color: #fff; }
.note { font-weight: 500; font-size: max(8px, calc(var(--u) * 1.2)); opacity: 0.8; margin: 0.9em auto; max-width: 46em; }
.row { display: flex; gap: calc(var(--u) * 1); justify-content: center; flex-wrap: wrap; }
.primary { padding: 0.7em 1.6em; border-radius: 2em; background: linear-gradient(180deg, #ffb13d, #ff6a00); color: #1a0d00; font-weight: 900; font-size: calc(var(--u) * 1.8); min-height: calc(var(--u) * 5.4); }
.ver { opacity: 0.45; font-size: max(8px, calc(var(--u) * 1)); margin: 1em 0 0; font-weight: 500; }
.cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(var(--u) * 1.6); text-align: left; align-items: start; }
table { border-collapse: collapse; width: 100%; font-size: max(8px, calc(var(--u) * 1.25)); font-weight: 500; }
th, td { padding: 0.28em 0.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.12); text-align: left; } th { opacity: 0.6; font-weight: 700; }
#help td b { font-weight: 900; }
#help .panel { padding: calc(var(--u) * 1.2) calc(var(--u) * 2.2) calc(var(--u) * 1.4); }
#help .head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: calc(var(--u) * 0.8); } #help h2 { margin: 0; }
#help .note { margin: 0.6em 0 0; max-width: none; text-align: left; } #help .note.first { margin-top: 0; }
/* paused: one button to go on, the rest in two columns where the screen is wide and may be short. They pair up both in a
   match on this device (Restart, Formation, How to play, Sound, Commentary, Quit) and in a room's match, which has neither
   Restart nor Formation (How to play, Sound, Commentary, Leave), so no button is left alone on its row. */
body[data-layout="wide"] #pause .panel { grid-template-columns: 1fr 1fr; } body[data-layout="wide"] #pause h2, body[data-layout="wide"] #pause .note, body[data-layout="wide"] #resumeBtn { grid-column: 1 / -1; }
/* A break between periods: what has happened, the score, what comes next, and the buttons (the one to go on across the
   panel; Formation and Quit side by side where the screen is wide; Quit across it before the shootout, which has no Formation). */
#brk h2 { margin: 0; }
.bscore { margin: 0; display: flex; justify-content: center; align-items: center; gap: 0.6em; white-space: nowrap; }
.bscore b { font-size: calc(var(--u) * 3.4); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bscore .bt { font-size: max(8px, calc(var(--u) * 1.4)); font-weight: 800; letter-spacing: 0.1em; padding-bottom: 0.15em; border-bottom: max(2px, calc(var(--u) * 0.3)) solid var(--az); }
.bscore .bt.t1 { border-bottom-color: var(--cr); }
#brk .note { margin: 0 auto; }
#brkWait { color: var(--gold); opacity: 1; font-weight: 700; }
body[data-layout="wide"] #brk .panel { grid-template-columns: 1fr 1fr; } body[data-layout="wide"] #brk .panel > :not(#brkForm):not(#brkQuit), body[data-layout="wide"] #brk #brkForm[hidden] + #brkQuit { grid-column: 1 / -1; }
#resScore { font-size: calc(var(--u) * 4); font-weight: 900; margin: 0; }
#resStats { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.2em 1em; font-size: calc(var(--u) * 1.3); font-weight: 500; margin: 0.4em 0 0.8em; }
#resStats span:nth-child(3n + 1) { text-align: right; } #resStats span:nth-child(3n + 2) { opacity: 0.6; } #resStats span:nth-child(3n) { text-align: left; }
#bar { height: calc(var(--u) * 0.9); background: rgba(255, 255, 255, 0.12); border-radius: 1em; overflow: hidden; margin: calc(var(--u) * 2) 0 0; }
#barFill { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, var(--gold), var(--fire)); transition: width 0.2s; }

/* A wide screen that is short (a phone held sideways, a small frame on a page): the menu spreads sideways to stay inside it. */
@media (max-height: 500px) {
  body[data-layout="wide"] #menu .panel { width: min(calc(var(--u) * 86), 100%); padding-top: calc(var(--u) * 1.4); padding-bottom: calc(var(--u) * 1.2); }
  body[data-layout="wide"] #menu .logo { font-size: calc(var(--u) * 6); } body[data-layout="wide"] #menu .tagline { margin: 0.4em 0 0.8em; }
  body[data-layout="wide"] #menu .diff { margin-top: calc(var(--u) * 1.2); } body[data-layout="wide"] #menu .note { margin: 0.7em auto; } body[data-layout="wide"] #menu .ver { margin-top: 0.6em; }
  body[data-layout="wide"] .panel.small { padding-top: calc(var(--u) * 1.4); padding-bottom: calc(var(--u) * 1.4); gap: calc(var(--u) * 0.7); } body[data-layout="wide"] .panel.small h2 { margin: 0; }      /* the small panels (paused, full time) lose their spare air too */
  body[data-layout="wide"] #result .panel.small { grid-template-columns: 1fr 1fr; } body[data-layout="wide"] #result .panel.small > :not(button) { grid-column: 1 / -1; }      /* full time, with its note about the kind of match: the two buttons share a row so that nothing has to be scrolled */
}
/* tall: phones and tablets held upright. The menu stacks. Over the pitch, from the top: the score (moved aside for the pause
   button where the screen is narrow), the player's name, energy with its marks under it, then the same slots as on a wide screen. */
body[data-layout="tall"] .modes { grid-template-columns: 1fr; }
body[data-layout="tall"] .logo { font-size: min(calc(var(--u) * 6), 10.4vw); white-space: nowrap; }      /* the name on one line on an upright phone (the panel inside is 0.79 of the screen) */
/* An upright screen that is short (the smallest phones, a notch and a home bar taken off them): the menu's row of four
   buttons (How to play, Results, Sound, Commentary) takes two lines there, and the spaces round the rest are a little less. */
@media (max-height: 700px) {
  body[data-layout="tall"] #menu .panel { padding-top: calc(var(--u) * 1.5); padding-bottom: calc(var(--u) * 1.5); }
  body[data-layout="tall"] #menu .tagline { margin: 0.4em 0 0.8em; } body[data-layout="tall"] #menu .note { margin: 0.6em auto; } body[data-layout="tall"] #menu .ver { margin-top: 0.5em; }
}
body[data-layout="tall"] .pick { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; }
body[data-layout="tall"] .cards { grid-template-columns: repeat(3, 1fr); grid-auto-rows: max(48px, calc(var(--u) * 9)); } body[data-layout="tall"] .card { min-height: 0; padding: calc(var(--u) * 0.8) calc(var(--u) * 0.9); } body[data-layout="tall"] .card small { display: none; } body[data-layout="tall"] .card::before { font-size: calc(var(--u) * 5); }
body[data-layout="tall"] #cards { grid-template-columns: repeat(4, 1fr); grid-auto-rows: max(48px, calc(var(--u) * 6.4)); } body[data-layout="tall"] #cards .card { padding: calc(var(--u) * 0.4) calc(var(--u) * 0.5); } body[data-layout="tall"] #cards .card b { font-size: max(8px, calc(var(--u) * 1.7 * var(--fit, 1))); } body[data-layout="tall"] #cards .card::before { font-size: calc(var(--u) * 4.4); }
body[data-layout="tall"] #lobbyCards { grid-template-columns: repeat(4, 1fr); } body[data-layout="tall"] .slots { grid-template-columns: 1fr; } body[data-layout="tall"] .modes.two { grid-template-columns: 1fr; }
body[data-layout="tall"] #room.in .code { order: 3; flex-basis: 100%; }      /* upright: Back and Start share the first line, the room's code has the second */
body[data-layout="tall"] .say { flex-wrap: wrap; justify-content: center; } body[data-layout="tall"] .say .note { flex-basis: 100%; }      /* and the Team and Players buttons sit under the advice, not beside it */
body[data-layout="tall"] #lobby:not(.one) .say { flex-wrap: nowrap; } body[data-layout="tall"] #lobby:not(.one) .say .note { flex: 1 1 0; min-width: 0; text-align: left; }      /* a 2v2 has no Players button: its team switch sits beside the advice, so the lobby of four places still fits the smallest phone */
body[data-layout="tall"] #lobby:not(.one) .say .team { flex: none; max-width: 36%; display: grid; justify-items: center; line-height: 1.2; padding: 0.4em 0.9em; } body[data-layout="tall"] #lobby:not(.one) .say .team b { display: block; }
body[data-layout="tall"] .about .mv { grid-template-columns: auto auto 1fr; } body[data-layout="tall"] .about .mv span { grid-column: 2 / -1; grid-row: 2; } body[data-layout="tall"] .about .mv small { grid-column: 3; grid-row: 1; justify-self: end; }
body[data-layout="tall"] .cols { grid-template-columns: 1fr; gap: calc(var(--u) * 1); } body[data-layout="tall"] #help th, body[data-layout="tall"] #help td { padding: 0.2em 0.4em; }
@media (max-height: 700px) { body[data-layout="tall"] #help .pads { display: none; } }      /* a small phone held upright: no room, and nobody holds one that way with a gamepad */
body[data-layout="tall"] #score { left: min(50%, calc(100% - var(--sr) - max(48px, var(--u) * 6) - var(--u) * 20.5)); gap: calc(var(--u) * 0.7); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9); }
body[data-layout="tall"] #who { bottom: auto; top: calc(var(--u) * 6.8 + var(--st)); max-width: calc(100% - 2 * (var(--u) * 2 + var(--sr) + max(48px, var(--u) * 6))); overflow: hidden; } body[data-layout="tall"] #who b { flex: none; }      /* never under the pause button: a long name's moves give way (ui.js) */
body[data-layout="tall"] #energy { bottom: auto; top: calc(var(--u) * 10 + var(--st)); width: calc(var(--u) * 32); height: calc(var(--u) * 2.2); }
body[data-layout="tall"] #energy .tk svg { bottom: auto; top: 125%; }
body[data-layout="tall"] #enGain { bottom: auto; top: 135%; }
body[data-layout="tall"] #tag { top: calc(var(--u) * 15.6 + var(--st)); }
/* the shootout upright: the record where the moves bar was, the hint where the energy bar was (below the pause button, so it may use the width) */
body[data-layout="tall"] #tally { top: calc(var(--u) * 6.8 + var(--st)); }
body[data-layout="tall"] #hint { bottom: auto; top: calc(var(--u) * 10 + var(--st)); max-width: calc(100% - var(--sl) - var(--sr) - var(--u) * 4); }
body[data-layout="tall"] #hud.pens #tag { top: calc(var(--u) * 15.6 + var(--st)); }
body[data-layout="tall"] #hud.pens #talk { top: calc(var(--u) * 18.4 + var(--st)); }
body[data-layout="tall"] #talk { top: calc(var(--u) * 18.4 + var(--st)); }
body[data-layout="tall"] #toast { top: calc(var(--u) * 21.9 + var(--st)); }
body[data-layout="tall"] #banner { top: max(26%, calc(var(--u) * 25.2 + var(--st))); }
body[data-layout="tall"] #joy { width: min(50%, calc(100% - var(--u) * 26 - var(--sr))); height: 44%; --jr: max(84px, calc(var(--u) * 11.5)); }
body[data-layout="tall"] #pad .abil { flex-direction: column; }
body[data-layout="tall"] .btn { width: calc(var(--u) * 9.6); height: calc(var(--u) * 9.6); }
body[data-layout="tall"] .btn .ic { width: calc(var(--u) * 3.1); height: calc(var(--u) * 3.1); }
body[data-layout="tall"] .btn b { font-size: max(8px, calc(var(--u) * 1.5)); } body[data-layout="tall"] .btn small { font-size: max(8px, calc(var(--u) * 1.2)); }
body[data-layout="tall"] .btn.sk b { font-size: max(8px, calc(var(--u) * 1.2)); max-width: calc(var(--u) * 7.2); }
body[data-layout="tall"] .btn.b b, body[data-layout="tall"] .btn.b small { max-width: calc(var(--u) * 6.9); }
body[data-layout="tall"] .btn.big { width: calc(var(--u) * 12.6); height: calc(var(--u) * 12.6); }
body[data-layout="tall"] .btn.big .ic { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
body[data-layout="tall"] .btn.big b { font-size: calc(var(--u) * 1.9); } body[data-layout="tall"] .btn.big small { max-width: calc(var(--u) * 9.4); }
body[data-layout="tall"] #banner b { font-size: min(calc(var(--u) * 6.4), calc(94vw / var(--n, 8) / 0.7)); }
@media (prefers-reduced-motion: reduce) { #banner, #flash, #talk, .btn.big.hot { animation: none; } }

/* ── the match settings (0.5.0): before every kick-off of a match on this device ── */
/* How long each half is and each half of extra time (five choices each, and under them what that adds up to, in words),
   and his side's formation as a small picture that is itself the button to the editor; Back and Kick off under them.
   Wide: the lengths on the left, the formation on the right. Tall: one under the other, the picture beside its word. */
#setup .panel { display: grid; gap: calc(var(--u) * 1.1); text-align: left; }
#setup h2 { margin: 0; text-align: center; }
#setup h3 { margin: 0 0 0.4em; font-size: max(8px, calc(var(--u) * 1.3)); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
#setup .scols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 2); align-items: stretch; }
#setup .slen { display: grid; gap: calc(var(--u) * 1.2); align-content: center; min-width: 0; }
#setup .note { margin: 0.45em 0 0; max-width: none; }
.choice { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 0.6); }
.choice button { display: grid; place-content: center; justify-items: center; min-width: 0; min-height: max(36px, calc(var(--u) * 5.4)); padding: 0.15em 0.2em; border-radius: calc(var(--u) * 1); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); line-height: 1.05; }
.choice button b { font-size: calc(var(--u) * 2.1); font-weight: 900; }
.choice button small { font-size: max(8px, calc(var(--u) * 1)); font-weight: 600; opacity: 0.75; }
.choice button[aria-pressed="true"] { background: #fff; color: #0a1020; border-color: #fff; }
.choice button[aria-pressed="true"] small { opacity: 1; }
body.touch .choice button { min-height: 48px; min-width: 48px; }
@media (any-pointer: coarse) { .choice button { min-height: 48px; min-width: 48px; } }
#setup .smini { --fm: clamp(84px, calc(var(--u) * 15), 300px); }      /* (formationMini's own size, set on the picture itself) */
#setup .sform { display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.4); }
#setup .sfw { display: grid; justify-items: center; gap: 0.15em; text-align: center; }
#setup .sfw b { font-size: calc(var(--u) * 1.7); font-weight: 900; }
#setup .sfw small { font-size: max(8px, calc(var(--u) * 1.1)); font-weight: 500; opacity: 0.75; max-width: 12em; }
#setup .bar { margin-top: 0; }
#setupGo { min-width: min(100%, calc(var(--u) * 18)); }
body[data-layout="tall"] #setup .scols { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.4); }
body[data-layout="tall"] #setup .sform { grid-template-columns: auto minmax(0, 1fr); justify-content: start; justify-items: start; align-items: center; gap: calc(var(--u) * 1.4); }
body[data-layout="tall"] #setup .sfw { justify-items: start; text-align: left; }

/* ── a room's lobby (0.5.0): the Match button opens the settings screen (the host's lengths, his side's formation) ── */
.say .match { flex: none; white-space: nowrap; } .ghost.match b { font-weight: 900; }
.ghost.match:not([hidden]) { display: grid; justify-items: center; align-content: center; line-height: 1.15; padding: 0.25em 0.75em; white-space: nowrap; } .ghost.match span { font-size: max(8px, 0.8em); opacity: 0.8; }
body[data-layout="tall"] #startBtn .lw { display: none; }
body[data-layout="wide"] #barMatch, body[data-layout="tall"] #lobbyMatch, #room:not(.in) #barMatch { display: none; }      /* one of the two, by the layout: see main.js */
/* ── the formation editor (0.5.0) ── */
/* One side's outfield players on a little pitch that attacks up the screen: the Forward at the top, Left and Right as
   the team sees them, the Back low, the keeper in front of his goal (game/src/view/formation.js puts the same places in
   its SPOT). A token is a player, his number and one-word name in his colour like the cards; an empty position is a
   dashed place to drop one. Wide: the pitch on the left, the words and Done on the right. Tall: the pitch on top, and it
   is the one thing that gives way when the words need the room. The pitch takes no gestures of the page's own
   (touch-action: none), so a drag never scrolls or zooms it, and a finger on a position is on the position itself, never
   on a word inside it (those change while it is held). Every token is at least 48 px each way. */
#form .panel { --tw: max(84px, calc(var(--u) * 11)); --th: max(48px, calc(var(--u) * 7)); width: min(calc(var(--u) * 94), 100%); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); background: rgba(9, 14, 30, 0.97); text-align: left; max-height: calc(100vh - var(--st) - var(--sb) - var(--u) * 4); }
#form .fhead { grid-area: head; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2em 0.8em; }
#form h2 { margin: 0; }
#form .fteam { font-size: max(8px, calc(var(--u) * 1.3)); letter-spacing: 0.14em; padding-bottom: 0.15em; border-bottom: max(2px, calc(var(--u) * 0.3)) solid var(--c, #fff); white-space: nowrap; }
#form .note { margin: 0; max-width: none; }
#form .fnote { grid-area: note; color: var(--gold); opacity: 1; font-weight: 700; }
#form .fsay { grid-area: say; }
#form .fduos { grid-area: duos; display: grid; gap: calc(var(--u) * 0.6); align-content: start; min-height: 0; }
#form .fdone { grid-area: done; justify-self: center; min-width: min(100%, calc(var(--u) * 18)); }
body[data-layout="wide"] #form .panel { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "pitch head" "pitch note" "pitch say" "pitch duos" "pitch done"; gap: calc(var(--u) * 0.8) calc(var(--u) * 2); align-items: start; }
body[data-layout="wide"] #form .fpitch { grid-area: pitch; --ph: min(calc(var(--u) * 46), calc(100vh - var(--st) - var(--sb) - var(--u) * 7.2 - 6px)); height: var(--ph); width: calc(var(--ph) * 0.9); }
body[data-layout="tall"] #form .panel { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); --tw: max(84px, calc(var(--u) * 10.5)); --th: max(48px, calc(var(--u) * 6.6)); }
body[data-layout="tall"] #form .panel > * { flex: none; }
body[data-layout="tall"] #form .fpitch { flex: 0 1 auto; align-self: center; width: min(100%, calc(var(--u) * 46)); height: calc(var(--u) * 40); min-height: 236px; }
body[data-layout="tall"] #form .fhead { justify-content: center; } body[data-layout="tall"] #form .fnote, body[data-layout="tall"] #form .fsay { text-align: center; } body[data-layout="tall"] #form .fdone { align-self: center; }
@supports (height: 100dvh) {
  #form .panel { max-height: calc(100dvh - var(--st) - var(--sb) - var(--u) * 4); }
  body[data-layout="wide"] #form .fpitch { --ph: min(calc(var(--u) * 46), calc(100dvh - var(--st) - var(--sb) - var(--u) * 7.2 - 6px)); }
}
/* the pitch: stripes, the halfway line and centre circle at the top, the penalty box and the goal at the bottom */
#form .fpitch { position: relative; border-radius: calc(var(--u) * 1); touch-action: none; -webkit-touch-callout: none; }
.fturf { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: repeating-linear-gradient(180deg, #145a32 0 10%, #10502b 10% 20%); border: 2px solid rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, 0.45); }
.fturf i { position: absolute; border: 2px solid rgba(255, 255, 255, 0.36); }
.fturf .fhalf { left: 0; right: 0; top: 9%; height: 0; border-width: 2px 0 0; }
.fturf .fcirc { left: 50%; top: 9%; width: 30%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.fturf .fbox { left: 21%; right: 21%; bottom: -3px; height: 19%; }
.fturf .fsix { left: 37%; right: 37%; bottom: -3px; height: 7.5%; }
.fturf .fgoal { left: 42%; right: 42%; bottom: 0; height: 2%; border: 0; background: rgba(255, 255, 255, 0.55); }
.flines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flines line { stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.flines line.far { stroke-dasharray: 3 7; }
#form .fdir { position: absolute; left: 3%; top: 2.4%; display: flex; align-items: center; gap: 0.45em; font-size: max(8px, calc(var(--u) * 0.95)); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); pointer-events: none; }
#form .fdir::before { content: ""; border: 0.42em solid transparent; border-bottom: 0.62em solid currentColor; border-top: 0; }
/* a position: the token standing in it (or the empty place), the position's name hung under a token, and while a
   player is being moved the chips at its foot that say how a move there would suit a partnership */
#form .fpos { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: var(--tw); height: var(--th); margin: calc(var(--th) / -2) 0 0 calc(var(--tw) / -2); border-radius: calc(var(--u) * 1); touch-action: none; -webkit-touch-callout: none; color: #fff; }
#form .fpos[data-role="fwd"] { --x: 50; --y: 15; } #form .fpos[data-role="left"] { --x: 20; --y: 39; } #form .fpos[data-role="right"] { --x: 80; --y: 39; } #form .fpos[data-role="back"] { --x: 50; --y: 62; }
#form .fpos *, #form .fkeep * { pointer-events: none; }
#form .ftok { display: grid; align-content: center; justify-items: center; gap: 0.1em; width: 100%; height: 100%; padding: 0.15em 0.2em; border-radius: calc(var(--u) * 1); background: rgba(9, 14, 30, 0.94); border: max(2px, calc(var(--u) * 0.25)) solid var(--tone, #fff); box-shadow: var(--ring, 0 0 0 0 transparent); line-height: 1.05; text-align: center; }
#form .ftok .fn { font-size: max(15px, calc(var(--u) * 2.3)); font-weight: 900; font-style: italic; color: var(--tone, #fff); line-height: 1; }
#form .ftok .fnm { font-size: max(8px, calc(var(--u) * 1.45 * var(--fit, 1))); font-weight: 900; font-style: italic; letter-spacing: 0.02em; max-width: 100%; }
#form .ftok .flb { font-size: max(8px, calc(var(--u) * 0.95)); font-weight: 900; letter-spacing: 0.08em; color: var(--gold); white-space: nowrap; }
#form .fpos.any .ftok { border-style: dashed; } #form .fpos.any .fn, #form .fpos.any .fnm { opacity: 0.75; } #form .fpos.any .flb:not(.bro) { color: #cfd6e6; font-weight: 600; letter-spacing: 0.02em; }
#form .fem { display: grid; place-items: center; width: 100%; height: 100%; border-radius: calc(var(--u) * 1); border: max(2px, calc(var(--u) * 0.22)) dashed rgba(255, 255, 255, 0.5); background: rgba(5, 10, 20, 0.35); font-size: max(8px, calc(var(--u) * 1.05)); font-weight: 900; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.8); }
#form .ftg { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); font-size: max(8px, calc(var(--u) * 0.9)); font-weight: 900; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.75); white-space: nowrap; text-shadow: 0 1px 2px #000; }
#form .fpos.empty .ftok, #form .fpos.empty .ftg, #form .fpos:not(.empty) .fem { display: none; }
#form .fpos.lit .ftg { top: calc(100% + 6px); }      /* clear of the dashed ring round a position he can go to */
#form .fpos.lit .ftok, #form .fpos.lit .fem { outline: 2px dashed var(--gold); outline-offset: 3px; }
#form .fpos.lit .fem { border-color: transparent; background: rgba(255, 210, 60, 0.1); color: var(--gold); }
#form .fpos.hot .ftok, #form .fpos.hot .fem { outline-style: solid; outline-width: 3px; background: rgba(74, 58, 6, 0.95); }
#form .fpos.picked .ftok { border-color: var(--gold); box-shadow: var(--ring, 0 0 0 0 transparent), 0 0 calc(var(--u) * 1.8) rgba(255, 210, 60, 0.85); }
#form .fpos.lifted .ftok { opacity: 0.32; border-style: dashed; box-shadow: none; } #form .fpos.lifted .ftg { opacity: 0.5; }
#form .fpos:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
#form:not(.ro) .fpos:not(.empty) { cursor: grab; } #form.moving .fpitch, #form.moving .fpos { cursor: grabbing; } #form.ro .fpos { cursor: default; }
/* the chips sit inside the position, at its foot, one over the other, so that they never run into a neighbour on the
   smallest pitch: his number stays, and the name and small print under them make way while a player is being moved */
#form .fch { position: absolute; left: 50%; bottom: max(3px, calc(var(--u) * 0.4)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
#form .fpos.chipped .ftok { align-content: start; padding-top: max(3px, calc(var(--u) * 0.4)); } #form .fpos.chipped .fem { place-items: start center; padding-top: max(4px, calc(var(--u) * 0.6)); }
#form .fpos.chipped .flb, #form .fpos.chipped.two .fnm { display: none; }
#form .fghost .fch { bottom: calc(100% + 6px); flex-direction: row; gap: 3px; }      /* the dragged token carries the chips of the position it is over, above itself */
#form .fchip { --vc: #ff8f9a; display: inline-flex; align-items: center; gap: 0.3em; padding: 0.18em 0.55em; border-radius: 1em; background: var(--vc); color: #071022; font-size: max(8px, calc(var(--u) * 0.95)); font-weight: 900; font-style: normal; letter-spacing: 0.05em; line-height: 1.1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
#form .fchip.good { --vc: #5be38a; } #form .fchip.ok { --vc: var(--gold); }
#form .fchip.two::before { content: ""; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--p, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
#form .fkeep { --kh: max(40px, calc(var(--th) * 0.8)); position: absolute; left: 50%; top: 86%; width: calc(var(--tw) * 0.9); height: var(--kh); margin: calc(var(--kh) / -2) 0 0 calc(var(--tw) * -0.45); }
#form .fkeep .ftok { background: rgba(9, 14, 30, 0.85); gap: 0; } #form .fkeep .fn { font-size: max(12px, calc(var(--u) * 1.6)); } #form .fkeep .flb { color: rgba(255, 255, 255, 0.6); letter-spacing: 0.12em; }
/* the token being dragged rides under the finger, over everything */
#form .fghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; }
#form .fghost .ftok { transform: scale(1.06); box-shadow: var(--ring, 0 0 0 0 transparent), 0 0.5em 1.4em rgba(0, 0, 0, 0.6); }
/* the partnerships: a card each, its edge in the colour of how the positions suit it now */
#form .fduo { --vc: #ff8f9a; padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 0.8); background: rgba(255, 255, 255, 0.05); border-left: max(3px, calc(var(--u) * 0.35)) solid var(--vc); }
#form .fduo.good { --vc: #5be38a; } #form .fduo.ok { --vc: var(--gold); } #form .fduo.need { --vc: #8892a6; }
#form .fduo h3 { margin: 0; font-size: max(8px, calc(var(--u) * 1.2)); font-weight: 900; letter-spacing: 0.06em; line-height: 1.25; }
#form .fduo h3 b { margin-right: 0.2em; }
#form .fduo p { margin: 0.15em 0 0; font-size: max(8px, calc(var(--u) * 1.12)); font-weight: 500; line-height: 1.3; opacity: 0.88; }
#form .fduo .fv { opacity: 1; font-weight: 600; }
#form .fduo .fv i { font-style: normal; font-weight: 900; font-size: max(8px, 0.92em); letter-spacing: 0.05em; padding: 0.08em 0.55em; border-radius: 1em; background: var(--vc); color: #071022; margin-right: 0.3em; white-space: nowrap; }
#form .fnone { margin: 0; font-size: max(8px, calc(var(--u) * 1.2)); font-weight: 700; } #form .fhint { margin: 0.2em 0 0; font-size: max(8px, calc(var(--u) * 1.1)); font-weight: 500; opacity: 0.75; }
/* the small picture of a formation for other screens (formationMini): a dot per place with his number in his colour */
.fmini { --fm: 132px; position: relative; display: inline-block; flex: none; align-self: center; justify-self: center; width: var(--fm); aspect-ratio: 4 / 5; border-radius: 6px; vertical-align: middle; pointer-events: none; }
.fmini .fturf { border-width: 1.5px; box-shadow: none; } .fmini .fturf i { border-width: 1px; } .fmini .fturf .fhalf { border-width: 1px 0 0; }
.fmini .flines line { stroke-width: 2.5; }
.fmini .fmd { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; border-radius: 50%; background: #0a1022; border: 2px solid var(--tone, #fff); box-shadow: var(--ring, 0 0 0 0 transparent); color: #fff; font: italic 900 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -0.02em; }
.fmini .fmd.any { border-style: dashed; color: #cfd6e6; } .fmini .fmd.bro { border-style: dashed; color: var(--tone); }
.fmini .fmd.gk { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 9px; font-style: normal; background: rgba(9, 14, 30, 0.85); }
.fmini .fmd.cap::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px #071022; }
/* ── the player's own controls (0.5.1) ── */
/* The on-screen buttons where the player put them (#pad.free: each one's middle at its own left and top, as fractions of
   the screen), and the stick on the right (#hud.swap; the buttons in their usual places then go to the left). */
body.touch #pad.free { inset: 0; display: block; pointer-events: none; }
body.touch #pad.free .abil, body.touch #pad.free .main { display: contents; }
body.touch #pad.free .btn { position: absolute; left: var(--px); top: var(--py); translate: -50% -50%; pointer-events: auto; }
body.touch #hud.swap #joy { left: auto; right: 0; }
body.touch #hud.swap #joyBase { left: calc(100% - var(--jr) - var(--sr)); }
body.touch[data-layout="tall"] #hud.swap #joy { width: min(50%, calc(100% - var(--u) * 26 - var(--sl))); }
body.touch #hud.swap #pad:not(.free) { right: auto; left: calc(var(--u) * 1.8 + var(--sl)); align-items: flex-start; }
body.touch #hud.swap #pad:not(.free) .main { flex-direction: row-reverse; }
/* The arranger: the match's display with the pad, the stick's area, the scoreboard, the energy bar and the pause button only. */
#hud.arranging > :not(#pad):not(#joy):not(#pauseBtn):not(#score):not(#energy):not(#who) { visibility: hidden !important; }
#hud.arranging #pauseBtn, #hud.arranging #score, #hud.arranging #energy, #hud.arranging #who { pointer-events: none; }
body[data-layout="tall"] #hud.arranging #energy, body[data-layout="tall"] #hud.arranging #who { visibility: hidden !important; }      /* (upright they are at the top, under the bar, where no button can go) */
#hud.arranging #joy { display: block; pointer-events: none; outline: 2px dashed rgba(255, 255, 255, 0.45); outline-offset: -8px; background: rgba(255, 255, 255, 0.05); }
#hud.arranging #joy::after { content: "STICK"; position: absolute; left: 50%; top: 40%; translate: -50% -50%; font: 900 max(10px, calc(var(--u) * 1.6)) system-ui, sans-serif; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 2px #000; }
#hud.arranging .btn { cursor: grab; }
#hud.arranging .btn.lift { cursor: grabbing; scale: 1.08; z-index: 3; box-shadow: 0 0 0 calc(var(--u) * 0.45) rgba(255, 213, 74, 0.85), 0 0.6em 1.6em rgba(0, 0, 0, 0.55); }
#arrangeBar { position: fixed; z-index: 50; left: 50%; translate: -50% 0; top: calc(var(--st) + var(--u) * 7.6); width: max-content; max-width: calc(100% - var(--sl) - var(--sr) - 16px); display: grid; gap: calc(var(--u) * 0.6); justify-items: center; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4); background: rgba(9, 14, 30, 0.92); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: calc(var(--u) * 1.4); box-shadow: 0 0.8em 2em rgba(0, 0, 0, 0.45); text-align: center; }
#arrangeBar p { margin: 0; font-size: max(9px, calc(var(--u) * 1.4)); } #arrangeBar p span { opacity: 0.8; }
#arrangeBar .row { flex-wrap: nowrap; gap: calc(var(--u) * 0.8); }
#arrangeBar .ghost, #arrangeBar .primary { min-height: 48px; padding-top: 0.3em; padding-bottom: 0.3em; white-space: nowrap; }
#arrangeBar .primary { font-size: max(12px, calc(var(--u) * 1.6)); }
body[data-layout="tall"] #arrangeBar { top: calc(var(--st) + var(--u) * 1.2 + max(48px, var(--u) * 6) + 8px); }      /* (below the pause button: upright the bar is as wide as the screen allows) */
/* The Controls screen: three tabs (keys, the touch screen, a gamepad); each action with its two keys or buttons. */
#controls .panel { display: grid; gap: calc(var(--u) * 0.9); text-align: left; padding: calc(var(--u) * 1.3) calc(var(--u) * 2); }
#controls .chead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 1.2); }
#controls h2 { margin: 0; }
.ctabs { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.5); }
.ctabs button { min-height: calc(var(--u) * 4.2); padding: 0.3em 1em; border-radius: 2em; border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 800; }
.ctabs button[aria-selected="true"] { background: #fff; color: #0a1020; border-color: #fff; }
#controls .ctab { display: grid; gap: calc(var(--u) * 0.9); min-width: 0; }
#controls .ctab[hidden] { display: none; }
#controls .cnote { margin: 0; max-width: none; min-height: 2.6em; }
.kgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.6) calc(var(--u) * 1.6); align-items: center; }
.kact { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: calc(var(--u) * 0.5); min-width: 0; }
.kact .kname { font-weight: 800; font-size: max(9px, calc(var(--u) * 1.4)); line-height: 1.15; overflow-wrap: anywhere; }
.kslot { min-width: calc(var(--u) * 6.4); min-height: calc(var(--u) * 4.2); padding: 0.15em 0.45em; border-radius: calc(var(--u) * 0.8); border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.07); color: #fff; font: 800 max(9px, calc(var(--u) * 1.4)) system-ui, sans-serif; white-space: nowrap; }
.kslot.none { color: rgba(255, 255, 255, 0.45); }
.kslot.wait { background: var(--gold); border-color: var(--gold); color: #1a0d00; animation: kwait 0.7s infinite alternate; }
@keyframes kwait { to { box-shadow: 0 0 0 0.3em rgba(255, 213, 74, 0.35); } }
.kslot.done { animation: kdone 1.2s ease-out; }
@keyframes kdone { from { background: rgba(255, 213, 74, 0.6); border-color: var(--gold); } }
.kreset { justify-self: start; }
.kreset:disabled { opacity: 0.4; }
body.touch .kslot, body.touch .ctabs button { min-height: 48px; min-width: 48px; }
@media (any-pointer: coarse) { .kslot, .ctabs button { min-height: 48px; min-width: 48px; } }
/* the touch tab's picture of the screen: the stick's area and the three buttons where they are */
.tview { position: relative; justify-self: center; height: calc(var(--u) * 13); aspect-ratio: var(--ar, 16 / 9); max-width: 100%; border-radius: calc(var(--u) * 0.8); border: 1px solid rgba(255, 255, 255, 0.25); background: linear-gradient(180deg, #1f6b35, #17532a); overflow: hidden; }
.tview.tall { height: calc(var(--u) * 24); }
.tview .tz { position: absolute; left: 0; bottom: 0; width: 46%; height: 64%; border: 1px dashed rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.tview.tall .tz { width: 50%; height: 44%; }
.tview .tz.r { left: auto; right: 0; }
.tview .tb { position: absolute; translate: -50% -50%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 13, 28, 0.85); border: 1.5px solid #fff; color: #fff; }
.tview .tb svg { width: 52%; height: 52%; } .tview .tb.a { border-color: #ffd9de; color: #ffd9de; } .tview .tb.b { border-color: #cfe0ff; color: #cfe0ff; }
body[data-layout="tall"] .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 0.6) calc(var(--u) * 1.2); }
body[data-layout="tall"] #controls .chead { grid-template-columns: minmax(0, 1fr) auto; }
body[data-layout="tall"] .ctabs { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
/* How to play's head: Change controls beside Got it; the pause panel's way out on a row of its own (with Controls it holds an odd number) */
#help .hbtns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * 0.8); }
@media (max-height: 680px) { body[data-layout="tall"] #helpCtl { display: none; } }      /* (the smallest upright phones: How to play has no room for it there; Controls is on the menu and the pause panel) */
body[data-layout="wide"] #quitBtn { grid-column: 1 / -1; }
/* A 1 v 1 lobby on a short upright screen (the smallest phones, a notch and a home bar taken off them): since 0.5.2 each
   place names three players beside its captain, so the spaces above and below are a little less, as the menu's are. */
@media (max-height: 700px) { body[data-layout="tall"] #room.in .panel:has(> #lobby.one) { padding-top: calc(var(--u) * 1.5); padding-bottom: calc(var(--u) * 1.5); } }

/* ── 0.6.0: Signature Heroes, flags, the tournament, the Online Match, settings (languages and vibration) ── */
/* A flag: the country's own (flags.js), drawn small and never on the ball or the pitch. */
.flag { display: inline-block; flex: none; width: 1.5em; height: 1em; vertical-align: -0.14em; border-radius: 0.12em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32); overflow: hidden; }
/* the menu: four buttons abreast on a wide screen (the heroes' the fourth), two by two on an upright one */
#menu .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-layout="wide"] #menu .panel { width: min(calc(var(--u) * 92), 100%); }
#menu .mode b { font-size: calc(var(--u) * 1.75); }
body[data-layout="tall"] #menu .modes { grid-template-columns: 1fr 1fr; }
@media (max-height: 500px) { body[data-layout="wide"] #menu .panel { width: min(calc(var(--u) * 96), 100%); } }
.mode[data-mode="heroes"] { background: linear-gradient(180deg, #e3b8ff, #9b4dff); color: #18062e; }
/* the gear: the settings, on the menu's row of buttons */
.ghost.icon { display: inline-grid; place-items: center; padding-left: 0.85em; padding-right: 0.85em; }
.ghost.icon svg { width: 1.25em; height: 1.25em; display: block; }
/* the scoreboard: a country's flag beside its name (where the board is too tight, the flags give way with the dots) */
#score .fl { display: flex; } #score .fl .flag { width: calc(var(--u) * 2.3); height: calc(var(--u) * 1.53); }
#score.tight .fl { display: none; }
/* choosing the teams: a country's flag in the place of a club's colour */
.teamgrid .team .flag { width: 1.65em; height: 1.1em; }
body[data-layout="tall"] .teamgrid .team .flag { width: 1.5em; height: 1em; }
.ghost.teams .dot.fl { width: 1.35em; height: 0.9em; border-radius: 0.1em; background: none; box-shadow: none; } .ghost.teams .dot .flag { display: block; width: 100%; height: 100%; }
.side h3 .flag { margin-inline-end: 0.45em; }
/* the heroes' three modes */
#heroes .panel { display: grid; gap: calc(var(--u) * 1); }
#heroes h2, #heroes .note { margin: 0 auto; }
.flagline { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.45); }
.flagline .flag { width: calc(var(--u) * 2.3); height: calc(var(--u) * 1.53); }
.mode[data-hmode="cup"] { background: linear-gradient(180deg, #ffe08a, #f5a300); color: #1f1400; }
.mode[data-hmode="friend"] { background: linear-gradient(180deg, #7db4ff, #2f7dff); color: #04122e; }
.mode[data-hmode="quick"] { background: linear-gradient(180deg, #8ff0c4, #17b978); color: #032417; }
#heroesCup { color: var(--gold); opacity: 1; font-weight: 700; }
#heroes .row { margin-top: calc(var(--u) * 0.4); }
@media (max-height: 500px) { .flagline { display: none; } }      /* a short screen: the flags are only a decoration */
/* choosing a nation: the hero cards (the selection screen's layout: the large card with its window, the sixteen beside it) */
.about .who .hflag:empty { display: none; } .about .who .hflag .flag { width: calc(var(--u) * 3.3); height: calc(var(--u) * 2.2); vertical-align: -0.3em; }
#natCards { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: calc(var(--u) * 0.7); }
#natCards .card { min-height: 0; min-width: 0; padding: calc(var(--u) * 0.35) calc(var(--u) * 0.6); grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; column-gap: 0.45em; row-gap: 0.05em; justify-items: start; text-align: start; }
#natCards .card .flag { grid-row: 1 / span 2; width: 1.8em; height: 1.2em; font-size: max(8px, calc(var(--u) * 1.3)); }
#natCards .card b { font-size: max(8px, calc(var(--u) * 1.3 * var(--fit, 1))); letter-spacing: 0; font-style: normal; white-space: nowrap; overflow: hidden; min-width: 0; max-width: 100%; }
#natCards .card small { font-size: max(8px, calc(var(--u) * 1.15 * var(--fit, 1))); font-weight: 800; font-style: italic; white-space: nowrap; overflow: hidden; min-width: 0; max-width: 100%; }      /* (0.7.2: set smaller to fit, as the team's name is: a wide font cut TOMMASO off) */
#natCards .card::before { font-size: calc(var(--u) * 4.2); }
body[data-layout="tall"] #natCards { grid-template-columns: repeat(4, 1fr); grid-auto-rows: max(48px, calc(var(--u) * 6.4)); }
body[data-layout="tall"] #natCards .card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.3); }
body[data-layout="tall"] #natCards .card .flag { grid-row: auto; font-size: max(8px, calc(var(--u) * 1.4)); }
body[data-layout="tall"] #natCards .card b { font-size: max(8px, calc(var(--u) * 1.25 * var(--fit, 1))); } body[data-layout="tall"] #natCards .card small { display: none; }
/* a Friend Match's four heroes: the players screen's layout */
#hpick .panel { display: grid; gap: calc(var(--u) * 1); }
#hpick h2 { margin: 0; } #hpick .note { margin: 0 auto; }
#hpPlaces { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: calc(var(--u) * 0.8); }
#hpPlaces .place .nat { display: flex; align-items: center; gap: 0.35em; } #hpPlaces .place .nat .flag { width: 1.5em; height: 1em; }
.hpinfo { min-height: 2.7em; color: #fff; opacity: 0.9; }
#hpCards { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: max(44px, calc(var(--u) * 6)); gap: calc(var(--u) * 0.6); }
#hpCards .card { min-height: 0; min-width: 0; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.4); justify-items: center; text-align: center; gap: 0.1em; }
#hpCards .card .flag { font-size: max(8px, calc(var(--u) * 1.1)); }
#hpCards .card b { font-size: max(8px, calc(var(--u) * 1.3)); letter-spacing: 0; } #hpCards .card small { font-size: max(8px, calc(var(--u) * 0.95)); white-space: nowrap; overflow: hidden; max-width: 100%; }
#hpCards .card::before { font-size: calc(var(--u) * 3.6); }
#hpCards .card.in { border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 8%, rgba(9, 14, 30, 0.92)); }
#hpick .bar { margin-top: 0; }
body.touch #hpPlaces .place { min-height: max(48px, calc(var(--u) * 7)); } body.touch #hpCards { grid-auto-rows: max(48px, calc(var(--u) * 6)); }
@media (any-pointer: coarse) { #hpPlaces .place { min-height: max(48px, calc(var(--u) * 7)); } #hpCards { grid-auto-rows: max(48px, calc(var(--u) * 6)); } }
body[data-layout="tall"] #hpPlaces { grid-template-columns: 1fr 1fr; } body[data-layout="tall"] #hpCards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* the tournament's bracket: wide, the two halves of the draw meet at the final in the middle; upright, four rounds side by side */
#cup .panel { display: grid; gap: calc(var(--u) * 0.9); }
#cup .chead { display: flex; align-items: baseline; justify-content: center; gap: 0.8em; flex-wrap: wrap; } #cup h2 { margin: 0; }
.cupround { color: var(--gold); font-weight: 900; letter-spacing: 0.06em; font-size: max(9px, calc(var(--u) * 1.6)); }
.bracket { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 0.6); text-align: start; }
.bracket.split { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rnd { display: grid; grid-template-rows: auto 1fr; min-width: 0; gap: calc(var(--u) * 0.35); }
.rnd h3 { margin: 0; font-size: max(8px, calc(var(--u) * 1)); font-weight: 900; letter-spacing: 0.04em; opacity: 0.7; text-align: center; white-space: nowrap; overflow: hidden; }
.ties { display: flex; flex-direction: column; justify-content: space-around; gap: calc(var(--u) * 0.4); }
.tie { border-radius: calc(var(--u) * 0.7); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); padding: calc(var(--u) * 0.25) calc(var(--u) * 0.45); }
.tie p { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.35em; font-size: max(8px, calc(var(--u) * 1.15)); line-height: 1.3; font-weight: 600; }
.tie p .flag { width: 1.35em; height: 0.9em; } .tie p b { font-weight: 800; letter-spacing: 0.02em; min-width: 0; overflow: hidden; } .tie p b.tbd { opacity: 0.4; grid-column: 1 / span 2; }
.tie p .sc { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; } .tie p .sc small { font-size: max(8px, 0.82em); opacity: 0.8; margin-inline-start: 0.15em; }
.tie p.l { opacity: 0.5; } .tie p.w b { color: #fff; } .tie p.me b, .tie p.me .sc { color: var(--gold); }
.tie.next { border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 210, 60, 0.35); }
.rnd.fin .tie { border-color: rgba(255, 210, 60, 0.55); }
/* (0.7.2) a bracket whose names would be cut off (a narrow phone, a wider system font than ours: main.js, bracketFit): a
   smaller flag and less room round the names, and where that is still not enough, no flag */
.bracket.tight .tie { padding-inline: calc(var(--u) * 0.25); } .bracket.tight .tie p { gap: 0.2em; } .bracket.tight .tie p .flag { width: 1.05em; height: 0.7em; }
.bracket.tighter .tie p .flag { display: none; } .bracket.tighter .tie p b { grid-column: 1 / span 2; }
#cupSay { margin: 0 auto; color: #fff; opacity: 0.92; }
#cup .bar { margin-top: 0; flex-wrap: wrap; }
/* the Online Match's wait */
.snat { margin: 0; display: flex; justify-content: center; align-items: center; gap: 0.5em; font-size: max(9px, calc(var(--u) * 1.6)); } .snat .flag { width: 2.1em; height: 1.4em; } .snat b { font-weight: 900; letter-spacing: 0.04em; }
#search .note { margin: 0 auto; } #searchSay { color: #fff; opacity: 0.95; font-weight: 700; }
#searchBots { display: grid; justify-items: center; gap: 0.15em; } #searchBots small { font-size: max(8px, calc(var(--u) * 1.1)); font-weight: 700; opacity: 0.85; }
/* settings: the eight languages, each under its own name and flag; the vibration switch */
#settings .panel { display: grid; gap: calc(var(--u) * 1); }
#settings h2 { margin: 0; } #settings .note { margin: 0 auto; }
.slbl { margin: 0; font-size: max(8px, calc(var(--u) * 1.3)); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; text-align: start; }
.langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 0.7); }
.lang { display: flex; align-items: center; gap: 0.6em; min-width: 0; min-height: calc(var(--u) * 4.6); padding: 0.4em 0.8em; border-radius: calc(var(--u) * 1); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); font-weight: 800; text-align: start; }
.lang .flag { width: 1.8em; height: 1.2em; } .lang span { min-width: 0; overflow: hidden; white-space: nowrap; }
.lang[aria-checked="true"] { border-color: var(--gold); background: rgba(255, 210, 60, 0.14); color: var(--gold); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 210, 60, 0.3); }
.vibe { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; width: 100%; min-height: calc(var(--u) * 4.6); padding: 0.4em 1em; border-radius: 2em; border: 1px solid rgba(255, 255, 255, 0.3); font-weight: 800; text-align: start; }
.vibe small { flex: 1; font-size: max(8px, calc(var(--u) * 1.1)); font-weight: 600; opacity: 0.75; }
.vibe .sw { flex: none; position: relative; width: 2.7em; height: 1.45em; border-radius: 1em; background: rgba(255, 255, 255, 0.25); transition: background 0.15s; }
.vibe .sw::after { content: ""; position: absolute; top: 0.17em; inset-inline-start: 0.17em; width: 1.11em; height: 1.11em; border-radius: 50%; background: #fff; transition: inset-inline-start 0.15s; }
.vibe[aria-checked="true"] .sw { background: #17b978; } .vibe[aria-checked="true"] .sw::after { inset-inline-start: 1.42em; }
.vibe:disabled { opacity: 0.55; cursor: default; }
body.touch .lang, body.touch .vibe { min-height: 48px; } @media (any-pointer: coarse) { .lang, .vibe { min-height: 48px; } }
body[data-layout="tall"] .langs { grid-template-columns: 1fr 1fr; }
/* Arabic: written right to left (the menus and panels; never the pitch, the stick or the buttons), its letters joined:
   no spacing between them, and no slanted lettering. */
html[lang="ar"] body * { letter-spacing: 0 !important; }
html[lang="ar"] body .screen :is(h1, h2, b, strong, .mode b, .card b, .logo) { font-style: normal; }
/* the pause panel's eighth button (Settings) pairs with Quit on a wide screen; upright on a short phone the panel's air is a little less */
body[data-layout="wide"] #quitBtn { grid-column: auto; }
@media (max-height: 700px) { body[data-layout="tall"] #pause .panel { gap: calc(var(--u) * 0.6); padding-top: calc(var(--u) * 1.6); padding-bottom: calc(var(--u) * 1.6); } }
/* a nation's name too long for its card even at the smallest size takes two lines (main.js fitName) */
#natCards .card b.two { white-space: normal; overflow-wrap: anywhere; line-height: 1.05; }
/* (0.7.2) a hero's name that is too wide for its card even at the smallest size (a narrow card, a wider system font than
   ours) takes the card's whole width, under the flag and the team's name (main.js, cardFit) */
#natCards .card.tight .flag { grid-row: 1; } #natCards .card.tight small { grid-column: 1 / -1; }
/* the nation screen upright: the hero's window may be a little shorter, so that the card's lines all fit a small phone */
body[data-layout="tall"] #nation .stage { min-height: max(96px, calc(var(--u) * 12.8)); }
@media (max-height: 500px) { #hpCards .card small { display: none; } }      /* a short screen: the line under the cards says what the hero does */
/* 0.7.0: the online profile's screens (game/src/meta/screens.js), the online hub and the online tournament */
.pflag { display: inline-block; flex: none; width: 1.5em; height: 1.125em; vertical-align: -0.16em; border-radius: 0.12em; background: url(../assets/ui/flags.webp) 0 0 / 1600% 1600% no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.badge { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.18em; } .badge svg { display: block; width: 100%; height: 100%; }
.chip { display: inline-flex; align-items: center; gap: 0.35em; min-height: calc(var(--u) * 4.4); padding: 0.2em 0.9em 0.2em 0.6em; border-radius: 2em; background: rgba(95, 216, 255, 0.12); border: 1px solid rgba(95, 216, 255, 0.45); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip svg, .item button svg, .task button svg { width: 1.15em; height: 1.15em; flex: none; }
.mbar { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 0.7); margin: 0 0 calc(var(--u) * 0.4); }
.mside { display: flex; align-items: center; gap: calc(var(--u) * 0.6); }
.mbar .mb { position: relative; display: inline-grid; place-items: center; width: max(24px, calc(var(--u) * 4.4)); height: max(24px, calc(var(--u) * 4.4)); padding: 0; border-radius: 50%; }
.mbar .mb svg { width: 52%; height: 52%; }
/* on a wide screen the bar takes no line of its own: its two ends sit in the panel's top corners, beside the logo */
body[data-layout="wide"] #menu.meta .panel { position: relative; }
body[data-layout="wide"] #menu.meta .mbar { position: absolute; top: calc(var(--u) * 1.2); left: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); margin: 0; pointer-events: none; } body[data-layout="wide"] #menu.meta .mbar > * { pointer-events: auto; }
.pip { position: absolute; top: 0.2em; inset-inline-end: 0.35em; width: 0.6em; height: 0.6em; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 0 2px rgba(9, 14, 30, 0.9); }
#menu .modes.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body[data-layout="wide"] #menu .modes.five .mode b { font-size: calc(var(--u) * 1.55); }
body[data-layout="tall"] #menu .modes.five { grid-template-columns: 1fr 1fr; } body[data-layout="tall"] #menu .modes.five .mode[data-mode="online"] { grid-column: 1 / -1; min-height: max(48px, calc(var(--u) * 6.5)); }
.mode[data-mode="online"] { background: linear-gradient(180deg, #8ff7ff, #13b6d6); color: #022a33; }
#online .panel { display: grid; gap: calc(var(--u) * 1); } #online h2, #online .note { margin: 0 auto; }
.modes.four { grid-template-columns: 1fr 1fr; }
body[data-layout="tall"] .modes.four { grid-template-columns: 1fr; } body[data-layout="tall"] .modes.four .mode { min-height: calc(var(--u) * 7); }
.mode[data-omode="q1"] { background: linear-gradient(180deg, #8ff0c4, #17b978); color: #032417; }
.mode[data-omode="q2"] { background: linear-gradient(180deg, #7db4ff, #2f7dff); color: #04122e; }
.mode[data-omode="c8"] { background: linear-gradient(180deg, #ffe08a, #f5a300); color: #1f1400; }
.mode[data-omode="c16"] { background: linear-gradient(180deg, #e3b8ff, #9b4dff); color: #18062e; }
#onlineCup { color: var(--gold); opacity: 1; font-weight: 700; }
#ocup .panel { display: grid; gap: calc(var(--u) * 0.9); }
#ocup .chead { display: flex; align-items: baseline; justify-content: center; gap: 0.8em; flex-wrap: wrap; } #ocup h2 { margin: 0; }
#ocupSay { margin: 0 auto; color: #fff; opacity: 0.92; } #ocup .bar { margin-top: 0; flex-wrap: wrap; }
.bracket.c8.split { grid-template-columns: repeat(5, minmax(0, 1fr)); } .bracket.c8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tie p .pflag { width: 1.2em; height: 0.9em; } .tie p bdi { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; font-weight: 800; } .tie p .bot { opacity: 0.6; font-weight: 700; }
.tie p .who { display: flex; align-items: center; gap: 0.3em; min-width: 0; }
/* the leaderboards */
#board .panel, #tasks .panel, #shop .panel, #flags .panel { display: grid; gap: calc(var(--u) * 0.9); } #tasks .panel { gap: calc(var(--u) * 0.7); }
#board .chead, #tasks .chead, #shop .chead, #flags .chead { display: flex; align-items: center; justify-content: center; gap: 0.8em; flex-wrap: wrap; } #board h2, #tasks h2, #shop h2, #flags h2 { margin: 0; }
#board .note, #tasks .note, #shop .note { margin: 0 auto; }
.blist { display: grid; gap: 0.2em; max-height: min(40vh, calc(var(--u) * 30)); overflow: auto; touch-action: pan-y; text-align: start; font-size: max(9px, calc(var(--u) * 1.3)); }
.blist.mine { max-height: none; overflow: visible; }
.brow { margin: 0; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; gap: 0.6em; padding: 0.3em 0.7em; border-radius: 0.6em; background: rgba(255, 255, 255, 0.04); }
.brow.head { background: none; font-size: max(8px, 0.85em); opacity: 0.65; letter-spacing: 0.06em; text-transform: uppercase; }
.brow .rk { text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; } .brow .wn { font-weight: 900; font-variant-numeric: tabular-nums; }
.brow .who { display: flex; align-items: center; gap: 0.45em; min-width: 0; } .brow .who bdi { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; font-weight: 700; } .brow .who small { font-size: max(8px, 0.8em); color: var(--gold); font-weight: 800; }
.brow.top1 .rk { color: #ffd54a; } .brow.top2 .rk { color: #d9e2f2; } .brow.top3 .rk { color: #e3a46a; }
.brow.you { background: rgba(255, 210, 60, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 210, 60, 0.5); }
/* tasks */
.tcols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.4); text-align: start; max-height: min(46vh, calc(var(--u) * 34)); overflow: auto; touch-action: pan-y; padding: 0.1em; }
body[data-layout="tall"] .tcols { grid-template-columns: 1fr; }
.tcol .slbl { display: flex; justify-content: space-between; gap: 0.6em; margin-bottom: 0.4em; } .tcol .slbl small { font-size: max(8px, 0.9em); font-weight: 700; letter-spacing: 0.02em; text-transform: none; opacity: 0.75; }
.tlist { display: grid; gap: calc(var(--u) * 0.35); }
.task { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.8em; padding: 0.3em 0.5em 0.3em 0.8em; border-radius: 0.8em; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.task.done { border-color: rgba(255, 210, 60, 0.6); } .task.claimed { opacity: 0.6; }
.task .ti { display: grid; gap: 0.2em; min-width: 0; font-size: max(9px, calc(var(--u) * 1.25)); } .task .tp { display: flex; align-items: center; gap: 0.6em; } .task .tp .tbar { flex: 1; } .task .ti small { font-size: max(8px, 0.85em); opacity: 0.7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbar { display: block; height: 0.42em; border-radius: 1em; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .tbar i { display: block; height: 100%; border-radius: 1em; background: linear-gradient(90deg, #5fd8ff, #17b978); }
.task .primary, .task .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; min-height: max(24px, calc(var(--u) * 3.6)); min-width: 5em; padding: 0.2em 0.9em; font-size: max(9px, calc(var(--u) * 1.35)); }
.task .primary:disabled { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); cursor: default; }
.invite { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 1.2em; row-gap: 0.2em; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1); background: rgba(95, 216, 255, 0.08); border: 1px solid rgba(95, 216, 255, 0.35); }
.invite p { margin: 0; } .invite .note { margin: 0; flex-basis: 100%; }
.icode { display: flex; align-items: center; justify-content: center; gap: 0.7em; flex-wrap: wrap; } .icode b { font: 900 calc(var(--u) * 2) / 1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.18em; color: var(--gold); user-select: text; -webkit-user-select: text; }
/* the shop */
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 15), 1fr)); gap: calc(var(--u) * 0.8); max-height: min(54vh, calc(var(--u) * 36)); overflow: auto; touch-action: pan-y; padding: 0.2em; }
.item { display: grid; justify-items: center; align-content: start; gap: 0.2em; padding: calc(var(--u) * 0.7) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.item.on { border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 210, 60, 0.3); }
.item > b { font-size: max(9px, calc(var(--u) * 1.4)); } .item > small { font-size: max(8px, calc(var(--u) * 1.05)); opacity: 0.8; min-height: 1.3em; }
.item .ballpic { width: calc(var(--u) * 5); height: calc(var(--u) * 5); } .item .badge { width: calc(var(--u) * 5); height: calc(var(--u) * 5); } .item svg.big { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.item .primary, .item .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; width: 100%; min-height: calc(var(--u) * 4.4); padding: 0.3em 0.6em; font-size: max(9px, calc(var(--u) * 1.35)); }
.item .primary:disabled { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55); cursor: default; } .item .ghost.on { border-color: var(--gold); color: var(--gold); }
/* Settings: his name and flag */
#settings .you { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 0.7); }      /* (scoped: a board's row of his own is a .you too) */
#settings .you input, #flagFind { min-width: 0; min-height: calc(var(--u) * 4.6); padding: 0.4em 0.8em; border-radius: calc(var(--u) * 1); border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.07); color: #fff; font: inherit; font-weight: 800; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.fbtn { display: flex; align-items: center; gap: 0.6em; min-width: 0; border-radius: calc(var(--u) * 1); text-align: start; } .fbtn b { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; } .fbtn .pflag { width: 1.8em; height: 1.35em; }
.ghost.del { color: #ffb4bb; border-color: rgba(255, 120, 130, 0.5); }
#settings .row { align-items: center; }      /* (its one row: Delete my online profile, and Done) */
/* the flag picker */
#flagFind { width: min(100%, 22em); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 19), 1fr)); gap: calc(var(--u) * 0.5); max-height: min(52vh, calc(var(--u) * 34)); overflow: auto; touch-action: pan-y; text-align: start; padding: 0.2em; }
.fgrid .fl { display: flex; align-items: center; gap: 0.55em; min-width: 0; min-height: calc(var(--u) * 4.4); padding: 0.3em 0.7em; border-radius: calc(var(--u) * 0.8); border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); font-weight: 700; font-size: max(9px, calc(var(--u) * 1.3)); }
.fgrid .fl span { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; } .fgrid .fl .pflag { width: 1.7em; height: 1.275em; }
.fgrid .fl[aria-checked="true"] { border-color: var(--gold); color: var(--gold); background: rgba(255, 210, 60, 0.12); }
body.touch .chip, body.touch .fgrid .fl, body.touch .fbtn, body.touch #settings .you input, body.touch #flagFind, body.touch .item button, body.touch .task button { min-height: 48px; } body.touch .mbar .mb { width: 48px; height: 48px; }
@media (any-pointer: coarse) { .chip, .fgrid .fl, .fbtn, #settings .you input, #flagFind, .item button, .task button { min-height: 48px; } .mbar .mb { width: 48px; height: 48px; } }
#ocup .tie p { grid-template-columns: minmax(0, 1fr) auto; } #ocup .tie p .flag { width: 1.35em; height: 0.9em; flex: none; } #ocup .tie p b.bot { overflow: hidden; white-space: nowrap; }
/* 0.7.0: the same menu upright: the five modes a little lower, and on a short upright screen the tagline gives its place to the bar */
body[data-layout="tall"] #menu.meta .modes { gap: calc(var(--u) * 0.7); } body[data-layout="tall"] #menu.meta .mbar { margin-bottom: calc(var(--u) * 0.2); }
body[data-layout="tall"] #menu.meta .modes .mode { min-height: max(48px, calc(var(--u) * 6.3)); padding: calc(var(--u) * 1) calc(var(--u) * 0.8); } body[data-layout="tall"] #menu.meta .modes.five .mode[data-mode="online"] { min-height: max(48px, calc(var(--u) * 5.6)); }      /* (0.7.2: 48 px at the least, in a menu made smaller to fit too) */
@media (max-height: 760px) { body[data-layout="tall"] #menu.meta .tagline { display: none; } body[data-layout="tall"] #menu.meta .by { margin-bottom: 0.6em; } }
body[data-layout="tall"] .tcols { max-height: min(56vh, calc(var(--u) * 60)); }
body.touch .chip { min-width: 48px; justify-content: center; }
@media (any-pointer: coarse) { .chip { min-width: 48px; justify-content: center; } }
/* 0.7.0, on a wide screen that is short: the lists a little lower, the settings without their headings */
@media (max-height: 500px) {
  body[data-layout="wide"] .blist { max-height: 31vh; } body[data-layout="wide"] .sgrid { max-height: 42vh; } body[data-layout="wide"] .fgrid { max-height: 44vh; } body[data-layout="wide"] .tcols { max-height: 40vh; }
  body[data-layout="wide"] #settings.meta .slbl { display: none; } body[data-layout="wide"] #settings.meta .panel { gap: calc(var(--u) * 0.6); }
  body[data-layout="wide"] #menu.meta .modes .mode { padding-top: calc(var(--u) * 1); padding-bottom: calc(var(--u) * 1); }
}