/* 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; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; } #flash { position: fixed; top: 0; right: 0; bottom: 0; left: 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; top: 0; right: 0; bottom: 0; left: 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; top: 0; right: 0; bottom: 0; left: 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; top: 0; right: 0; bottom: 0; left: 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; top: 0; right: 0; bottom: 0; left: 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; top: 0; right: 0; bottom: 0; left: 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; top: 0; right: 0; bottom: 0; left: 0; background: var(--az); -webkit-clip-path: polygon(100% 50%, 15% 5%, 32% 50%, 15% 95%); 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; top: 0; right: 0; bottom: 0; left: 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); } /* (2 Nov 2026) over everything while a break asks for an ad (main.js, afterBreak): it takes every press, and fades in only after a quarter of a second, so a break with no ad never shows it */ #adwait { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; display: grid; place-items: center; background: rgba(5, 8, 18, 0.6); touch-action: none; opacity: 0; animation: adwait 0.2s 0.25s forwards; } #adwait i { width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); border: calc(var(--u) * 0.6) solid rgba(255, 255, 255, 0.22); border-top-color: var(--gold); border-radius: 50%; animation: adspin 0.8s linear infinite; } @keyframes adwait { to { opacity: 1; } } @keyframes adspin { to { transform: rotate(360deg); } } /* (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 */ h2 { margin: 0 0 0.4em; font-size: calc(var(--u) * 3); font-style: italic; font-weight: 900; } .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 var(--tone); 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; } /* (11 Nov 2026) The room, made plain. Along the top: Back, what the room is ("4 v 4 Room") and its code, small. Then the link to share, one big green button; how many have joined, with a dot for each place; the two sides' places under their teams' names (a coloured dot, the name, and on his own side a pencil: tap it to change the team); one line of advice; and the match's settings beside the host's Start (for the others, that they wait for the host). A place is a row: a ring with the footballer's number (a plus where nobody is), who has it (YOU, P2, EMPTY) over the footballer's name (or Computer), and the host's mark. His own place has a gold outline and a pencil: tap it and the footballers' page takes the lobby's place (#lobbyPick), with Done. */ .code { margin: 0; flex: none; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.1em 0.5em; justify-content: flex-end; align-items: baseline; padding: 0.35em 0.9em; border-radius: 2em; background: rgba(255, 255, 255, 0.09); } #roomNet:not(:empty) { flex-basis: 100%; text-align: center; font-size: max(8px, calc(var(--u) * 1.1)); opacity: 0.8; } /* "Reconnecting": a line of its own under the code */ .code span { font-size: max(8px, calc(var(--u) * 1.15)); opacity: 0.75; white-space: nowrap; } .code b { font: 900 max(11px, calc(var(--u) * 1.7)) / 1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.12em; color: var(--gold); user-select: text; -webkit-user-select: text; } #room .rkind { flex: 1; min-width: 0; text-align: center; font-size: calc(var(--u) * 2.2); font-weight: 900; font-style: italic; line-height: 1.1; } #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; } #lobby .lmain { display: grid; gap: calc(var(--u) * 0.9); } #lobby .share { display: flex; align-items: center; justify-content: center; gap: 0.8em; width: 100%; min-height: max(56px, calc(var(--u) * 7.4)); padding: calc(var(--u) * 0.7) calc(var(--u) * 1); background: linear-gradient(180deg, #8ff0c4, #17b978); color: #032417; } #lobby .share svg { flex: none; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); } #lobby .share .mt { display: grid; gap: 0.2em; min-width: 0; justify-items: center; } #lobby .share b { font-size: calc(var(--u) * 2.1); font-style: italic; letter-spacing: 0.03em; text-transform: uppercase; } #lobby .share small { font-size: max(9px, calc(var(--u) * 1.2)); font-weight: 700; } #lobby .joined { margin: 0; display: grid; justify-items: center; gap: 0.35em; } #lobby .joined b { font-size: calc(var(--u) * 1.9); font-weight: 900; font-style: italic; } #lobby .dots { display: flex; gap: 0.5em; } #lobby .dots i { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; border: calc(var(--u) * 0.18) solid rgba(255, 255, 255, 0.5); } #lobby .dots i.on { background: #2fd46b; border-color: #2fd46b; } .sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: calc(var(--u) * 0.3) calc(var(--u) * 1.2); } .side { min-width: 0; } #lobby .side { display: contents; } #lobby .side.t0 > * { grid-column: 1; } #lobby .side.t1 > * { grid-column: 2; } #lobby .side h3 { grid-row: 1; align-self: center; } #lobby .side .slots { grid-row: 2; align-self: start; } /* (the names in one row, the places in the next: the places line up whatever the names' height) */ #lobby .side h3 { margin: 0; min-width: 0; font-size: calc(var(--u) * 1.7); font-style: italic; letter-spacing: 0.04em; text-align: start; } /* (start and end, not left and right: Arabic reads the other way) */ body[data-layout="tall"] #lobby.one .sides { grid-template-columns: minmax(0, 1fr); } body[data-layout="tall"] #lobby.one .side > * { grid-column: 1; } body[data-layout="tall"] #lobby.one .side.t1 h3 { grid-row: 3; } body[data-layout="tall"] #lobby.one .side.t1 .slots { grid-row: 4; } /* a room for two on an upright screen: one side under the other, each place the panel's width (it lists his players and his keeper) */ #lobby .tname { --tc: #8892a6; display: flex; align-items: center; gap: 0.45em; max-width: 100%; min-width: 0; min-height: 24px; padding: 0.15em 0; padding-inline-end: 0.5em; border-radius: 2em; font: inherit; color: #fff; text-align: start; } #lobby .tname::before { content: ""; flex: none; width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } #lobby .tname span { min-width: 0; line-height: 1.1; overflow-wrap: anywhere; } #lobby .tname .pen { display: none; flex: none; width: 1em; height: 1em; opacity: 0.8; } #lobby .tname.mine:not(:disabled) .pen { display: block; } #lobby .tname:disabled { cursor: default; color: #fff; } #lobby .tname.mine:not(:disabled):active { background: rgba(255, 255, 255, 0.1); } @media (any-pointer: coarse) { #lobby .tname { min-height: 48px; } } body.touch #lobby .tname { min-height: 48px; } .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.6em; width: 100%; min-width: 0; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 1.1); background: rgba(255, 255, 255, 0.06); border: calc(var(--u) * 0.2) solid rgba(255, 255, 255, 0.22); color: #fff; text-align: start; min-height: max(48px, calc(var(--u) * 6)); } .slot .n { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; font-size: calc(var(--u) * 1.75); font-weight: 900; font-style: italic; color: var(--tone); background: rgba(8, 13, 28, 0.7); border: calc(var(--u) * 0.2) solid var(--tone); } .slot .c { min-width: 0; } .slot .c b { display: block; font-size: max(9px, calc(var(--u) * 1.5)); font-weight: 900; font-style: italic; line-height: 1.15; overflow-wrap: anywhere; } .slot .c small { display: block; font-size: max(8px, calc(var(--u) * 1.15)); opacity: 0.8; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; } .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) */ /* the host's mark, and on his own place the pencil */ .slot .w { display: grid; justify-items: end; gap: 0.25em; white-space: nowrap; } .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 .w .pen { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); color: var(--gold); } .slot.me { border-color: #ff8a1f; background: rgba(255, 138, 31, 0.1); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 138, 31, 0.35); } .slot.bot, .slot.open { border-style: dashed; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.025); } .slot.bot .n, .slot.open .n { color: rgba(255, 255, 255, 0.7); border-style: dashed; border-color: rgba(255, 255, 255, 0.4); font-style: normal; } .slot.bot .c, .slot.open .c { opacity: 0.72; } button.slot { cursor: pointer; } button.slot:disabled { cursor: default; color: #fff; } #lobby .note { margin: 0 auto; } #lobby.one #lobbySay { text-align: start; } #lobby .lfoot { display: flex; align-items: center; gap: calc(var(--u) * 1); } /* (11 Nov 2026) A 4 v 4 room on a phone held sideways (a wide screen no more than 420 px high): its two rows of places leave no room for the line of advice under them (measured at 844 x 390 with the notch, and at 640 x 360: 15 to 20 px too tall at the smallest the screen is drawn). There the advice is left out, the share button is as low as a button may be and the gaps are smaller: the places say what they are (YOU with its pencil, EMPTY), and nothing has to be scrolled. A screen of 450 px (800 x 450, the iPhone Duo closed and turned) has room for all of it, as it is. */ @media (max-height: 420px) { body[data-layout="wide"] #lobby.four #lobbySay { display: none; } body[data-layout="wide"] #lobby.four .share { min-height: 48px; padding-top: 0; padding-bottom: 0; } body[data-layout="wide"] #lobby.four .lmain { gap: calc(var(--u) * 0.5); } } #lobby .lfoot .primary { flex: 1; text-transform: uppercase; font-style: italic; letter-spacing: 0.03em; } #lobby .lwait { flex: 1; min-width: 0; margin: 0; text-align: center; } /* the footballers' page: the one he has now, the sixteen, Done */ #room.picking .bar { display: none; } /* (not "pick": that is the selection screen's own class, and lays a screen out in two columns) */ #lobby .lpick { display: grid; gap: calc(var(--u) * 1); } #lobby .ptitle { margin: 0; font-size: calc(var(--u) * 2.6); font-style: italic; font-weight: 900; } #lobby .chosen { --tone: #ff8a1f; margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 0.5em; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1.2); border: calc(var(--u) * 0.22) solid #ff8a1f; background: rgba(255, 138, 31, 0.08); box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 138, 31, 0.3); text-align: start; } #lobby .chosen b { font-size: calc(var(--u) * 2.6); font-weight: 900; font-style: italic; color: var(--tone); } #lobby .chosen strong { font-size: calc(var(--u) * 2.6); font-weight: 900; font-style: italic; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #lobby .chosen small { grid-column: 1 / -1; font-size: max(9px, calc(var(--u) * 1.3)); font-weight: 700; color: #ffb066; } #lobbyCards { grid-template-columns: repeat(8, 1fr); grid-auto-rows: max(48px, calc(var(--u) * 5.4)); gap: calc(var(--u) * 0.6); } #lobbyCards .card { position: relative; 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.taken { opacity: 0.55; } #lobbyCards .card.taken::after { content: attr(data-tag); position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 0.1em 0.6em; border-radius: 1em; background: rgba(255, 255, 255, 0.3); color: #fff; font-size: max(8px, calc(var(--u) * 0.95)); font-weight: 900; letter-spacing: 0.08em; white-space: nowrap; } #lobbyCards .card.taken b { transform: translateY(-22%); } #lobby .lpick .primary { width: 100%; } #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); } .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) { .ghost, .primary { min-height: 48px; min-width: 48px; } } 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; } .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 small panels lose some of their space. */ @media (max-height: 500px) { 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) */ 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; } /* (11 Nov 2026) the room on a wide screen: the link and how many have joined share a row, so that a 4 v 4 fits a phone held sideways */ body[data-layout="wide"] #lobby .lmain { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; } body[data-layout="wide"] #lobby .lmain > :not(.share):not(.joined) { grid-column: 1 / -1; } 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%; } /* (10 Nov 2026) A screen held sideways that is not much wider than it is tall (up to 3:2, up to 1000 px: the iPhone Duo closed, 678 x 466, and open, 951 x 669 or 890 x 626) with a Dynamic Island and a home bar: the player's name, the energy bar and the shootout's hint sit in the middle of the space between the stick and the buttons (--gl, --gr: what the stick and the buttons take up on each side) instead of the middle of the screen, and are never wider than it: the name's moves give way (ui.js whoFit), the hint takes two lines. Wider screens are as before. */ @media (max-width: 1000px) and (max-aspect-ratio: 3/2) { body.touch[data-layout="wide"] #hud { --gl: calc(max(84px, var(--u) * 12) + var(--sl) + 76px); --gr: calc(var(--u) * 28.5 + var(--sr)); } body.touch[data-layout="wide"] #hud.swap { --gl: calc(var(--u) * 28.5 + var(--sl)); --gr: calc(max(84px, var(--u) * 12) + var(--sr) + 76px); } body.touch[data-layout="wide"] #who, body.touch[data-layout="wide"] #energy, body.touch[data-layout="wide"] #hint { left: calc((var(--gl) + 100% - var(--gr)) / 2); max-width: calc(100% - var(--gl) - var(--gr)); } body.touch[data-layout="wide"] #who { overflow: hidden; } body.touch[data-layout="wide"] #who b { flex: none; } body.touch[data-layout="wide"] #energy { width: min(calc(var(--u) * 36), calc(100% - var(--gl) - var(--gr))); } } @media (max-width: 760px) and (max-aspect-ratio: 3/2) { body.touch[data-layout="wide"] #whoMove { display: none; } } /* (the closed Duo sideways: never room for the moves beside the name; SHOOT and SKILL name them) */ 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) ── */ .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; } /* ── 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; top: 0; right: 0; bottom: 0; left: 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; top: 0; right: 0; bottom: 0; left: 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 { top: 0; right: 0; bottom: 0; left: 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 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 { -webkit-margin-end: 0.45em; 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; -webkit-margin-start: 0.15em; 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; } /* (4 Nov 2026, the owner's request) The search's look: a radar sweeping round the player's own dot, the mode and the time searched so far, the level line; then the "Match found" card (both players, VS, 3 2 1). Cheap: two elements turning and growing (transform, opacity), nothing drawn by script. A browser without conic gradients keeps the plain sweep. */ #search .radar { position: relative; width: calc(var(--u) * 12); height: calc(var(--u) * 12); margin: calc(var(--u) * 0.3) auto; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(255, 213, 74, 0.95) 0%, rgba(255, 213, 74, 0.95) 5%, rgba(255, 213, 74, 0) 6%, rgba(255, 177, 61, 0) 30%, rgba(255, 177, 61, 0.35) 31%, rgba(255, 177, 61, 0.35) 32%, rgba(255, 177, 61, 0) 33%, rgba(255, 177, 61, 0) 64%, rgba(255, 177, 61, 0.24) 65%, rgba(255, 177, 61, 0.24) 66%, rgba(255, 177, 61, 0) 67%), rgba(255, 140, 30, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 177, 61, 0.35), 0 0 calc(var(--u) * 2.4) rgba(255, 120, 20, 0.14); } #search .radar i { position: absolute; display: block; border-radius: 50%; pointer-events: none; } #search .radar .sweep { top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 177, 61, 0) 55%, rgba(255, 177, 61, 0.3) 100%); background: conic-gradient(rgba(255, 177, 61, 0) 0deg, rgba(255, 177, 61, 0) 260deg, rgba(255, 177, 61, 0.5) 360deg); animation: radar 2.4s linear infinite; } #search .radar .ping { top: 35%; left: 35%; width: 30%; height: 30%; border: 2px solid rgba(255, 213, 74, 0.7); animation: ping 2.4s ease-out infinite; } @keyframes radar { to { transform: rotate(360deg); } } @keyframes ping { from { transform: scale(0.35); opacity: 1; } to { transform: scale(3.3); opacity: 0; } } #search .smeta { margin: 0; display: flex; justify-content: center; align-items: center; gap: 0.8em; font-size: max(10px, calc(var(--u) * 1.5)); } #search .smeta b { font-weight: 900; letter-spacing: 0.14em; color: var(--gold); } #search .sclock { font-weight: 800; font-variant-numeric: tabular-nums; padding: 0.1em 0.7em; border-radius: 1em; background: rgba(255, 255, 255, 0.09); } #search .found { display: grid; justify-items: center; gap: calc(var(--u) * 0.8); } #search .ftitle { font-size: calc(var(--u) * 2.6); font-weight: 900; font-style: italic; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 calc(var(--u) * 1.2) rgba(255, 138, 31, 0.55); } #search .fvs { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); width: 100%; } #search .fside { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 0.4em; padding: calc(var(--u) * 1.1) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 1.2); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); } #search .fside.me { border-color: rgba(47, 125, 255, 0.75); box-shadow: 0 0 calc(var(--u) * 1.4) rgba(47, 125, 255, 0.25); } #search .fside.them { border-color: rgba(255, 59, 78, 0.65); box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 59, 78, 0.2); } #search .fava { display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: 50%; font-size: calc(var(--u) * 2.4); font-weight: 900; color: #fff; background: linear-gradient(160deg, #5aa2ff, #2f5bd6); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); } #search .them .fava { background: linear-gradient(160deg, #ff7a8a, #c42a4e); } #search .fwho { display: flex; align-items: center; justify-content: center; gap: 0.4em; max-width: 100%; min-width: 0; font-size: max(10px, calc(var(--u) * 1.5)); font-weight: 800; } #search .fwho bdi { min-width: 0; overflow: hidden; white-space: nowrap; text-align: center; font-size: max(8px, calc(1em * var(--fit, 1))); } /* (12 Nov 2026) --fit: a name wider than its side is set that much smaller (main.js, nameFit), never cut with dots */ #search .fwho bdi.two { line-height: 1.2; } /* still too wide at the smallest size: two lines, broken by main.js (a line as tall as its letters, tails and all: the box hides what spills) */ #search .fwho bdi.two.any { white-space: normal; overflow-wrap: anywhere; } /* its halves still too wide: broken wherever it must be */ #search .fx { font-size: calc(var(--u) * 2.4); font-weight: 900; font-style: italic; opacity: 0.85; } #search .fcount { min-height: 1em; font-size: calc(var(--u) * 5.6); line-height: 1; font-weight: 900; color: #fff; text-shadow: 0 0 calc(var(--u) * 2) rgba(255, 138, 31, 0.85); } #search .fcount.go { animation: count 0.7s ease-out; } @keyframes count { from { transform: scale(1.7); opacity: 0; } 35% { opacity: 1; } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { #search .radar .sweep, #search .radar .ping, #search .fcount.go { animation: none; } } /* 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; } html[lang="ar"] body .screen h1, html[lang="ar"] body .screen h2, html[lang="ar"] body .screen b, html[lang="ar"] body .screen strong, html[lang="ar"] body .screen .mode b, html[lang="ar"] body .screen .card b, html[lang="ar"] body .screen .logo { font-style: normal; } /* (0.7.3: the same, for a browser without :is) */ /* 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; } .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); } #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; } @media (any-pointer: coarse) { .chip, .fgrid .fl, .fbtn, #settings .you input, #flagFind, .item button, .task button { min-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; } 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); } } /* ── (0.7.4) The menu: the owner's choice of 4 November 2026 ("Big PLAY") ────────────────────────────────────────── No panel: the bots' match behind it shows, darker toward the bottom. Along the top his name and flag (Settings) and his gems (the shop); the logo; then, in a thumb's reach, one big PLAY (a Solo Match at once) with the button for its choices beside it, FRIENDS and ONLINE side by side, SIGNATURE HEROES; and a bar along the bottom: Shop, Tasks, Ranks, Settings. Upright the four parts stack; on a wide screen the logo and the buttons share the middle, side by side. A copy of the game without its server has no profile, gems, Online, Shop, Tasks or Ranks: FRIENDS takes the row, and the bar holds Settings alone. */ #menu { place-items: stretch; background: linear-gradient(180deg, rgba(5, 8, 18, 0.55) 0%, rgba(5, 8, 18, 0.12) 15%, rgba(5, 8, 18, 0.08) 36%, rgba(5, 8, 18, 0.55) 58%, rgba(5, 8, 18, 0.88) 78%, rgba(5, 8, 18, 0.96) 100%); padding: calc(var(--u) * 1.2 + var(--st)) calc(var(--u) * 1.8 + var(--sr)) calc(var(--u) * 1.2 + var(--sb)) calc(var(--u) * 1.8 + var(--sl)); } #menu .home { display: grid; grid-template-rows: auto 1fr auto auto; grid-template-areas: "top" "brand" "acts" "nav"; gap: calc(var(--u) * 1.6); width: 100%; max-width: calc(var(--u) * 58); margin: 0 auto; } #menu .mtop { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); min-width: 0; } #menu .me { display: flex; align-items: center; gap: 0.55em; min-width: 0; max-width: 66%; min-height: calc(var(--u) * 4.4); padding: 0.2em 1.1em 0.2em 0.2em; border-radius: 2em; background: rgba(6, 10, 22, 0.66); border: 1px solid rgba(255, 255, 255, 0.16); font-size: calc(var(--u) * 1.6); font-weight: 800; } #menu .me b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.touch #menu .me { min-height: 48px; } @media (any-pointer: coarse) { #menu .me { min-height: 48px; } } #menu .ava { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #3d5594, #1b2547); box-shadow: 0 0 0 2px var(--gold); } #menu .ava svg { width: 66%; height: 66%; margin-top: 22%; color: #d8e5ff; } #menu .ava .pflag { width: 133%; height: 100%; border-radius: 0; box-shadow: none; } #menu .gems { font-size: calc(var(--u) * 1.7); padding: 0.2em 0.4em 0.2em 0.7em; background: rgba(6, 10, 22, 0.66); } #menu .gems .plus { position: relative; flex: none; width: 1.35em; height: 1.35em; border-radius: 50%; background: linear-gradient(180deg, #a6f6ff, #19b9dc); } #menu .gems .plus::before, #menu .gems .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.66em; height: 0.16em; margin: -0.08em 0 0 -0.33em; border-radius: 0.1em; background: #04202e; } #menu .gems .plus::after { transform: rotate(90deg); } #menu .brand { grid-area: brand; display: grid; align-content: center; justify-items: center; text-align: center; min-width: 0; } #menu .logo { font-size: min(calc(var(--u) * 8.4), 13.6vw); white-space: nowrap; filter: drop-shadow(0 0.055em 0 #3a1200) drop-shadow(0 0 0.03em #1c0900) drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.55)); } #menu .by { margin-top: 0.55em; font-size: calc(var(--u) * 1.7); text-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.85); } #menu .acts { grid-area: acts; display: grid; gap: calc(var(--u) * 1.1); min-width: 0; } #menu .playrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 0.9); } #menu .acts .mode { border-radius: calc(var(--u) * 1.6); color: #fff; } #menu .acts .mode b { font-style: italic; font-weight: 900; letter-spacing: 0.05em; line-height: 1.05; text-shadow: 0 0.07em 0 rgba(0, 0, 0, 0.32), 0 0 0.35em rgba(0, 0, 0, 0.25); } #menu .play { min-height: max(64px, calc(var(--u) * 10.6)); gap: 0.1em; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4); background: linear-gradient(180deg, #ffd25e 0%, #ff9a26 46%, #ff6200 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -0.3em 0 rgba(150, 45, 0, 0.3), 0 0.5em 1.6em rgba(255, 106, 0, 0.38); } #menu .play b { font-size: calc(var(--u) * 4.5); letter-spacing: 0.07em; text-shadow: 0 0.06em 0 #a33a00, 0 0 0.3em rgba(120, 35, 0, 0.5); } #menu .play small { font-size: max(9px, calc(var(--u) * 1.4)); font-weight: 800; letter-spacing: 0.03em; color: #3d1500; } #menu .tune { display: grid; place-items: center; width: max(48px, calc(var(--u) * 7.4)); border-radius: calc(var(--u) * 1.6); background: rgba(40, 18, 4, 0.72); border: 1px solid rgba(255, 170, 60, 0.6); color: #ffd9a8; } /* (PLAY's own choices: its colour, quieter) */ #menu .tune svg { width: max(22px, calc(var(--u) * 3)); height: max(22px, calc(var(--u) * 3)); } #menu .pair { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--u) * 0.9); } #menu .pair .mode, #menu .slim { display: flex; align-items: center; justify-content: center; gap: 0.5em; } #menu .pair .mode { min-height: max(52px, calc(var(--u) * 7.4)); padding: calc(var(--u) * 0.7) calc(var(--u) * 0.8); } #menu .pair .mode b { font-size: calc(var(--u) * 2.2); } #menu .pair svg { flex: none; width: calc(var(--u) * 3.1); height: calc(var(--u) * 3.1); filter: drop-shadow(0 0.1em 0 rgba(0, 0, 0, 0.3)); } #menu .mode[data-mode="friends"] { background: linear-gradient(180deg, #6fabff, #2160e8); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0.4em 1.2em rgba(33, 96, 232, 0.3); } #menu .mode[data-mode="online"] { background: linear-gradient(180deg, #49d6ee, #0784ad); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0.4em 1.2em rgba(7, 132, 173, 0.3); } /* (11 Nov 2026) PLAY ONLINE: one button across the menu (it took the places of FRIENDS and ONLINE), its picture beside two lines, from teal to blue. On an upright screen the logo sits under the top row, not in the middle of the screen: the stadium and the pitch behind the menu show between it and the buttons. */ #menu .mode.online { display: flex; align-items: center; justify-content: center; gap: 0.7em; min-height: max(56px, calc(var(--u) * 8.2)); padding: calc(var(--u) * 0.7) calc(var(--u) * 1); background: linear-gradient(180deg, #3fe0e6 0%, #1f9be8 55%, #1c5fe0 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0.4em 1.2em rgba(28, 110, 224, 0.32); } #menu .mode.online svg { flex: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); filter: drop-shadow(0 0.1em 0 rgba(0, 0, 0, 0.3)); } #menu .mode.online .mt { display: grid; gap: 0.15em; min-width: 0; justify-items: center; } #menu .mode.online b { font-size: calc(var(--u) * 2.7); } #menu .mode.online small { font-size: max(9px, calc(var(--u) * 1.3)); font-weight: 800; letter-spacing: 0.03em; color: #eaf7ff; text-shadow: 0 0.07em 0 rgba(0, 0, 0, 0.3); } body[data-layout="tall"] #menu .brand { align-content: start; padding-top: calc(var(--u) * 0.6); } #menu .slim { min-height: max(48px, calc(var(--u) * 5.8)); padding: calc(var(--u) * 0.6) calc(var(--u) * 1); background: linear-gradient(180deg, #b27dff, #6a27d6); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 0.4em 1.2em rgba(106, 39, 214, 0.3); } #menu .slim b { font-size: calc(var(--u) * 1.85); letter-spacing: 0.08em; } #menu .slim svg { flex: none; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); color: var(--gold); filter: drop-shadow(0 0.1em 0 rgba(0, 0, 0, 0.3)); } #menu .mnav { grid-area: nav; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 0.5); border-radius: calc(var(--u) * 2); background: rgba(9, 13, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0.5em 1.6em rgba(0, 0, 0, 0.45); } #menu .mnav.one { justify-self: center; grid-auto-columns: minmax(calc(var(--u) * 12), auto); } /* (a copy without its server: Settings alone) */ #menu .mnav button { display: grid; justify-items: center; align-content: center; gap: 0.25em; min-width: 0; min-height: max(48px, calc(var(--u) * 6.2)); padding: 0.25em 0.3em; border-radius: calc(var(--u) * 1.4); font-size: max(9px, calc(var(--u) * 1.3)); font-weight: 800; letter-spacing: 0.03em; color: rgba(243, 245, 250, 0.9); } #menu .mnav button:active { background: rgba(255, 255, 255, 0.1); } #menu .mnav .ic { position: relative; display: block; width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); } #menu .mnav .ic svg { display: block; width: 100%; height: 100%; } #menu .mnav span + span { max-width: 100%; line-height: 1.1; overflow-wrap: break-word; } #menu .mnav .pip { top: -0.2em; right: -0.35em; left: auto; width: 0.8em; height: 0.8em; } body[data-layout="wide"] #menu .home { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto 1fr auto; grid-template-areas: "top top" "brand acts" "nav nav"; column-gap: calc(var(--u) * 4); } body[data-layout="wide"] #menu .brand { align-self: center; justify-self: end; } body[data-layout="wide"] #menu .logo { font-size: min(calc(var(--u) * 6.8), 5.4vw); } body[data-layout="wide"] #menu .acts { align-self: center; justify-self: start; width: min(100%, calc(var(--u) * 46)); } body[data-layout="wide"] #menu .mnav { justify-self: center; width: min(100%, calc(var(--u) * 62)); } body[data-layout="wide"] #menu .mnav.one { width: auto; } /* (11 Nov 2026) "Create your player" (the notice before an online profile is made), made plain: a picture, the name of the thing, two short lines, one button; "Not now" and "What is saved?" are words to tap (as tall as a finger needs where fingers are used), and the whole of what is kept opens under the second. */ #consent .panel.small { justify-items: center; gap: calc(var(--u) * 0.6); padding-top: calc(var(--u) * 2.6); } #consent .note.lead { margin-bottom: calc(var(--u) * 0.5); } #consent #consentNo { margin-top: calc(var(--u) * -0.2); } #consent .fine { margin-top: calc(var(--u) * -0.6); } #consent h2 { margin: 0; } #consent .note { margin: 0 auto; } #consent .cava { display: grid; place-items: center; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #3d5594, #1b2547); box-shadow: 0 0 0 calc(var(--u) * 0.3) var(--gold); } #consent .cava svg { width: 66%; height: 66%; margin-top: 22%; color: #d8e5ff; } /* (a phone held sideways, a screen no more than 420 px high: with "What is saved?" open the notice was 11 px too tall beside a notch; the round picture, which says nothing, is left out there) */ @media (max-height: 420px) { #consent .cava { display: none; } } #consent .lead { font-size: max(10px, calc(var(--u) * 1.5)); font-weight: 600; opacity: 0.95; line-height: 1.45; } #consent .primary { width: 100%; } .tlink { min-height: 24px; padding: 0.3em 0.8em; font-weight: 800; font-size: max(9px, calc(var(--u) * 1.35)); color: #fff; border-radius: 2em; } /* (24 px: the least a mouse is given; a finger gets 48, below) */ .tlink:active { background: rgba(255, 255, 255, 0.1); } @media (any-pointer: coarse) { .tlink { min-height: 48px; min-width: 48px; } } body.touch .tlink { min-height: 48px; min-width: 48px; } #consent .fine { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 0.6em; font-size: max(8px, calc(var(--u) * 1.1)); font-weight: 500; color: rgba(243, 245, 250, 0.72); } #consent .fine .tlink { padding: 0.3em 0.2em; font-size: inherit; font-weight: 700; color: rgba(243, 245, 250, 0.92); text-decoration: underline; text-underline-offset: 0.2em; } /* (11 Nov 2026) How to play, made plain: four cards, each a picture of the stick or of a button as it is on the screen, a word and one short line (with a keyboard: its keys, in gold, over the line); a line on what the buttons become without the ball; Got it, and More tips for the whole of it (the table and the paragraphs of before). */ #help .hcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1); } body[data-layout="tall"] #help .hcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } #help .hcard { display: grid; justify-items: center; align-content: start; gap: 0.2em; min-width: 0; padding: calc(var(--u) * 1.1) calc(var(--u) * 0.7) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1.3); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); text-align: center; } #help .hcard b { font-size: calc(var(--u) * 2.1); font-weight: 900; font-style: italic; letter-spacing: 0.04em; line-height: 1.1; } #help .hcard small { max-width: 100%; font-size: max(9px, calc(var(--u) * 1.25)); font-weight: 500; opacity: 0.85; line-height: 1.25; overflow-wrap: break-word; } #help .hcard .hk { font-weight: 800; opacity: 1; color: var(--gold); } body.touch #help .hk, body:not(.touch) #help .ht { display: none; } #help .hpic { display: grid; place-items: center; height: calc(var(--u) * 9.6); margin-bottom: 0.25em; } #help .hbtn { display: grid; place-items: center; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); border-radius: 50%; background: rgba(8, 13, 28, 0.8); border: calc(var(--u) * 0.36) solid #fff; color: #fff; box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.45); } #help .hbtn.big { width: calc(var(--u) * 9); height: calc(var(--u) * 9); } #help .hbtn.sk { border-color: #ff7a1a; color: #ffa257; box-shadow: 0 0 calc(var(--u) * 1.3) rgba(255, 122, 26, 0.6), 0 0.2em 0.8em rgba(0, 0, 0, 0.45); } #help .hbtn svg { width: 46%; height: 46%; } #help .hstick { position: relative; display: block; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: calc(var(--u) * 0.3) solid rgba(255, 255, 255, 0.3); } #help .hstick > i { position: absolute; left: 14%; top: 42%; width: 44%; height: 44%; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } #help .hstick svg { position: absolute; right: 8%; top: 8%; width: 46%; height: 46%; color: var(--gold); } #help .hline { text-align: center; margin: calc(var(--u) * 1) auto 0; } #help .hfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8); margin-top: calc(var(--u) * 1.1); } body[data-layout="tall"] #help .hfoot .primary { flex: 1 1 100%; } /* "More tips" on a wide screen: its two buttons go up beside the title, where Got it was before the cards: the whole of it is then no taller than it always was (under them it was 22 px too tall for the smallest frame a phone is given, 640 x 360) */ body[data-layout="wide"] #help.more .panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--u) * 0.8); align-items: center; } body[data-layout="wide"] #help.more .head { grid-column: 1; grid-row: 1; } body[data-layout="wide"] #help.more .hfoot { grid-column: 2; grid-row: 1; margin: 0 0 calc(var(--u) * 0.8); flex-wrap: nowrap; } body[data-layout="wide"] #help.more .cols { grid-column: 1 / -1; } #help .hbtns:empty, #help .head .hbtns:not(:has(> :not([hidden]))) { display: none; } #help:not(.more) .head { justify-content: center; } /* (11 Nov 2026) Play Online (PLAY ONLINE on the menu): Find a match, Invite friends, and a room's code for whoever was given one. Invite Friends (the Friends screen of before): the size of the match, and its room is made at once. Find a Match (the Online screen of before): three kinds, Tournament opening its two sizes in their place. Their buttons are one under another upright and side by side on a wide screen. */ #hub .panel, #friends .panel { display: grid; gap: calc(var(--u) * 1.1); } #hub h2, #friends h2, #hub .note, #friends .note { margin: 0 auto; } .modes.find { grid-template-columns: repeat(3, minmax(0, 1fr)); } .modes.find.hubm, #onlineCups { grid-template-columns: repeat(2, minmax(0, 1fr)); } body[data-layout="tall"] .modes.find, body[data-layout="tall"] .modes.find.hubm, body[data-layout="tall"] #onlineCups { grid-template-columns: 1fr; } .modes.find .mode b { font-size: calc(var(--u) * 2.3); } .modes.find .mode small { font-size: max(9px, calc(var(--u) * 1.2)); font-weight: 700; } .hubm .mode { display: flex; align-items: center; justify-content: center; gap: 0.8em; min-height: max(64px, calc(var(--u) * 10)); } .hubm .mode svg { flex: none; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); } .hubm .mode .mt { display: grid; gap: 0.3em; min-width: 0; justify-items: center; } .mode[data-hub="find"] { background: linear-gradient(180deg, #8ff0c4, #17b978); color: #032417; } .mode[data-hub="invite"] { background: linear-gradient(180deg, #7db4ff, #2f7dff); color: #04122e; } .mode[data-omode="cups"] { background: linear-gradient(180deg, #ffe08a, #f5a300); color: #1f1400; } #hub .join { margin-top: 0; } #hub .join label { flex: 0 1 auto; min-width: 0; font-weight: 800; text-align: end; } #hub .join input { flex: none; width: 6.6em; } #hub .join .ghost { flex: none; } /* Settings (0.7.4): the sound, the commentary (with its line: he speaks English) and vibration as three switches; How to play, Controls and Results (from the menu); the version. Wide: the switches in one row, the screen's buttons in one bar. Upright: two switches a row. */ body[data-layout="wide"] #settings .panel { width: min(calc(var(--u) * 84), 100%); } .sws { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--u) * 0.7); } /* (a switch a copy has no use for, hidden, gives the others its room) */ body[data-layout="tall"] .sws { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } body[data-layout="tall"] .sws #vibeBtn, body[data-layout="tall"] .sws #soundBtn[hidden] + #talkBtn { grid-column: 1 / -1; } .sws .vibe { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l s" "n s"; align-items: center; align-content: center; gap: 0 0.7em; min-width: 0; padding-left: 1.1em; padding-right: 0.8em; } .sws .vibe > span { grid-area: l; min-width: 0; } .sws .vibe small { grid-area: n; margin-top: 0.15em; } .sws .vibe .sw { grid-area: s; } body[data-layout="tall"] .sws .vibe > span { font-size: max(9px, calc(var(--u) * 1.4)); } #settings .sbar { margin-top: 0; justify-content: center; flex-wrap: wrap; row-gap: calc(var(--u) * 0.7); } #settings .sgo { display: flex; gap: calc(var(--u) * 0.7); justify-content: center; flex-wrap: wrap; } #setMore { -webkit-margin-end: auto; margin-inline-end: auto; } body[data-layout="tall"] #settings .sbar { display: grid; justify-content: stretch; } body[data-layout="tall"] #setMore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); -webkit-margin-end: 0; margin-inline-end: 0; } body[data-layout="tall"] #setMore .ghost { min-width: 0; padding-left: 0.3em; padding-right: 0.3em; line-height: 1.15; } #settings .ver { margin: 0; } @media (max-height: 700px) { body[data-layout="tall"] #settings .slbl { display: none; } } /* (the smallest upright phones: the switches and buttons take the headings' place) */ @media (max-height: 700px) and (min-aspect-ratio: 3/5) { body[data-layout="tall"] #settings .panel { gap: calc(var(--u) * 0.6); } } /* (10 Nov 2026) a short upright screen that is wide for its height, the iPhone Duo closed (466 x 678) with its Dynamic Island and home bar: the rows a little closer, so Settings fits without scrolling */ /* Match settings (0.7.4): the bots' level, from the menu; upright a group like the lengths, wide one row under them */ #diff { grid-template-columns: repeat(3, minmax(0, 1fr)); } #diff button { font-size: calc(var(--u) * 1.5); font-weight: 900; } #diff button:disabled, .choice button:disabled { cursor: default; } body[data-layout="wide"] #setup .sbots { display: grid; grid-template-columns: auto minmax(0, calc(var(--u) * 30)) minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 1.4); } body[data-layout="wide"] #setup .sbots h3 { margin: 0; } body[data-layout="wide"] #setup .sbots .note { margin: 0; } /* ── (0.7.3) Older browsers: an iPhone before iOS 15 (Safari 12 to 14), Chrome before 2021 ─────────────────────────── Each block below is read only by a browser that lacks what it stands in for, so every newer browser draws the page exactly as before. */ /* a flex row or column without its gap (Safari before iOS 14.5, Chrome before 84): view/flexgap.js marks each one and hands it its gaps; its items are spaced by margins (r: a row, rr: reversed, c: a column, cr: reversed, w: wrapping) */ .no-flexgap [data-fg="r"] > * + * { -webkit-margin-start: var(--fgc); margin-inline-start: var(--fgc); } .no-flexgap [data-fg="rr"] > * + * { -webkit-margin-end: var(--fgc); margin-inline-end: var(--fgc); } .no-flexgap [data-fg="c"] > * + * { margin-top: var(--fgr); } .no-flexgap [data-fg="cr"] > * + * { margin-bottom: var(--fgr); } .no-flexgap [data-fg="w"] > * { margin: calc(var(--fgr) / 2) calc(var(--fgc) / 2); } /* the flags of the online profile: WebP from Safari 14; before it their PNG twin (boot.js marks the page) */ .no-webp .pflag { background-image: url(../assets/ui/flags.png); } @supports not (inset-inline-start: 0) { .vibe .sw::after { left: 0.17em; } .vibe[aria-checked="true"] .sw::after { left: 1.42em; } .pip { right: 0.35em; } } @supports not (padding-inline: 0) { .bracket.tight .tie { padding-left: calc(var(--u) * 0.25); padding-right: calc(var(--u) * 0.25); } } @supports not (aspect-ratio: 1) { .fturf .fcirc { height: 0; padding-bottom: 30%; } .fmini { height: calc(var(--fm) * 1.25); } .tview { width: calc(var(--u) * 13 * var(--ar, 16 / 9)); } .tview.tall { width: calc(var(--u) * 24 * var(--ar, 16 / 9)); } } @supports not (translate: 0) { body.touch #pad.free .btn { transform: translate(-50%, -50%); } body.touch #pad.free .btn.on { transform: translate(-50%, -50%) scale(0.92); } body.touch #pad.free .btn.big.hot { animation-name: hotfree; } #hud.arranging .btn.lift { transform: scale(1.08); } body.touch #hud.arranging #pad.free .btn.lift { transform: translate(-50%, -50%) scale(1.08); } #hud.arranging #joy::after, .tview .tb { transform: translate(-50%, -50%); } #arrangeBar { transform: translateX(-50%); } } @keyframes hotfree { to { box-shadow: 0 0 calc(var(--u) * 3.4) #ff7a18; transform: translate(-50%, -50%) scale(1.05); } } @supports not (width: clamp(1px, 1px, 1px)) { #setup .smini { --fm: max(84px, min(calc(var(--u) * 15), 300px)); } } @supports not (overflow-wrap: anywhere) { .kact .kname, #natCards .card b.two, .tie p bdi, .brow .who bdi, .fbtn b, .fgrid .fl span, #search .fwho bdi.two.any { word-break: break-word; } }