/* hud.css  -  in-game overlays. Kept small and out of the way of play. */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--display); }
.score { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; background: rgba(11,21,48,.9); border: 1px solid var(--edge); font-weight: 800; font-size: 1.3rem; }
.score > * { padding: 4px 10px; display: flex; align-items: center; }
.score .tm { background: var(--c); text-shadow: 0 1px 2px #000; min-width: 52px; justify-content: center; }
.score b { font-variant-numeric: tabular-nums; }
.score .clock { color: var(--gold); font-variant-numeric: tabular-nums; }
.score .tackle { background: var(--panel); font-size: .9rem; letter-spacing: .1em; color: var(--dim); }
.roles { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 1.15rem; }
.roles span { background: rgba(11,21,48,.88); border-left: 6px solid var(--c); padding: 2px 10px; }
.notice { position: absolute; top: 28%; left: 50%; transform: translateX(-50%) skewX(-8deg); text-align: center; background: var(--gold); color: var(--navy); padding: 8px 28px; }
.notice b { display: block; font-style: italic; font-weight: 800; font-size: 2.4rem; line-height: 1; }
.notice span { font-weight: 600; font-size: 1.1rem; letter-spacing: .08em; }
.toast { position: absolute; bottom: 16px; right: 16px; background: rgba(11,21,48,.9); border: 1px solid var(--edge); padding: 6px 14px; font-weight: 600; letter-spacing: .06em; font-size: 1.05rem; }
.help { position: absolute; top: 60px; right: 12px; width: min(440px, calc(100% - 24px)); max-height: calc(100% - 80px); overflow-y: auto; background: rgba(11,21,48,.94); border: 1px solid var(--edge); padding: 12px 14px; font-family: var(--body); font-size: .85rem; }
.help h4 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 4px; text-transform: uppercase; }
.help h5 { font-family: var(--display); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 4px; font-size: .9rem; }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.help dt { font-weight: 600; white-space: nowrap; } .help dd { margin: 0; }
#debug th { text-align: left; color: #8fb59a; font-weight: 400; padding-right: 10px; white-space: nowrap; vertical-align: top; }
#debug td { white-space: pre-wrap; }
#debug .cmds { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; color: #ffe08a; }
.score .tackle.last { background: var(--gold); color: var(--navy); }
.score .metres { display: none; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; background: var(--c, var(--panel)); border-left: 3px solid var(--gold); padding: 2px 10px; line-height: 1; text-shadow: 0 1px 2px #000; animation: metresIn .35s ease-out; }
.score .metres.on { display: flex; }
.score .metres small { font-size: .62rem; letter-spacing: .14em; font-weight: 700; opacity: .9; }
.score .metres b { font-size: 1.15rem; letter-spacing: .02em; }
@keyframes metresIn { from { transform: translateX(-10px); } to { transform: none; } }
@media (max-width: 560px) { .score .metres small { font-size: .5rem; } .score .metres b { font-size: .95rem; } }
.status { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: rgba(11,21,48,.88); border: 1px solid var(--edge); padding: 3px 14px; font-weight: 600; letter-spacing: .1em; font-size: .95rem; color: var(--gold); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.stam { position: absolute; right: 12px; bottom: 56px; display: flex; flex-direction: column; gap: 4px; width: min(230px, 45%); }
.stam div { background: rgba(11,21,48,.85); border-left: 5px solid var(--c); padding: 3px 8px; font-size: .85rem; font-weight: 600; letter-spacing: .03em; }
.stam span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stam i { display: block; height: 5px; background: rgba(255,255,255,.15); margin-top: 2px; }
.stam b { display: block; height: 100%; background: var(--live); }

/* Full-time panel */
.final { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); background: rgba(11,21,48,.95); border: 1px solid var(--edge); padding: 18px 20px; text-align: center; font-family: var(--body); }
.final h2 { font-family: var(--display); color: var(--gold); text-transform: uppercase; margin: 0 0 10px; font-size: 1.6rem; letter-spacing: .05em; }
.final .fs { display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 10px; align-items: center; margin-bottom: 12px; }
.final .fs span { font-family: var(--display); text-transform: uppercase; border-bottom: 3px solid var(--c); padding-bottom: 2px; font-size: 1rem; }
.final .fs b { font-family: var(--display); font-size: 2.4rem; }
.final table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.final td, .final th { padding: 4px 6px; border-top: 1px solid rgba(255,255,255,.1); }
.final th { font-weight: 400; opacity: .8; }
.final p { margin: 12px 0 0; opacity: .75; font-size: .85rem; }

/* Kicking wheel (bottom centre, clear of the kicker) */
.wheel { position: absolute; left: 50%; bottom: 70px; width: 360px; height: 228px; margin-left: -180px; pointer-events: none; font-family: var(--display); text-transform: uppercase; }
.wheel > div { position: absolute; width: 100px; padding: 6px 0; text-align: center; background: rgba(11,21,48,.9); border: 2px solid rgba(255,255,255,.25); border-radius: 8px; }
.wheel > div b { display: block; font-size: 1.4rem; line-height: 1; color: var(--gold); }
.wheel > div span { font-size: .95rem; letter-spacing: .05em; }
.wheel .n { left: 130px; top: 0; } .wheel .s { left: 130px; top: 172px; } .wheel .w { left: 0; top: 104px; } .wheel .e { right: 0; top: 104px; }
.wheel .f { left: 130px; top: 58px; padding: 3px 0; } .wheel .f b { font-size: 1rem; display: inline; margin-right: 6px; } .wheel .f span { font-size: .8rem; }
.wheel .c { left: 112px; top: 106px; width: 136px; padding: 5px 0; background: rgba(0,0,0,.75); border-color: var(--gold); font-size: .95rem; }
.wheel .c small { display: block; font-size: .62rem; opacity: .8; letter-spacing: .04em; }
.wheel .on { border-color: var(--gold); background: rgba(255,207,63,.3); }
.wheel .auto { border-color: rgba(255,207,63,.65); }
@media (max-width: 600px) { .wheel { transform: scale(.8); transform-origin: bottom center; } }

/* Replay tag */
.replaytag { position: absolute; top: 70px; left: 16px; font-family: var(--display); font-size: 1.6rem; letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.6); padding: 4px 14px 4px 34px; border-left: 4px solid #e23b3b; }
.replaytag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #e23b3b; animation: rpblink 1s steps(2) infinite; }
@keyframes rpblink { 50% { opacity: 0; } }

/* Two-player seat swap banner */
.swap { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); text-align: center; font-family: var(--display); text-transform: uppercase; background: rgba(11,21,48,.92); border: 3px solid var(--c); padding: 8px 26px 10px; pointer-events: none; }
.swap b { display: block; font-size: 2.6rem; line-height: 1; color: var(--c); letter-spacing: .08em; }
.swap span { display: block; font-size: 1.3rem; letter-spacing: .05em; }
.swap small { display: block; font-family: var(--body); text-transform: none; font-size: .85rem; opacity: .8; }
.swap.go { animation: swapin .35s ease-out; }
@keyframes swapin { from { transform: translateX(-50%) scale(1.25); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .swap.go { animation: none; } }

.help h4 small { font-family: var(--body); font-size: .7rem; color: var(--dim); text-transform: none; margin-left: 6px; }
.help .kgroup { margin-top: 8px; padding: 8px 10px; }
.help .kgroup h5 { font-size: 1.05rem; margin: 0 0 4px; color: var(--ink); }
.help .krow { grid-template-columns: minmax(88px, max-content) minmax(0,1fr); padding: 3px 0; }
.help kbd { height: 22px; min-width: 22px; font-size: .75rem; }

/* Pre-match team sheet: a 1990s broadcast graphic. */
.intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: linear-gradient(180deg, rgba(5,10,24,.35), rgba(5,10,24,.82)); animation: introIn .5s ease-out; overflow-y: auto; }
@keyframes introIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ibar { display: flex; align-items: center; gap: 14px; background: var(--gold); color: var(--navy); padding: 6px 16px; transform: skewX(-10deg); max-width: 100%; flex-wrap: wrap; justify-content: center; }
.ibar span { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; }
.ibar b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: clamp(1.1rem, 3vw, 1.9rem); text-transform: uppercase; }
.ibar i { font-style: normal; opacity: .6; margin: 0 4px; }
.isides { display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); gap: 14px; max-width: 100%; }
@media (max-width: 640px) { .isides { grid-template-columns: minmax(0,1fr); } }
.isheet { background: rgba(11,21,48,.94); border: 1px solid var(--edge); border-top: 6px solid var(--c); padding: 10px 14px 12px; animation: sheetIn .55s ease-out both; }
.isheet + .isheet { animation-delay: .12s; }
@keyframes sheetIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.isheet h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.irate { display: flex; gap: 10px; align-items: center; margin: 6px 0 8px; }
.irate b { background: var(--c); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.3rem; padding: 2px 10px; text-shadow: 0 1px 2px #000; box-shadow: inset 0 -3px 0 var(--c2); }
.irate span { font-size: .72rem; color: var(--dim); letter-spacing: .06em; }
.isheet ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.isheet li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 6px; font-size: .86rem; padding: 2px 0; border-bottom: 1px solid rgba(42,61,114,.5); }
.isheet li b { font-family: var(--display); font-weight: 800; color: var(--gold); text-align: right; }
.isheet li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isheet li em { color: var(--gold); font-style: normal; font-weight: 700; font-size: .8em; }
.isheet h6 { margin: 8px 0 2px; font-family: var(--display); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ihint { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro, .isheet { animation: none; } .ihint { animation: none; } }

/* Full time: player of the match, try scorers, play again. */
.final { max-height: calc(100% - 32px); overflow-y: auto; width: min(520px, calc(100% - 32px)); }
.pom { border-left: 6px solid var(--c); background: rgba(255,255,255,.05); padding: 8px 12px; text-align: left; margin-bottom: 10px; }
.pom small, .fscorers small { display: block; font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-size: .72rem; }
.pom b { font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; display: block; line-height: 1.05; }
.pom span { font-size: .82rem; opacity: .85; }
.fscorers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: .82rem; margin-bottom: 10px; text-align: left; }
.fbtn { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.fbtn button { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.15rem; padding: 8px 18px; cursor: pointer; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); transform: skewX(-10deg); }
.fbtn button:first-child { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.fbtn small { font-style: normal; font-weight: 600; font-size: .7rem; opacity: .7; margin-left: 4px; }

/* Pause menu */
#pause { position: fixed; inset: 0; z-index: 30; background: rgba(5,10,24,.72); display: grid; place-items: start center; overflow-y: auto; padding: 24px 16px; font-family: var(--body); }
#pause[hidden] { display: none; }
.pbox { width: min(560px, 100%); background: var(--navy); border: 1px solid var(--edge); border-top: 4px solid var(--gold); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; animation: introIn .25s ease-out; }
.pbox-subs, .pbox-controls { width: min(980px, 100%); }
.pbox h2 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; margin: 0; font-size: 2rem; line-height: 1; }
.pscore { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; } .pscore span { color: var(--gold); margin: 0 8px; }
.pnav { display: flex; flex-direction: column; gap: 6px; }
.pnav button { text-align: left; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.35rem; text-transform: uppercase; background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-left: 6px solid var(--edge); padding: 8px 14px; cursor: pointer; }
.pnav button:hover, .pnav button:focus-visible { border-left-color: var(--gold); }
.pnav button.primary { border-left-color: var(--gold); }
.psub { margin: 0; color: var(--dim); font-size: .88rem; } .psub .ok { color: var(--live); }
.ptabs, .ptools, .pq { display: flex; gap: 6px; flex-wrap: wrap; }
.pq button { background: rgba(56,212,122,.14); border: 1px solid var(--live); color: var(--ink); padding: 6px 10px; cursor: pointer; font-size: .85rem; }
.pcols { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 14px; align-items: start; }
@media (max-width: 700px) { .pcols { grid-template-columns: minmax(0,1fr); } }
.pcols h4 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin: 0 0 6px; font-size: .85rem; }
.srow { display: grid; grid-template-columns: 26px minmax(0,1fr) 90px 38px; gap: 8px; align-items: center; width: 100%; text-align: left; background: var(--panel); color: var(--ink); border: 1px solid transparent; padding: 5px 8px; margin-bottom: 2px; cursor: pointer; font-size: .88rem; }
.srow:hover { border-color: var(--edge); }
.srow b { font-family: var(--display); font-weight: 800; color: var(--dim); text-align: center; }
.srow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.srow small { display: block; font-weight: 400; font-size: .7rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.srow.sel { border-color: var(--gold); background: rgba(255,207,63,.16); }
.srow.q { border-color: var(--live); }
.srow .en { display: block; height: 6px; background: rgba(255,255,255,.08); }
.srow .en u { display: block; height: 100%; text-decoration: none; background: var(--live); }
.srow .en.md u { background: var(--gold); } .srow .en.lo u { background: #ff9a7a; }
.srow em { font-style: normal; font-family: var(--display); font-weight: 700; text-align: right; font-size: .9rem; }
.pkeys { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.pbox .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pbox .lbl { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); width: 120px; font-size: .9rem; }
.pbox .opt { font-family: var(--display); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); background: var(--panel); border: 1px solid var(--edge); padding: 7px 14px; cursor: pointer; transform: skewX(-10deg); }
.pbox .opt[aria-pressed="true"] { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.pbox .ghost { align-self: flex-start; background: transparent; border: 1px solid var(--edge); color: var(--ink); padding: 8px 16px; cursor: pointer; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.final, .intro, .help { pointer-events: auto; }
.score .tm img { height: 22px; width: auto; vertical-align: middle; margin: 0 6px; }
.ibrand { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ibrand img { height: 64px; width: auto; }
.isheet h3 img { height: 30px; width: auto; vertical-align: middle; margin-right: 8px; }
.wind { position: absolute; top: 58px; left: 12px; display: flex; align-items: center; gap: 8px; background: rgba(11,21,48,.8); border: 1px solid var(--edge); padding: 4px 10px 4px 6px; font-family: var(--display); font-weight: 700; letter-spacing: .08em; font-size: .85rem; }
.wind i { display: inline-grid; place-items: center; width: 22px; height: 22px; font-style: normal; font-size: 1.1rem; color: var(--gold); transition: transform .2s; }
.wind.big { top: 50%; left: 18px; transform: translateY(-50%); font-size: 1.2rem; padding: 8px 14px 8px 10px; border-color: var(--gold); }
.wind.big i { width: 40px; height: 40px; font-size: 2rem; }
.srow[disabled] { opacity: .5; cursor: not-allowed; } .srow[disabled] em { grid-column: 3 / -1; text-align: right; color: #ff9a7a; font-style: normal; font-weight: 700; }
.pnav button small { display: block; font-family: var(--body); font-style: normal; font-weight: 400; font-size: .78rem; text-transform: none; color: var(--dim); margin-top: 2px; }
/* Prompt box: penalty options, and what to press for a kick for touch, a penalty goal or a conversion. */
.kbox { position: absolute; left: 16px; bottom: 16px; width: min(330px, calc(100% - 32px)); background: rgba(11,21,48,.92); border: 1px solid var(--edge); border-top: 4px solid var(--gold); padding: 10px 14px 12px; pointer-events: auto; }
.kbox.decide { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px)); }
.kbox h4 { margin: 0 0 4px; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1.05; }
.kbox > p { margin: 0 0 8px; color: var(--dim); font-size: .85rem; }
.kbox ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kbox li { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 10px; align-items: center; font-size: .92rem; }
.kbox li kbd { justify-self: start; }
.kopts { display: flex; flex-direction: column; gap: 6px; }
.kopts button { text-align: left; background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-left: 6px solid var(--edge); padding: 8px 12px; cursor: pointer; font: inherit; }
.kopts button b { display: block; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.kopts button small { display: block; color: var(--dim); font-size: .8rem; margin-top: 2px; }
.kopts button.on, .kopts button:hover { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(255,207,63,.2), var(--panel) 70%); }
.kfoot { margin: 8px 0 0 !important; font-size: .78rem !important; letter-spacing: .06em; text-transform: uppercase; }
.stam.follow { position: absolute; inset: 0; width: auto; display: block; }
.stam.follow div { position: absolute; left: 0; top: 0; width: 150px; padding: 2px 6px; font-size: .78rem; will-change: transform; }

/* ---------- Touch controls (phones and tablets) ---------- */
#touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; font-family: var(--display); }
#touch > *, #touch .tbtns > * { pointer-events: auto; }
#touch .tbtns { pointer-events: none; }
.tstick { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: min(34vh, 190px); height: min(34vh, 190px); touch-action: none; }
.tbase { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08) 0 55%, rgba(255,255,255,.16) 56% 100%); border: 2px solid rgba(255,255,255,.35); }
.tknob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.tbtns { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 330px; height: 290px; transform-origin: bottom right; }
.tb { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(11,21,48,.6); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .04em; display: grid; place-items: center; align-content: center; line-height: 1; padding: 0; touch-action: none; }
.tb[hidden] { display: none; }
.tb small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .08em; opacity: .8; }
.tb.on { background: rgba(255,207,63,.75); color: var(--navy); border-color: var(--gold); }
.tbig { right: 60px; bottom: 0; width: 112px; height: 112px; background: rgba(214,38,44,.72); font-size: 1.15rem; font-style: italic; }
.tpl { right: 184px; bottom: 6px; width: 76px; height: 76px; }
.tcl { right: 266px; bottom: 0; width: 64px; height: 64px; font-size: .9rem; }
.tpr { right: 0; bottom: 118px; width: 76px; height: 76px; }
.tcr { right: 6px; bottom: 202px; width: 64px; height: 64px; font-size: .9rem; }
.tsm { width: 56px; height: 56px; font-size: 1rem; }
.tf { right: 102px; bottom: 128px; }
.ttk { right: 92px; bottom: 124px; width: 84px; height: 84px; background: rgba(36,104,214,.85); border-color: rgba(255,255,255,.7); font-size: 1rem; }
@media (max-height: 400px) { .tbtns { transform: scale(.82); } .tstick { width: 150px; height: 150px; } }
.ttop { position: absolute; top: max(10px, env(safe-area-inset-top)); width: 52px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,.4); background: rgba(11,21,48,.7); color: #fff; font-family: var(--display); font-weight: 800; touch-action: none; }
.tpause { right: max(12px, env(safe-area-inset-right)); }
.tcam { right: calc(max(12px, env(safe-area-inset-right)) + 60px); }
.trot { display: none; }
@media (orientation: portrait) { #touch .trot { display: grid; place-items: center; position: fixed; inset: 0; background: rgba(11,21,48,.96); color: var(--gold); font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.8rem; text-transform: uppercase; text-align: center; padding: 24px; pointer-events: auto; } }

/* Small, short screens (a phone on its side): a smaller HUD that keeps clear of the thumbs. */
body.touchmode canvas, body.touchmode #hud, body.touchmode #menu { touch-action: manipulation; }
@media (max-height: 520px) {
  .score { transform: translateX(-50%) scale(.78); transform-origin: top center; }
  .kbox { left: auto; right: auto; left: 50%; top: 8px; bottom: auto; transform: translateX(-50%) scale(.82); transform-origin: top center; width: min(330px, 60vw); }
  .kbox.decide { top: 50%; transform: translate(-50%, -50%) scale(.85); }
  .wheel { transform: scale(.72); transform-origin: bottom center; bottom: 26vh; }
  .notice { top: 18%; } .notice b { font-size: 1.7rem; }
  .final { transform: translate(-50%, -50%) scale(.82); max-height: 118vh; overflow-y: auto; }
  .wind { transform: scale(.85); transform-origin: top left; }
  body.touchmode .stam:not(.follow) { right: auto; left: 50%; transform: translateX(-50%); bottom: 8px; }
  .menu { gap: 10px; } button.big { font-size: 1.3rem; padding: 8px 14px; }
}

/* Kicking wheel up on a touch screen: the side buttons are the kicks. */
#touch .tb.tkick { background: rgba(240, 200, 60, .85); color: #0b1530; font-weight: 800; font-size: .95rem; }

/* Two players: the hand-over screen after every change of possession. Tap anywhere to play on. */
.swap.hold { position: fixed; inset: 0; left: 0; bottom: 0; transform: none; z-index: 30; display: grid; place-items: center; background: rgba(6,12,30,.72); border: 0; padding: 0; pointer-events: auto; cursor: pointer; }
.swap.hold[hidden] { display: none; }
.swap.hold > div { background: rgba(11,21,48,.96); border: 4px solid var(--c); padding: 22px 34px 24px; max-width: 92vw; }
.swap.hold b { font-size: clamp(1.6rem, 6vw, 3rem); }
.swap.hold span { font-size: clamp(1.1rem, 3.4vw, 1.8rem); margin-top: 8px; }
.swap.hold small { font-size: clamp(.85rem, 2.2vw, 1.05rem); margin-top: 12px; }

/* Team sheets before kick-off: nothing else on the screen until they are gone. */
body.introup #hud > *:not(.intro) { visibility: hidden !important; }
body.introup #touch { display: none !important; }
.intro { cursor: pointer; }
/* Phones on their side: both sheets side by side, each list in two columns, so every name fits. */
@media (max-height: 520px) {
  .intro { justify-content: flex-start; gap: 6px; padding: 8px 12px; overflow-y: auto; }
  .intro .ibrand { display: none; }
  .ibar { padding: 3px 12px; } .ibar span { font-size: .62rem; } .ibar b { font-size: 1.05rem; }
  .isides { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 900px; gap: 10px; }
  .isheet { padding: 6px 10px 8px; border-top-width: 4px; }
  .isheet h3 { font-size: 1.05rem; } .isheet h3 img { height: 20px; }
  .isheet .irate { margin: 3px 0 4px; } .isheet .irate b { font-size: 1.1rem; padding: 0 6px; } .isheet .irate span { font-size: .62rem; }
  .isheet ol { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(7, auto); column-gap: 10px; }
  .isheet h6 + ol { grid-template-rows: repeat(2, auto); }
  .isheet li { font-size: .72rem; padding: 1px 0; grid-template-columns: 18px minmax(0,1fr); gap: 4px; }
  .isheet h6 { margin: 4px 0 1px; font-size: .6rem; }
  .ihint { font-size: .8rem; }
}
#touch .tf.tkick { font-size: .78rem; letter-spacing: 0; }

/* Full screen button: top left corner on phones, with the wind box moved down below it. */
.tfull { left: max(12px, env(safe-area-inset-left)); width: 46px; display: grid; place-items: center; padding: 0; }
.tfull .fs-out { display: none; } #touch.isfull .tfull .fs-in { display: none; } #touch.isfull .tfull .fs-out { display: inline; }
body.touchmode .wind:not(.big) { top: calc(max(10px, env(safe-area-inset-top)) + 50px); left: max(12px, env(safe-area-inset-left)); }
.tios { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(6,12,30,.75); pointer-events: auto; }
.tios[hidden] { display: none; }
.tios > div { background: var(--navy); border: 1px solid var(--edge); border-top: 4px solid var(--gold); padding: 16px 20px; max-width: min(460px, 88vw); font-family: var(--body); }
.tios b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; margin-bottom: 6px; }
.tios p { margin: 0 0 12px; font-size: .95rem; line-height: 1.4; } .tios em { font-style: normal; font-weight: 700; color: var(--gold); }
.tios button { background: var(--gold); color: var(--navy); border: 0; font-family: var(--display); font-weight: 800; padding: 8px 22px; font-size: 1rem; cursor: pointer; }
/* Player tag on a phone (Bottom corner setting): bottom centre of the screen. */
body.touchmode .stam:not(.follow) { right: auto; left: 50%; transform: translateX(-50%); bottom: 8px; }
.tfull[hidden] { display: none; }
#hud-roles { display: none !important; }
body.sideways #touch .trot { display: none !important; }
/* The kick (or wheel option) picked right now, and one under a sliding finger. */
#touch .tb.tkick.picked, #touch .tb.tkick.on { background: #ffffff; color: #0b1530; border: 3px solid #d6262c; transform: scale(1.1); }

/* Interchange menu: an injured man on the field gets the red cross next to his name. */
.srow .injx { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; border-radius: 50%; background: #fff;
  background-image: linear-gradient(#d6262c, #d6262c), linear-gradient(#d6262c, #d6262c); background-size: 4px 12px, 12px 4px; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.srow.hurt { border-color: #d6262c !important; }
.srow.hurt small { color: #ff8a8a !important; }

/* Interchange menu: yellow cards (sin bin, with the time left) and red cards (sent off). */
.pcards { margin-top: 12px; }
.pcards h4, .pcards h5 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin: 0 0 6px; font-size: .85rem; }
.pcards h5 { color: var(--dim); margin-top: 8px; font-size: .75rem; }
.srow.card { grid-template-columns: 26px minmax(0,1fr) 64px; cursor: default; border-color: #f2c200; }
.srow.card.red { border-color: #d6262c; }
.srow.card span { white-space: normal; }
.srow.card em { font-style: normal; font-weight: 800; text-align: right; color: #f2c200; }
.srow.card.red em { color: #ff6a6a; }
.pcard { display: inline-block; width: 13px; height: 18px; margin-right: 7px; vertical-align: -3px; border-radius: 2px; transform: rotate(-8deg); box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.pcard.y { background: #f2c200; }
.pcard.r { background: #d6262c; }
/* The SIN BIN and SENT OFF banners carry the card too. */
.notice.cardy b::before, .notice.cardr b::before { content: ""; display: inline-block; width: .55em; height: .78em; margin-right: .3em; vertical-align: -.05em; border-radius: 3px; transform: rotate(-8deg); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.notice.cardy b::before { background: #f2c200; box-shadow: 0 0 0 2px var(--navy); }
.notice.cardr b::before { background: #d6262c; }

.ivenue { text-align: center; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--dim, #9fb0cc); margin: 4px 0 8px; font-size: .95rem; }
.ivenue b { color: var(--ink, #fff); font-weight: 800; }
.ivenue small { display: block; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: .8rem; opacity: .8; }

/* ---- cutscenes: the lower-third caption, the rest of the HUD out of the way ---- */
#hud.incut > :not(#cutcap):not(.biff) { visibility: hidden; }
.cutcap { position: absolute; left: 4%; bottom: 9%; display: flex; flex-direction: column; gap: 2px; padding: 10px 18px 10px 14px; background: linear-gradient(90deg, rgba(11,21,48,.92), rgba(11,21,48,.7)); border-left: 4px solid var(--gold); color: var(--ink); font-family: var(--display); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; max-width: min(560px, 80vw); }
.cutcap b { font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; line-height: 1.05; }
.cutcap .skip { position: absolute; right: -2px; bottom: -22px; font-size: .7rem; letter-spacing: .14em; opacity: .7; font-family: var(--body, inherit); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { .cutcap b { font-size: 1.15rem; } .cutcap { font-size: .8rem; } }
/* BIFF: the fight. Health bars top left and top right, the banner, and the BIFF and BLOCK buttons. */
#hud.biffing > :not(.biff):not(#cutcap) { visibility: hidden; }
.biff { position: absolute; inset: 0; pointer-events: none; font-family: var(--display); color: #fff; }
.bf-bars { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: flex-start; gap: 12px; }
.bf-bar { flex: 1; max-width: 44%; display: flex; flex-direction: column; gap: 4px; }
.bf-bar.r { margin-left: auto; align-items: flex-end; }
.bf-who { display: flex; align-items: baseline; gap: 10px; text-transform: uppercase; text-shadow: 0 2px 3px #000; }
.bf-bar.r .bf-who { flex-direction: row-reverse; }
.bf-who b { font-size: 1.35rem; font-weight: 800; font-style: italic; letter-spacing: .02em; }
.bf-who i { font-style: normal; font-size: .85rem; letter-spacing: .14em; color: var(--gold); }
.bf-hp { position: relative; width: 100%; height: 22px; background: #2a0606; border: 3px solid #f2d36b; box-shadow: 0 0 0 2px #000, 0 4px 10px rgba(0,0,0,.6); transform: skewX(-18deg); overflow: hidden; }
.bf-bar.r .bf-hp { transform: skewX(18deg); }
.bf-hp span { position: absolute; top: 0; bottom: 0; left: 0; }
.bf-bar.r .bf-hp span { left: auto; right: 0; }
.bf-lag { background: #e8e8e8; transition: width .25s linear; }
.bf-fill { background: linear-gradient(180deg, #ffe45c, #f5b300 55%, #d98e00); }
.bf-bar.low .bf-fill { background: linear-gradient(180deg, #ff6a4d, #e3241b 55%, #a8120c); }
.bf-bar.hit .bf-hp { border-color: #fff; }
.bf-bar.blk .bf-hp { border-color: #6fd0ff; }
.bf-vs { align-self: center; margin-top: 18px; font-size: 1.6rem; font-weight: 800; font-style: italic; color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.8); }
.bf-big { position: absolute; top: 24%; left: 0; right: 0; text-align: center; font-size: clamp(3rem, 11vw, 7.5rem); font-weight: 800; font-style: italic; letter-spacing: .02em; color: #ffd23a;
  text-shadow: 0 4px 0 #b3200f, 0 8px 0 #000, 0 0 30px rgba(255,120,0,.65); -webkit-text-stroke: 2px #2a0a00; }
.bf-big.pop { animation: bfpop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes bfpop { from { transform: scale(2.2) rotate(-6deg); } to { transform: none; } }
.biff.fighting .bf-big { top: 30%; }
.bf-tip { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); max-width: min(720px, 90vw); text-align: center; background: rgba(11,21,48,.85); border-left: 4px solid var(--gold); padding: 8px 16px; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; }
.bf-tip:empty { display: none; }
.bf-btns { position: absolute; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: auto; }
.bf-btns button { font-family: var(--display); font-weight: 800; font-style: italic; color: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.bf-btns small { font-size: .62rem; font-style: normal; letter-spacing: .12em; opacity: .85; margin-top: 2px; }
.bf-biff { width: 118px; height: 118px; font-size: 1.9rem; background: radial-gradient(circle at 35% 30%, #ffb347, #f26a0a 60%, #a33a00); border: 4px solid #ffe08a; box-shadow: 0 6px 0 #5a1f00, 0 10px 20px rgba(0,0,0,.5); }
.bf-biff.flash { animation: bfflash .45s ease-in-out infinite alternate; }
@keyframes bfflash { from { box-shadow: 0 6px 0 #5a1f00, 0 0 0 0 rgba(255,200,60,.9); transform: scale(1); } to { box-shadow: 0 6px 0 #5a1f00, 0 0 0 16px rgba(255,200,60,0); transform: scale(1.08); } }
.bf-biff.on { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 #5a1f00; }
.bf-block { width: 92px; height: 92px; font-size: 1.15rem; background: radial-gradient(circle at 35% 30%, #ff6b6b, #d1121b 60%, #7a0007); border: 4px solid #ffb3b3; animation: bfglow 1.1s ease-in-out infinite alternate; }
@keyframes bfglow { from { box-shadow: 0 5px 0 #4a0004, 0 0 8px 2px rgba(255,40,40,.55); } to { box-shadow: 0 5px 0 #4a0004, 0 0 22px 8px rgba(255,40,40,.9); } }
.bf-block.on, .bf-block.held { transform: translateY(4px) scale(.96); background: radial-gradient(circle at 35% 30%, #ff9a9a, #ff2a2a 60%, #a3000a); }
@media (max-width: 640px) {
  .bf-who b { font-size: 1rem; } .bf-who i { font-size: .7rem; } .bf-hp { height: 16px; }
  .bf-biff { width: 96px; height: 96px; font-size: 1.5rem; } .bf-block { width: 76px; height: 76px; font-size: .95rem; }
  .bf-tip { font-size: .8rem; bottom: 6%; max-width: 60vw; left: 8px; transform: none; text-align: left; }
}
.biff[hidden], .bf-bars[hidden], .bf-btns[hidden], .bf-btns button[hidden] { display: none; }