/* ==========================================================================
   ESA ARCADE - Head Soccer screens (js/hs/hs-arcade.js)
   The supplied UI kit's language (/a/f4e19536e82c/Head-Soccer/UI/menus/*): stadium background, centred ESA crest, navy
   #0B1932 panels with a #D6AA58 border and a #F4D89B inner rule, #553A12 / #FFE4A3 primary. The native CSS frames use the SVGs'
   own values so rounded corners are not stretched (allowed by solo-ui-layout.json rendering.borders). Three independent
   layouts: desktop, portrait phone (@media orientation portrait + narrow), landscape phone (@media max-height).
   ========================================================================== */
.hs-screen { display: none; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: max(8px, env(safe-area-inset-bottom)); background: linear-gradient(var(--x-050e20-a62), var(--x-050e20-a74)), url("/a/f4e19536e82c/Head-Soccer/UI/menus/runtime/menu-background.webp") center bottom / cover no-repeat, var(--navy-850); }
.hs-screen.is-active { display: flex; }
.hs-screen.has-topbar { padding-top: clamp(52px, 8vh, 66px); }
.hs-inner { width: min(1320px, 100%); height: 100%; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(4px, 1.2vh, 12px); }
.hs-head { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.hs-logo { height: clamp(40px, 8vh, 72px); width: auto; flex: none; }
.hs-title { font-family: var(--font-display); font-size: clamp(24px, 5vmin, 44px); letter-spacing: .08em; margin: 0; color: var(--gold-300); text-transform: uppercase; text-shadow: 0 2px 0 var(--x-1a1204); }
.hs-sub { margin: 0; color: var(--x-d6e0ec); font-size: clamp(12px, 2vmin, 15px); }
.hs-sub:empty { display: none; }
.hs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px; color: var(--cream); font-size: clamp(13px, 2.2vmin, 17px); line-height: 1.35; display: flex; flex-direction: column; gap: 8px; }
.hs-body h3 { color: var(--gold-300); margin: 0 0 4px; font-size: clamp(15px, 2.8vmin, 21px); }
.hs-body p { margin: 3px 0; }
.hs-foot { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; padding-top: 4px; }
.hs-foot:empty { display: none; }
.hs-note, .hs-access { color: var(--x-b9c7d8); font-size: .9em; }
.hs-center { text-align: center; }
.hs-notice { background: var(--x-781e18-a82); border: 1px solid var(--danger); border-radius: 8px; padding: 6px 10px; color: var(--x-ffe1dd); margin: 0; }
.hs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hs-seg { justify-content: center; }
.hs-seg-l { color: var(--x-d6e0ec); font-size: .85em; }
/* kit atoms */
.hsk-panel { background: var(--x-0b1932); border: 3px solid var(--x-d6aa58); border-radius: 16px; box-shadow: inset 0 0 0 3px var(--x-0b1932), inset 0 0 0 4px var(--x-f4d89b-a65); padding: 10px 14px; color: var(--x-fff3d9); }
.hsk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 150px; padding: 6px 22px; background: var(--x-10213b); border: 2px solid var(--x-d6aa58); border-radius: 13px; box-shadow: inset 0 0 0 4px var(--x-10213b), inset 0 0 0 5px var(--x-f4d89b-a55); color: var(--x-fff3d9); font: 800 clamp(14px, 2.4vmin, 18px) var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.hsk-btn img { width: 20px; height: 20px; }
.hsk-btn.is-primary { background: var(--x-553a12); border-color: var(--x-ffe4a3); box-shadow: inset 0 0 0 4px var(--x-553a12), inset 0 0 0 5px var(--x-f4d89b-a75); color: var(--x-fff6dc); min-width: 240px; }
.hsk-btn:hover:not(:disabled), .hsk-btn:focus-visible { filter: brightness(1.25); outline: none; box-shadow: inset 0 0 0 4px transparent, 0 0 12px var(--x-ffe4a3-a60); }
.hsk-btn:disabled { opacity: .45; cursor: default; }
.hs-chip { min-height: 42px; padding: 5px 14px; border-radius: 10px; border: 2px solid var(--x-8a6f3a); background: var(--x-10213b); color: var(--x-fff3d9); font: inherit; font-weight: 700; cursor: pointer; }
.hs-chip.is-on { border-color: var(--x-ffe4a3); background: var(--x-553a12); color: var(--x-fff6dc); }
.hs-chip:focus-visible, .hsk-art-card:focus-visible, .hsk-mode:focus-visible, .hsk-tile:focus-visible, .hsk-stg:focus-visible, .hsk-fmt-sum:focus-visible, .hsk-set-row:focus-visible { outline: 3px solid var(--x-ffe4a3); outline-offset: 2px; }
.hs-face { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid var(--cc, var(--x-d6aa58)); background: var(--x-0b1932); }
.hs-face img { width: 100%; height: 100%; object-fit: contain; }
.hs-rand { font: 700 28px var(--font-display); color: var(--x-ffe4a3); }
.hs-rand.is-big { width: 40%; height: auto; aspect-ratio: 1; font-size: 56px; position: absolute; left: 30%; bottom: 26%; }
/* real idle frames: the box is one body height; feet at its bottom edge */
.hsk-idle { position: absolute; left: 50%; bottom: 12%; height: 80%; width: 0; }
.hsk-idle img { position: absolute; left: 0; visibility: hidden; max-width: none; width: auto; }
.hsk-idle img.is-on { visibility: visible; }
.hsk-stage { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.hsk-spot { position: relative; flex: 1; min-height: 120px; }
.hsk-platform { position: absolute; left: 50%; bottom: 0; width: min(92%, 420px); height: auto; transform: translateX(-50%); }
.hsk-spot .hsk-idle { bottom: clamp(16px, 4.2vmin, 36px); height: calc(100% - clamp(24px, 6vmin, 50px)); }
.hsk-tag { align-self: center; padding: 1px 12px; border-radius: 0 0 10px 10px; background: var(--x-33cdeb); color: var(--x-06223a); font: 800 12px var(--font-display); letter-spacing: .06em; text-transform: uppercase; z-index: 1; }
.is-p2 .hsk-tag { background: var(--x-ff8c86); }
/* hub */
.hsk-hub { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6vw, 18px); }
.hsk-hub.is-three { grid-template-columns: repeat(3, 1fr); }
.hsk-art-card { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 4px solid var(--x-bd9149); border-radius: 25px; background: var(--x-0b1932); color: var(--x-fff3d9); font: inherit; text-align: left; cursor: pointer; transition: transform .12s, border-color .12s; }
.hsk-art-card:hover, .hsk-art-card:focus-visible { border-color: var(--x-ffdb83); transform: translateY(-2px); }
.hsk-art-img { flex: 1; min-height: 0; display: block; overflow: hidden; background: radial-gradient(circle at 50% 45%, var(--navy-400), var(--navy-800)); }
.hsk-art-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-trophy .hsk-art-img img { object-fit: contain; padding: 4%; box-sizing: border-box; }
.hsk-art-txt { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 8px 48px 10px 16px; }
.hsk-art-txt b { font: 800 clamp(20px, 4.2vmin, 34px) var(--font-display); color: var(--x-ffe4a3); letter-spacing: .04em; text-transform: uppercase; }
.hsk-art-txt > span { color: var(--x-d6e0ec); font-size: .95em; }
.hsk-enter { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; }
/* format */
.hsk-modes { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vw, 18px); }
.hsk-mode { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 4px solid var(--x-bd9149); border-radius: 25px; background: var(--x-0b1932); color: var(--x-fff3d9); font: inherit; text-align: center; cursor: pointer; }
.hsk-mode.is-sel, .hsk-mode:hover, .hsk-mode:focus-visible { border-color: var(--x-ffdb83); box-shadow: 0 0 18px var(--x-ffdb83-a45); }
.hsk-mode-art { flex: 1; min-height: 0; display: block; }
.hsk-mode-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hsk-mode-txt { flex: none; display: flex; flex-direction: column; padding: 8px 12px 12px; gap: 1px; }
.hsk-mode-txt b { font: 800 clamp(20px, 3.8vmin, 32px) var(--font-display); color: var(--x-ffe4a3); text-transform: uppercase; }
/* setup */
.hsk-setup { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr) minmax(0, 1fr); gap: clamp(8px, 1.4vw, 16px); align-items: stretch; }
.hsk-setup.is-cup { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hsk-side { min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 0 10px 10px; gap: 4px; overflow: hidden; }
.hsk-side .hsk-stage { flex: 1; width: 100%; }
.hsk-side-n { font: 800 clamp(20px, 3.6vmin, 30px) var(--font-display); color: var(--x-fff3d9); letter-spacing: .05em; text-transform: uppercase; }
.hsk-side .hsk-btn { min-height: 40px; min-width: 0; }
.hsk-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; text-align: center; }
.hs-vs { font: 800 clamp(24px, 5vmin, 44px) var(--font-display); color: var(--x-ffe4a3); text-shadow: 0 2px 0 var(--x-1a1204); }
.hsk-fmt-sum { display: flex; flex-direction: column; width: 100%; max-width: 340px; padding: 0; border: 3px solid var(--x-d6aa58); border-radius: 16px; overflow: hidden; background: var(--x-0b1932); color: var(--x-fff3d9); font: inherit; cursor: pointer; text-align: center; }
.hsk-fmt-sum img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.hsk-fmt-sum span { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.hsk-fmt-sum small { color: var(--x-b9c7d8); } .hsk-fmt-sum b { font: 800 clamp(18px, 3vmin, 24px) var(--font-display); color: var(--x-ffe4a3); text-transform: uppercase; }
.hsk-fmt-sum em { font-style: normal; font-size: .85em; color: var(--x-d6e0ec); } .hsk-fmt-sum u { color: var(--x-ffe4a3); font-size: .85em; }
/* picker */
.hsk-pick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.hsk-pick-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 12px; align-items: stretch; }
.hsk-pick-info { overflow-y: auto; align-self: center; max-height: 100%; }
.hsk-pick-info h3 { font: 800 clamp(24px, 4.6vmin, 40px) var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.hsk-pick-info b { color: var(--x-ffe4a3); }
.hsk-pick-info .hsk-btn { min-height: 40px; margin-top: 4px; }
.hsk-locked { display: flex; gap: 10px; padding: 6px 8px; margin-bottom: 6px; border: 1px solid var(--x-d6aa58); border-radius: 10px; background: var(--x-061225); }
.hsk-locked > img { width: 28px; height: 28px; flex: none; }
.hsk-locked > div { flex: 1; min-width: 0; }
.hsk-locked small { color: var(--x-d6e0ec); }
.hsk-tray { flex: none; position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--x-09172f); border: 3px solid var(--x-d6aa58); border-radius: 20px; }
.hsk-tray-a { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } .hsk-tray-a img { width: 100%; height: 100%; } .hsk-tray-a:disabled { opacity: .3; } .hsk-tray-a[hidden] { display: none; }
.hsk-tray-list { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; position: relative; }
.hsk-tray-list::-webkit-scrollbar { display: none; }
.hsk-tile { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; border: 0; color: var(--x-fff3d9); font: inherit; cursor: pointer; scroll-snap-align: center; }
.hsk-tile-f { position: relative; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--x-d6aa58); border-radius: 15px; background: var(--x-0b1932); overflow: hidden; }
.hsk-tile-f > img:first-child { width: 100%; height: 100%; object-fit: contain; }
.hsk-tile.is-locked .hsk-tile-f > img:first-child { filter: grayscale(1) brightness(.5); }
.hsk-tile .hsk-lock { position: absolute; width: 30px; height: 30px; left: calc(50% - 15px); top: calc(50% - 15px); }
.hsk-tile .hsk-sel { position: absolute; inset: 0; width: 100%; height: 100%; }
.hsk-tile.is-sel .hsk-tile-f { border-color: transparent; }
.hsk-tile-n { font-size: 13px; font-weight: 700; }
.hsk-tile.is-sel .hsk-tile-n { color: var(--x-33cdeb); }
.hsk-track { position: relative; height: 24px; margin: 4px 0; background: var(--x-061225); border: 2px solid var(--x-d6aa58); border-radius: 13px; overflow: hidden; }
.hsk-track i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(var(--gold-400), var(--gold-700)); }
.hsk-track span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--x-ffffff); text-shadow: 0 1px 2px var(--x-000000); white-space: nowrap; }
/* ladder */
.hsk-ladder { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.hsk-ladder-top { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(170px, .75fr) minmax(0, 1.5fr) minmax(220px, 1fr); gap: 10px; align-items: stretch; }
.hsk-showcase { min-height: 0; }
.hsk-status { align-self: center; } .hsk-status small { color: var(--x-d6e0ec); }
.hs-pips { display: inline-flex; gap: 2px; vertical-align: middle; } .hs-pips i { width: 7px; height: 14px; background: var(--navy-400); border-radius: 1px; } .hs-pips i.on { background: var(--gold-400); }
.hsk-strip { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; background: var(--x-0b1932); border: 3px solid var(--x-d6aa58); border-radius: 18px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; position: relative; }
.hsk-stg { flex: 1 0 92px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px; background: var(--x-0b1932); border: 2px solid var(--x-8a6f3a); border-radius: 12px; color: var(--x-fff3d9); font: inherit; font-size: 12px; cursor: pointer; }
.hsk-stg-n { position: absolute; left: 4px; top: 2px; font: 800 13px var(--font-display); font-style: normal; color: var(--x-ffe4a3); }
.hsk-stg-f { width: 54px; height: 54px; overflow: hidden; border-radius: 50%; } .hsk-stg-f img { width: 100%; height: 100%; object-fit: contain; }
.hsk-stg em { font-style: normal; color: var(--x-ffe4a3); font-weight: 800; }
.hsk-stg.is-up .hsk-stg-f { opacity: .55; filter: grayscale(.6); }
.hsk-stg.is-won { background: var(--x-123a2a); }
.hsk-stg.is-cur { border-color: var(--x-33cdeb); }
.hsk-stg.is-sel { border-color: var(--x-ffe4a3); box-shadow: 0 0 0 1px var(--x-d6aa58), 0 0 10px var(--x-ffe4a3-a55); }
.hsk-done { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; } .hsk-done .hsk-stage { height: 100%; }
/* challenge cards */
.hsk-cards { flex: 1; min-height: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
.hsk-ccard { flex: 0 0 clamp(210px, 26vw, 280px); min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 12px 10px; background: var(--x-0b1932); border: 3px solid var(--x-d6aa58); border-radius: 16px; box-shadow: inset 0 0 0 3px var(--x-0b1932), inset 0 0 0 4px var(--x-f4d89b-a55); scroll-snap-align: center; overflow-y: auto; }
.hsk-ccard h3 { margin: 0; font: 800 clamp(18px, 3.4vmin, 26px) var(--font-display); letter-spacing: .05em; text-transform: uppercase; } .hsk-cs { color: var(--x-ffe4a3); }
.hsk-cart { position: relative; flex: 1 0 120px; width: 100%; min-height: 120px; }
.hsk-cart .hsk-idle { bottom: 4px; height: calc(100% - 8px); }
.hsk-ccard.is-locked .hsk-idle { filter: grayscale(1) brightness(.5); }
.hsk-cart .hsk-lock { position: absolute; left: calc(50% - 22px); top: calc(50% - 22px); width: 44px; height: 44px; }
.hsk-cst { display: inline-flex; gap: 4px; align-items: center; color: var(--x-ffe4a3); } .hsk-cst img { width: 18px; height: 18px; }
.hsk-ccard p { font-size: .9em; } .hsk-ccard small { color: var(--x-d6e0ec); font-size: .78em; } .hsk-ccard .hsk-track { width: 100%; flex: none; } .hsk-ccard .hsk-btn { min-height: 38px; min-width: 0; margin-top: 4px; font-size: 13px; flex: none; }
/* cups */
.hs-cups { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vw, 16px); }
.hs-cup { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 22px; background: var(--x-0b1932); border: 4px solid var(--x-d6aa58); text-align: center; overflow-y: auto; }
.hs-cup-conference { border-color: var(--x-2fa35f); background: linear-gradient(var(--x-0f3424), var(--x-0b1932) 55%); } .hs-cup-europa { border-color: var(--x-f07a22); background: linear-gradient(var(--x-3a230d), var(--x-0b1932) 55%); } .hs-cup-champions { border-color: var(--x-3f73e0); background: linear-gradient(var(--x-142c63), var(--x-0b1932) 55%); }
.hs-cup .hs-trophy { flex: 1 1 auto; min-height: 90px; height: 0; }
.hs-cup.is-locked .hs-trophy { filter: grayscale(.85) brightness(.7); }
.hs-cup h3 { margin: 4px 0 0; font: 800 clamp(18px, 3.2vmin, 26px) var(--font-display); text-transform: uppercase; }
.hs-cup-a { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; } .hs-cup-a .hsk-btn { min-height: 44px; min-width: 130px; padding: 4px 12px; }
.hs-trophy { object-fit: contain; width: auto; max-width: 100%; display: block; } .hs-trophy.is-big { height: 100%; margin: 0 auto; }
.hsk-cup-rules { display: flex; flex-direction: column; justify-content: center; overflow-y: auto; } .hsk-cup-rules .hs-trophy { height: clamp(80px, 24vh, 220px); align-self: center; } .hsk-cup-rules b { color: var(--x-ffe4a3); }
.is-fixture .hsk-stage { min-height: 0; } .is-fixture .hs-trophy { height: clamp(60px, 18vh, 170px); }
/* bracket */
.hsb-tree { position: relative; flex: 1; min-height: 340px; background: var(--x-0b1932-a88); border: 3px solid var(--x-d6aa58); border-radius: 18px; overflow: hidden; }
.hsb-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hsb-lines path { fill: none; stroke: var(--x-6d7f99); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.hsb-lines path.is-adv { stroke: var(--x-d6aa58); } .hsb-lines path.is-me { stroke: var(--x-33cdeb); stroke-width: 4; } .hsb-lines path.is-third { stroke-dasharray: 6 5; }
.hsb-node { position: absolute; transform: translate(-50%, -50%); width: clamp(104px, 13vw, 158px); height: clamp(40px, 7.4vh, 60px); display: flex; align-items: center; gap: 5px; padding: 2px 6px 2px 3px; background: var(--x-10213b); border: 2px solid var(--x-d6aa58); border-radius: 12px; color: var(--x-fff3d9); font-size: clamp(12px, 1.9vmin, 15px); }
.hsb-node i { flex: 1; font-style: normal; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hsb-node b { color: var(--x-ffe4a3); font: 800 1.3em var(--font-display); }
.hs-face.b { width: clamp(30px, 6vh, 50px); height: clamp(30px, 6vh, 50px); } .hs-face.is-q { color: var(--x-6d7f99); border-color: var(--x-6d7f99); font-weight: 800; }
.hsb-node.is-tbd { background: var(--x-0b1932); border: 2px dashed var(--x-6d7f99); } .hsb-node.is-out { opacity: .55; } .hsb-node.is-win { background: var(--x-1a3a2c); }
.hsb-node.is-me { border-color: var(--x-33cdeb); box-shadow: 0 0 10px var(--x-33cdeb-a65); } .hsb-node.is-me i { color: var(--x-33cdeb); }
.hsb-node.is-third { border-style: dashed; }
.hsb-node.is-reveal { animation: hsb-in .3s both; } .hsb-node.is-new { animation: hsb-new .7s both; }
@keyframes hsb-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } } @keyframes hsb-new { from { opacity: 0; filter: brightness(2); } }
.hsb-champ { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; width: clamp(80px, 10vw, 130px); color: var(--x-ffe4a3); font-weight: 800; text-align: center; } .hsb-champ .hs-trophy { height: clamp(70px, 20vh, 170px); } .hsb-champ i { font-style: normal; font-size: .85em; } .hsb-champ:not(.is-set) .hs-trophy { filter: grayscale(.5) brightness(.7); }
.hsb-tl { position: absolute; transform: translate(-50%, -50%); color: var(--x-b9c7d8); font-size: 12px; font-weight: 700; text-transform: uppercase; background: var(--x-0b1932); padding: 0 4px; }
.hsb-skip { position: absolute; right: 22px; bottom: 74px; min-height: 40px; min-width: 0; z-index: 3; }
.hsb-tree.is-tall .hsb-node { flex-direction: column; justify-content: center; gap: 0; width: 23.5%; height: 11.5%; min-height: 58px; padding: 1px; font-size: 11px; text-align: center; }
.hsb-tree.is-tall .hsb-node i { flex: none; width: 100%; } .hsb-tree.is-tall .hsb-node b { position: absolute; right: 3px; top: 0; font-size: 14px; }
.hsb-tree.is-tall .hs-face.b { width: 32px; height: 32px; } .hsb-tree.is-tall .hsb-champ .hs-trophy { height: 74px; } .hsb-tree.is-tall .hsb-tl { font-size: 10px; }
/* podium */
.hsk-podium { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: clamp(8px, 2vw, 24px); }
.hsk-pod-t { flex: 0 1 34%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--x-ffe4a3); text-align: center; } .hsk-pod-t .hs-trophy { flex: 1; min-height: 0; height: 0; }
.hs-podium { flex: 1; max-width: 720px; display: flex; justify-content: center; align-items: flex-end; gap: 8px; min-height: 0; }
.hs-pod { flex: 1; height: 72%; display: flex; flex-direction: column; min-width: 0; } .hs-pod.p1 { height: 100%; } .hs-pod.p2 { height: 84%; }
.hs-pod-a { position: relative; flex: 1; min-height: 0; } .hs-pod-a .hsk-idle { bottom: 2px; height: calc(100% - 4px); max-height: none; }
.hs-pod-s { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; background: var(--x-10213b); border: 3px solid var(--x-d6aa58); border-radius: 12px 12px 0 0; } .hs-pod.p1 .hs-pod-s { background: var(--x-553a12); border-color: var(--x-ffe4a3); padding-bottom: 22px; } .hs-pod.p2 .hs-pod-s { padding-bottom: 12px; } .hs-pod-s small { color: var(--x-d6e0ec); }
/* stats + settings */
.hs-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.hs-stats-row span { background: var(--x-10213b); border-radius: 10px; padding: 5px; display: flex; flex-direction: column; align-items: center; text-align: center; } .hs-stats-row small { color: var(--x-b9c7d8); font-size: .8em; } .hs-stats-row b { font-size: 1.25em; color: var(--x-ffe4a3); }
.hs-tabs { flex: none; position: sticky; top: 0; z-index: 2; background: var(--x-05101f-a90); border-radius: 12px; padding: 4px; }
.hsk-statc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 6px; } .hsk-statc-r { display: flex; gap: 10px; align-items: center; padding: 5px 10px; } .hsk-statc-r > div { display: flex; flex-direction: column; } .hsk-statc-r small { color: var(--x-d6e0ec); }
.hsk-help { max-width: 860px; margin: 0 auto; }
.hsk-settings { width: min(680px, 100%); margin: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--x-0b1932); border: 4px solid var(--x-d6aa58); border-radius: 22px; }
.hsk-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 8px 16px; background: var(--x-10213b); border: 2px solid var(--x-d6aa58); border-radius: 14px; color: var(--x-fff3d9); font: inherit; text-align: left; cursor: pointer; } .hsk-set-row span { display: flex; flex-direction: column; } .hsk-set-row b { font-size: 1.2em; } .hsk-set-row small { color: var(--x-b9c7d8); } .hsk-set-row img { width: 96px; flex: none; }
/* modal sheets */
.modal-card.hsk-sheet { width: min(500px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow-y: auto; background: var(--x-0b1932); border: 4px solid var(--x-d6aa58); border-radius: 24px; box-shadow: inset 0 0 0 3px var(--x-0b1932), inset 0 0 0 4px var(--x-f4d89b-a65), 0 20px 60px var(--x-000000-a70); color: var(--x-fff3d9); padding: 14px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.hsk-sheet h2 { margin: 0; font: 800 clamp(22px, 4.4vmin, 32px) var(--font-display); color: var(--x-ffe4a3); text-transform: uppercase; letter-spacing: .05em; }
.hsk-sheet p { margin: 2px 0; color: var(--x-e9eefb); } .hsk-sheet .hsk-btn { min-width: 150px; } .hsk-sheet .hs-logo { height: 64px; }
.hsk-unlock-art { position: relative; width: 100%; flex: none; height: clamp(150px, 38vh, 300px); overflow: hidden; }
.hsk-rays { position: absolute; left: 50%; top: 50%; height: 130%; transform: translate(-50%, -50%); max-width: none; }
.hsk-unlock-art .hsk-idle { bottom: 8px; height: calc(100% - 20px); }
.hsk-unlock-n { font: 800 clamp(24px, 5vmin, 38px) var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .hsk-unlock-s { color: var(--x-ffe4a3); }
.modal-card.hsk-preview { width: min(760px, calc(100vw - 20px)); }
.hsk-preview-win { display: flex; gap: 8px; justify-content: center; width: 100%; padding: 8px; background: var(--x-09172f); border: 2px solid var(--x-d6aa58); border-radius: 12px; } .hsk-preview-win img { flex: 1 1 0; min-width: 0; max-height: 42vh; object-fit: contain; }
/* participant screen row */
#psHsRow { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; color: var(--cream); margin: 4px 0; }
#psHsRow .hs-chip { min-height: 34px; padding: 3px 10px; font-size: 13px; }
#psHsRow .hs-notice { flex-basis: 100%; margin: 0; text-align: center; font-size: 12px; padding: 3px 8px; }
.hs-mode-link { display: flex; justify-content: center; margin: 8px 0 2px; }
/* match screen */
.hs-play { position: fixed; inset: 0; padding: 0; background: var(--x-000000); z-index: 3; }
.hs-play .hs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.hs-safe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; padding: max(env(safe-area-inset-top, 0px), var(--fake-sa-t, 0px)) max(env(safe-area-inset-right, 0px), var(--fake-sa-r, 0px)) max(env(safe-area-inset-bottom, 0px), var(--fake-sa-b, 0px)) max(env(safe-area-inset-left, 0px), var(--fake-sa-l, 0px)); }
.hs-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(var(--x-050e20-a70), var(--x-050e20-a80)), url("/a/f4e19536e82c/Head-Soccer/UI/menus/runtime/menu-background.webp") center / cover; padding: 16px; }
.hs-loading[hidden], .hs-load-btns[hidden] { display: none; }
.hs-load-card { width: min(460px, 100%); padding: 16px; background: var(--x-0b1932); border: 4px solid var(--x-d6aa58); border-radius: 18px; color: var(--x-fff3d9); text-align: center; }
.hs-load-t { margin: 0 0 8px; color: var(--x-ffe4a3); }
.hs-load-bar { height: 12px; border-radius: 6px; background: var(--x-061225); border: 1px solid var(--x-d6aa58); overflow: hidden; } .hs-load-bar i { display: block; height: 100%; width: 0; background: var(--gold-400); transition: width .12s; }
.hs-load-d { margin: 8px 0 0; color: var(--x-d6e0ec); font-size: 13px; } .hs-load-e { color: var(--x-ffb4a8); font-size: 12px; word-break: break-word; margin: 4px 0; }
.hs-load-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
body[data-state="hsPlay"] #bezel, body[data-state="hsPlay"] #topbar { display: none; }
body[data-state="hsPlay"] { overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }

/* ------------------- PORTRAIT PHONE */
@media (max-width: 640px) and (orientation: portrait) {
  .hs-logo { height: 40px; } .hs-title { font-size: 24px; letter-spacing: .05em; }
  .hsk-hub, .hsk-hub.is-three, .hsk-modes, .hs-cups { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); }
  .hsk-mode { flex-direction: row; text-align: left; } .hsk-mode-art { flex: 0 0 46%; } .hsk-mode-txt { flex: 1; justify-content: center; padding-right: 40px; }
  .hsk-setup, .hsk-setup.is-fixture { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; } .hsk-setup .hsk-mid { grid-column: 1 / 3; grid-row: 2; } .hsk-setup .hs-vs { display: none; }
  .hsk-setup.is-fixture .hsk-mid { flex-direction: row; flex-wrap: wrap; } .is-fixture .hs-trophy { height: 74px; }
  .hsk-setup.is-cup { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .hsk-side { padding: 0 4px 6px; } .hsk-side .hsk-btn { padding: 2px 8px; font-size: 12px; min-height: 40px; }
  .hsk-fmt-sum { flex-direction: row; max-width: none; } .hsk-fmt-sum img { width: 42%; aspect-ratio: auto; height: 86px; } .hsk-fmt-sum span { flex: 1; text-align: left; justify-content: center; }
  .hsk-pick-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .hsk-pick-info { max-height: 34dvh; align-self: stretch; padding: 6px 10px; } .hsk-pick-info h3 { font-size: 22px; margin: 0; }
  .hsk-tray-a { display: none; } .hsk-tile { flex-basis: 76px; } .hsk-tile-f { width: 72px; height: 72px; }
  .hsk-ladder-top { grid-template-columns: 34% 1fr; grid-template-rows: minmax(0, 1fr) auto; } .hsk-status { grid-column: 1 / 3; padding: 4px 10px; align-self: stretch; } .hsk-status h3 { margin: 0; } .hsk-status small { display: none; } .hsk-status .hsk-track { height: 20px; margin: 2px 0; }
  .hsk-playing .hsk-side-n { font-size: 16px; }
  .hs-cup { display: grid; grid-template-columns: 76px 1fr; column-gap: 8px; text-align: left; align-items: center; padding: 6px 10px; } .hs-cup .hs-trophy { grid-row: 1 / span 5; height: 96px; min-height: 0; } .hs-cup p, .hs-cup h3 { margin: 0; font-size: 13px; } .hs-cup h3 { font-size: 17px; } .hs-cup-a { grid-column: 2; justify-content: flex-start; margin-top: 3px; } .hs-cup-a .hsk-btn { min-height: 38px; min-width: 0; font-size: 12px; } .hs-rew { display: none; }
  .hsk-podium { flex-direction: column; } .hsk-pod-t { flex: 0 0 30%; } .hs-podium { max-width: none; }
  .hsk-done { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .hsk-ccard { flex-basis: 74vw; }
  .hsk-btn.is-primary { min-width: 72%; }
  .hsb-tree { min-height: 480px; } .hsb-skip { right: 12px; bottom: 66px; }
}
/* ------------------- LANDSCAPE PHONE (browser bars visible) */
@media (max-height: 480px) {
  .hs-screen.has-topbar { padding-top: 6px; }
  .hs-head { padding-left: 110px; padding-right: 60px; justify-content: flex-start; min-height: 40px; } .hs-logo { height: 36px; } .hs-title { font-size: 20px; letter-spacing: .05em; } .hs-sub { font-size: 11px; }
  .hs-foot { padding-top: 2px; gap: 6px; } .hsk-btn { min-height: 40px; padding: 2px 14px; font-size: 13px; min-width: 110px; } .hsk-btn.is-primary { min-width: 200px; }
  .hs-chip { min-height: 36px; padding: 2px 10px; font-size: 13px; }
  .hsk-art-txt { padding: 3px 40px 4px 10px; } .hsk-art-txt b { font-size: 18px; } .hsk-art-txt > span { font-size: 12px; } .hsk-enter { width: 26px; height: 26px; right: 6px; bottom: 6px; }
  .hsk-mode-txt { padding: 2px 6px 4px; } .hsk-mode-txt b { font-size: 16px; } .hsk-mode-txt span { font-size: 11px; }
  .hsk-setup { grid-template-columns: minmax(0, 1fr) minmax(190px, .8fr) minmax(0, 1fr); } .hsk-side-n { font-size: 15px; } .hsk-side { padding: 0 6px 4px; gap: 1px; } .hsk-side .hsk-btn { min-height: 34px; font-size: 11px; } .hsk-mid { gap: 3px; } .hs-vs { display: none; }
  .hsk-fmt-sum { flex-direction: row; } .hsk-fmt-sum img { width: 40%; aspect-ratio: auto; height: 62px; } .hsk-fmt-sum span { flex: 1; text-align: left; padding: 2px 6px; } .hsk-fmt-sum b { font-size: 14px; } .hsk-fmt-sum em { display: none; } .hsk-fmt-sum small, .hsk-fmt-sum u { font-size: 11px; }
  .hsk-spot { min-height: 70px; } .hsk-platform { width: min(80%, 200px); }
  .hsk-pick-main { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); } .hsk-pick-info { font-size: 12px; padding: 4px 10px; align-self: stretch; } .hsk-pick-info h3 { font-size: 18px; margin: 0; } .hsk-pick-info .hsk-btn { min-height: 32px; font-size: 11px; }
  .hsk-tray { padding: 2px 4px; } .hsk-tile { flex-basis: 56px; } .hsk-tile-f { width: 50px; height: 50px; border-width: 2px; } .hsk-tile-n { font-size: 10px; } .hsk-tray-a { width: 32px; height: 32px; }
  .hsk-ladder-top { grid-template-columns: minmax(100px, .6fr) minmax(0, 1fr) minmax(190px, 1fr); } .hsk-status { padding: 3px 8px; font-size: 12px; } .hsk-status h3 { font-size: 15px; margin: 0; } .hsk-status small { display: none; } .hsk-status .hsk-track { height: 18px; margin: 1px 0; } .hsk-status .hsk-track span { font-size: 10px; } .hsk-status p { margin: 0; }
  .hsk-strip { padding: 2px 4px; gap: 3px; border-width: 2px; } .hsk-stg { flex: 0 0 64px; font-size: 10px; padding: 1px; } .hsk-stg b { display: none; } .hsk-stg-f { width: 34px; height: 34px; } .hsk-stg-n { font-size: 11px; }
  .hs-cup { display: grid; grid-template-columns: 64px 1fr; column-gap: 6px; text-align: left; align-items: center; padding: 4px 8px; } .hs-cup .hs-trophy { grid-row: 1 / span 5; height: 92px; min-height: 0; } .hs-cup p, .hs-cup h3 { margin: 0; font-size: 12px; } .hs-cup h3 { font-size: 14px; } .hs-rew { display: none; } .hs-cup-a { grid-column: 2; justify-content: flex-start; margin-top: 2px; } .hs-cup-a .hsk-btn { min-height: 34px; min-width: 0; font-size: 11px; padding: 2px 8px; }
  .hsk-ccard { flex-basis: 200px; padding: 3px 8px; font-size: 12px; } .hsk-cart { flex-basis: 70px; min-height: 70px; } .hsk-ccard h3 { font-size: 15px; } .hsk-ccard p { margin: 0; font-size: 11px; line-height: 1.2; }
  .hsb-tree { min-height: 230px; } .hsb-node { width: 94px; height: 30px; gap: 3px; font-size: 10px; border-radius: 8px; padding: 1px 3px 1px 1px; } .hs-face.b { width: 24px; height: 24px; } .hsb-champ { width: 70px; } .hsb-champ .hs-trophy { height: 56px; } .hsb-champ i { font-size: 10px; } .hsb-tl { font-size: 9px; } .hsb-skip { bottom: 50px; min-height: 30px; right: 14px; }
  .hsk-settings { padding: 8px; gap: 6px; } .hsk-set-row { min-height: 50px; } .hsk-set-row img { width: 74px; }
  .modal-card.hsk-sheet { padding: 6px 12px; gap: 2px; } .hsk-sheet h2 { font-size: 18px; } .hsk-unlock-art { height: 34dvh; } .hsk-unlock-n { font-size: 20px; } .hsk-sheet p { font-size: 12px; } .hsk-sheet .hs-logo { height: 34px; } .hsk-preview-win img { max-height: 34dvh; }
  .hs-stats-row { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); } .hsk-panel { padding: 4px 8px; }
  .hsk-podium { gap: 6px; } .hsk-pod-t b { font-size: 11px; }
}
/* corrections after inspecting the real screens */
.hsb-node.is-out { opacity: 1; color: var(--x-8a97ab); } .hsb-node.is-out .hs-face { filter: grayscale(.7) brightness(.7); } .hsb-node.is-out b { color: var(--x-8a97ab); }
.hsb-tree { min-height: 0; }
.hsb-tree.is-tall .hsb-node { height: 11.5%; min-height: 0; } .hsb-tree.is-tall .hs-face.b { width: 28px; height: 28px; } .hsb-tree.is-tall .hsb-champ .hs-trophy { height: 13vh; }
.hsk-hsBracket .hs-foot { flex-wrap: nowrap; } .hsk-hsBracket .hsk-btn { min-width: 0; flex: 0 1 auto; white-space: nowrap; } .hsk-hsBracket .hsk-btn.is-primary { min-width: 200px; }
@media (min-height: 481px) and (min-width: 641px) { .hsk-mode-art { flex: none; aspect-ratio: 4 / 3; } .hsk-mode-txt { flex: 1; justify-content: center; } .hsk-mode-txt span { font-size: 1.1em; } .hsk-modes { align-items: center; } .hsk-mode { height: fit-content; max-height: 100%; } }
.hs-screen * { scrollbar-color: var(--x-d6aa58) var(--x-0b1932); scrollbar-width: thin; }
.hsk-ccard { overflow: hidden; } .hsk-cart { flex: 1 1 0; min-height: 80px; overflow: hidden; }
.hs-pod-a .hsk-idle { height: 82%; }
.hsb-tree.is-tall .hsb-champ .hs-trophy { height: 9.5vh; } .hsb-tree.is-tall .hsb-champ i { font-size: 10px; line-height: 1; }
@media (max-width: 640px) and (orientation: portrait) {
  .hsk-pick-info { max-height: 27dvh; font-size: 13px; } .hsk-platform { width: 66%; } .hsk-side .hsk-platform { width: 92%; } .hsk-pick { gap: 4px; } .hsk-pick-main { gap: 4px; }
}
@media (max-height: 480px) {
  /* the primary actions share the top row, so the artwork gets the height */
  .hsk-hsPick .hs-foot, .hsk-hsLadder .hs-foot, .hsk-hsLocal .hs-foot, .hsk-hsQuick .hs-foot, .hsk-hsCupSetup .hs-foot, .hsk-hsFixture .hs-foot, .hsk-hsBracket .hs-foot { position: absolute; top: 6px; right: 68px; padding: 0; flex-wrap: nowrap; z-index: 4; }
  .hs-screen .hs-foot .hsk-btn { min-width: 0; min-height: 36px; padding: 2px 10px; font-size: 12px; white-space: nowrap; } .hs-screen .hs-foot .hsk-btn img { width: 14px; height: 14px; }
  .hsk-hsPick .hs-title, .hsk-hsLadder .hs-title, .hsk-hsBracket .hs-title, .hsk-hsQuick .hs-title, .hsk-hsLocal .hs-title, .hsk-hsCupSetup .hs-title, .hsk-hsFixture .hs-title { font-size: 15px; } .hs-head { padding-left: 96px; } .hs-logo { height: 30px; } .hsk-hsBracket .hs-sub, .hsk-hsPick .hs-sub { display: none; }
  .hsk-playing .hsk-side-n { font-size: 12px; } .hsk-tag { font-size: 10px; }
  .hsk-pick-info .hsk-locked { padding: 2px 6px; margin-bottom: 2px; } .hsk-locked > img { width: 18px; height: 18px; } .hsk-locked small { display: none; } .hsk-pick-info .hsk-track { height: 18px; margin: 1px 0; }
}
@media (max-height: 480px) {
  .hs-inner { position: relative; } .hs-head { padding-left: 0; padding-right: 0; }
  .hsk-hsPick .hs-foot, .hsk-hsLadder .hs-foot, .hsk-hsLocal .hs-foot, .hsk-hsQuick .hs-foot, .hsk-hsCupSetup .hs-foot, .hsk-hsFixture .hs-foot, .hsk-hsBracket .hs-foot { top: 0; right: 0; }
}
/* one-frame characters breathe gently, as they do in the match; reduced motion holds still */
.hsk-idle { animation: hsk-breath 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hsk-breath { 50% { transform: scaleY(.985); } }
@media (prefers-reduced-motion: reduce) { .hsk-idle, .hsb-node.is-reveal, .hsb-node.is-new { animation: none; } }

/* ==========================================================================
   Final UI pack (/a/f4e19536e82c/Head-Soccer/UI/tournament-art/runtime): decorative only; all labels are live.
   ========================================================================== */
/* competition cards: three, or one at a time with arrows and dots */
.hsc-car { position: relative; flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 6px; }
.hsc-list { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); }
.hsc-card { min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--x-0b1932); border: 4px solid var(--x-d6aa58); text-align: center; }
.hsc-pic { position: relative; flex: 1 1 0; min-height: 0; padding: 6px 6px 0; }
.hsc-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.hsc-card.is-locked .hsc-art { filter: grayscale(.85) brightness(.6); }
.hsc-pic .hsk-lock { position: absolute; left: calc(50% - 24px); top: calc(50% - 24px); width: 48px; height: 48px; }
.hsc-txt { flex: none; padding: 2px 10px 10px; }
.hsc-txt h3 { margin: 2px 0; font: 800 clamp(18px, 3.2vmin, 26px) var(--font-display); text-transform: uppercase; }
.hsc-txt p { margin: 1px 0; } .hsc-txt b { color: var(--x-ffe4a3); } .hs-rew { font-size: .85em; color: var(--x-d6e0ec); }
.hsc-a { align-self: center; flex: none; } .hsc-a[hidden] { display: none; }
.hsc-dots { flex: none; display: flex; justify-content: center; gap: 2px; } .hsc-dots[hidden] { display: none; }
.hsc-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hsc-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--x-4b5d77); }
.hsc-dots button.is-on::before { background: var(--gold-400); box-shadow: 0 0 8px var(--x-f3c35a-a70); }
@media (max-width: 760px), (max-height: 480px) {
  .hsc-list { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hsc-list::-webkit-scrollbar { display: none; }
  .hsc-card { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  .hsc-car > .hsc-a { position: absolute; top: 34%; z-index: 2; background: var(--x-05101f-a75); border-radius: 50%; } .hsc-car > .hsc-a[data-c="l"] { left: 4px; } .hsc-car > .hsc-a[data-c="r"] { right: 4px; }
}
@media (max-height: 480px) {
  .hsc-card { flex-direction: row; text-align: left; } .hsc-pic { flex: 0 0 34%; padding: 4px; } .hsc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 2px 44px 2px 10px; font-size: 12px; } .hsc-txt h3 { font-size: 17px; }
  .hsc-car > .hsc-a { top: calc(50% - 16px); } .hsc-car > .hsc-a[data-c="l"] { left: 2px; } .hsc-car > .hsc-a[data-c="r"] { right: 2px; }
  .hsc-dots button { width: 22px; height: 16px; } .hsc-dots button::before { width: 8px; height: 8px; }
  .hs-cup-a { justify-content: flex-start; }
}
.hsk-cup-rules .hsc-art { height: clamp(90px, 26vh, 240px); flex: none; }
.is-fixture .hsc-art { height: clamp(70px, 22vh, 200px); width: auto; max-width: 100%; }
/* bracket plate: quiet stadium behind a live tree */
.hsb-tree { background: linear-gradient(var(--x-050e20-a42), var(--x-050e20-a55)), url("/a/f4e19536e82c/Head-Soccer/UI/tournament-art/runtime/backdrop.webp") center / cover no-repeat, var(--x-0b1932); }
.hsb-lines path { stroke: var(--x-9fb0c8); } .hsb-tl { background: var(--x-0b1932-a92); border-radius: 4px; }
/* four-place podium: --W = the podium width; every size follows it, so feet stay on the measured surfaces */
.hsk-podium { position: relative; flex-direction: row; }
.hsp-note { position: absolute; left: 0; right: 0; top: 0; margin: 0; z-index: 3; }
.hsp-stage { position: relative; flex: 1; min-width: 0; min-height: 0; container-type: size; display: flex; align-items: flex-end; justify-content: center; }
.hsp-row { --W: min(100cqw / 1.46, 100cqh / .6); --body: calc(var(--W) * .3); display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--W) * .02); }
.hsp-box { position: relative; flex: none; width: var(--W); height: calc(var(--W) * .2311); }
.hsp-box4 { position: relative; flex: none; width: calc(var(--W) * .44); height: calc(var(--W) * .0871); margin-bottom: calc(var(--W) * .012); }
.hsp-art { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.hsp-who { position: absolute; z-index: 1; bottom: calc(100% * (1 - var(--foot))); width: 0; height: var(--body); }
.hsk-res { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; }
.hsk-res.is-flip { scale: -1 1; }
.hsk-res img { position: absolute; left: 0; max-width: none; width: auto; visibility: hidden; } .hsk-res img.is-on { visibility: visible; }
.hsp-tag { position: absolute; z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1.05; white-space: nowrap; color: var(--x-fff3d9); font-size: max(11px, calc(var(--W) * .019)); padding: 1px 8px; border-radius: 8px; background: var(--x-061225-a82); }
.hsp-tag b { color: var(--x-ffe4a3); font: 800 1.2em var(--font-display); } .hsp-tag.is-me { outline: 2px solid var(--x-33cdeb); } .hsp-tag.is-me span { color: var(--x-33cdeb); }
.hsp-tag.is-second { left: 16.96%; top: 62%; } .hsp-tag.is-first { left: 49.87%; top: 63%; } .hsp-tag.is-third { left: 83.79%; top: 68%; } .hsp-tag.is-fourth { left: 50%; top: 56%; flex-direction: row; gap: 5px; font-size: max(11px, calc(var(--W) * .016)); }
.hsp-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hsk-pod-t { flex: 0 0 auto; width: clamp(110px, 18%, 240px); } .hsk-pod-t .hs-trophy { max-height: 60%; }
@media (max-width: 640px) and (orientation: portrait) {
  .hsk-podium { flex-direction: column; align-items: stretch; gap: 2px; } .hsp-note { position: static; font-size: 12px; }
  .hsk-pod-t { flex: none; width: auto; flex-direction: row; gap: 8px; height: 62px; justify-content: center; } .hsk-pod-t .hs-trophy { height: 100%; max-height: none; flex: none; width: auto; }
  .hsp-row { --W: min(100cqw, 100cqh / .95); --body: calc(var(--W) * .4); flex-direction: column; align-items: center; gap: calc(var(--W) * .34); }
  .hsp-box4 { width: calc(var(--W) * .62); height: calc(var(--W) * .1227); margin: 0; }
}
@media (max-height: 480px) { .hsp-row { --W: min(100cqw / 1.46, 100cqh / .56); --body: calc(var(--W) * .27); } .hsk-pod-t { width: 92px; } .hsk-pod-t b { font-size: 11px; } .hsp-note { font-size: 11px; } }
/* welcome news: a small entry, never over Press Start */
#welcomeNews { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 40px); z-index: 4; width: min(400px, 34vw); display: flex; gap: 8px; align-items: center; padding: 8px 30px 8px 8px; background: var(--x-0b1932-a94); border: 2px solid var(--x-d6aa58); border-radius: 14px; box-shadow: 0 8px 24px var(--x-000000-a50); color: var(--x-fff3d9); text-align: left; }
#welcomeNews[hidden] { display: none; }
#welcomeNews.is-seen { width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.hsn-art { flex: none; width: 92px; height: auto; display: block; }
.hsn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .hsn-txt b { font: 800 16px var(--font-display); color: var(--x-ffe4a3); letter-spacing: .03em; } .hsn-txt p { margin: 0; font-size: 12px; line-height: 1.25; color: var(--x-d6e0ec); }
.hsn-k { font: 800 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--x-33cdeb); }
.hsn-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.hsn-btn, .hsn-pill { min-height: 32px; padding: 2px 9px; border: 1px solid var(--x-d6aa58); border-radius: 8px; background: var(--x-10213b); color: var(--x-fff3d9); font: 700 12px var(--font-body, inherit); cursor: pointer; } .hsn-btn.is-play { background: var(--x-553a12); border-color: var(--x-ffe4a3); }
.hsn-pill { min-height: 40px; padding: 2px 14px; background: var(--x-0b1932-a94); border-width: 2px; border-radius: 12px; font-weight: 800; }
.hsn-x { position: absolute; right: 0; top: 0; width: 34px; height: 34px; padding: 0; background: none; border: 0; color: var(--x-d6e0ec); font-size: 20px; line-height: 1; cursor: pointer; }
.hsn-btn:focus-visible, .hsn-pill:focus-visible, .hsn-x:focus-visible { outline: 3px solid var(--x-ffe4a3); outline-offset: 1px; }
.modal-card.hsk-news { width: min(520px, calc(100vw - 20px)); } .hsn-big { width: min(280px, 60%); height: auto; } .hsk-news ul { margin: 2px 0; padding-left: 18px; text-align: left; }
@media (max-height: 480px) { #welcomeNews { bottom: max(34px, env(safe-area-inset-bottom)); width: min(300px, 36vw); padding: 4px 26px 4px 4px; } .hsn-art { display: none; } .hsn-txt p { display: none; } .hsn-txt b { font-size: 13px; } .hsn-btn { min-height: 30px; padding: 1px 6px; font-size: 11px; } .hsn-x { width: 28px; height: 28px; } }
@media (max-width: 640px) and (orientation: portrait) { #welcomeNews { left: 10px; right: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 44px); width: auto; } #welcomeNews.is-seen { left: auto; } .hsn-art { width: 64px; } .hsn-txt b { font-size: 14px; } .hsn-txt p { font-size: 11px; } }
/* Solo game select: Casual's floor; the extras that only Solo has */
.so-games-inner .so-top { flex: none; }
.so-games-inner .so-foot { gap: 10px; flex-wrap: wrap; } .so-start-btn { min-width: 220px; }
.cab-rec { margin: 6px 12px 0; font-size: 12px; font-weight: 700; color: var(--gold-300); }
/* Solo select fits one fixed column at every size (it must not fall back to the scrolling card grid's auto height) */
.so-games-inner, body.is-touch .so-games-inner { height: 100%; min-height: 0; overflow: hidden; gap: clamp(3px, 1vh, 12px); }
.so-games-inner .lib-floor { flex: 1 1 0; min-height: 0; }
.so-games-inner .screen-title { white-space: nowrap; }
.so-games-inner .so-foot, body.is-touch .so-games-inner .so-foot { padding-bottom: 0; flex-wrap: nowrap; } body.is-touch .so-games-inner .so-foot .so-stats-btn { width: auto; min-width: 0; flex: 0 1 auto; white-space: nowrap; } .so-start-btn { white-space: nowrap; }
body.is-touch .so-games-inner { padding-bottom: calc(var(--sa-b) + 4px); } body.is-touch .so-games-inner .nav-hint { display: none; }
@media (orientation: portrait) { body.is-touch .so-games-inner .screen-title { font-size: clamp(19px, 5.6vw, 28px); letter-spacing: .08em; } body.is-touch .so-games-inner .so-top { flex-wrap: nowrap; gap: 8px; } body.is-touch .so-games-inner .so-record { flex-direction: column; gap: 0; align-items: center; min-width: 0; } body.is-touch .so-games-inner .so-record .sr-rec { font-size: 12px; text-align: center; } body.is-touch .so-games-inner .so-start-btn { flex: 1 1 auto; min-width: 0; } }
/* touch targets */
body.is-touch .lib-dots { gap: 0; } body.is-touch .lib-dot { position: relative; width: 32px; height: 32px; transform: none; background: none; border: 0; box-shadow: none; }
body.is-touch .lib-dot::before { content: ""; position: absolute; inset: 11px; transform: rotate(45deg); border-radius: 2px; background: var(--x-ffffff-a14); border: 1px solid var(--x-f3c35a-a30); }
body.is-touch .lib-dot.is-on::before { background: var(--gold-400); box-shadow: 0 0 10px var(--x-f3c35a-a70); }
@media (max-height: 460px) { .lib-dots { display: none; } }
body.is-touch .guest-del { width: 34px; height: 34px; } .cs-cursor { pointer-events: none; }
.cs-tile-name, .ps-tile-name { overflow: hidden; text-overflow: ellipsis; }
body.is-touch .hsc-dots button { width: 32px; height: 32px; }
/* fixture on a portrait phone: the two sprites keep to their own halves */
@media (max-width: 640px) and (orientation: portrait) {
  .is-fixture .hsk-stage { min-width: 0; overflow: hidden; } .is-fixture .hsk-spot .hsk-idle { height: min(calc(100% - 30px), 48vw); }
  #welcomeScreen:has(#welcomeNews:not([hidden]):not(.is-seen)) .welcome-inner { padding-bottom: 96px; }
  #welcomeScreen:has(#welcomeNews:not([hidden]):not(.is-seen)) .welcome-emblem { transform: scale(.8); }
}
@media (max-width: 640px) and (orientation: portrait) and (max-height: 700px) { .hsn-txt p { display: none; } .hsn-art { width: 48px; } }
/* short windows and landscape phones: both floors (Casual and Solo) show a compact machine: name, art and rules stay; Start is the machine itself + the Play button */
@media (max-height: 560px) {
  .lib-carousel { --card-w: clamp(280px, 52vw, 440px); --spread: calc(var(--card-w) * .86); }
  .cabinet { display: grid; grid-template-columns: 40% 1fr; grid-template-rows: auto 1fr auto; max-height: 100%; }
  .cab-marquee { grid-column: 1 / -1; padding: 3px 10px; flex-direction: row; justify-content: center; gap: 8px; border-bottom-width: 2px; } .cab-bulbs { display: none; } .cab-title { font-size: 17px; } .cab-no { font-size: 9px; letter-spacing: .14em; }
  .cab-screen { grid-row: 2 / 4; height: auto; min-height: 76px; margin: 5px 4px 5px 8px; } .cab-mode { font-size: 8px; letter-spacing: .08em; padding: 1px 4px; bottom: 2px; right: 2px; max-width: calc(100% - 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cab-desc { padding: 5px 8px 0; font-size: 11px; line-height: 1.25; min-height: 0; text-align: left; overflow: hidden; } .cab-panel, .cab-rec { display: none !important; }
  .cab-play { margin: 2px 8px 5px; font-size: 10px; letter-spacing: .12em; text-align: left; }
  .lib-floor .px-nav { height: 48px; width: 38px; }
  .so-games-inner .so-top { flex-wrap: nowrap; gap: 8px; align-items: center; } .so-games-inner .so-record .sr-label { display: none; } .so-games-inner .so-me .mu-face { width: 28px; height: 28px; } .so-games-inner .so-me-name { font-size: 12px; } .so-games-inner .so-me-text small { display: none; } .so-games-inner .so-me { padding: 2px 10px 2px 3px; } .so-games-inner .so-record { padding: 0; } .so-games-inner .so-record .sr-rec { font-size: 12px; }
  .so-games-inner .screen-title { font-size: 18px; } .so-games-inner .so-foot .btn { min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 12px; } .so-games-inner .nav-hint { display: none; } .so-start-btn { min-width: 170px; }
  .lib-inner { gap: 3px; } .lib-head .screen-title { font-size: 18px; } .lib-top { gap: 8px; } #libraryScreen .nav-hint, #libraryScreen .touch-hint { display: none; }
  .hsk-pick-info { align-self: stretch; min-height: 0; } .hsk-ccard { overflow-y: auto; } .hsk-ccard .hsk-btn { flex: none; }
  .hsk-ccard .hsk-cart { flex: 1 0 70px; }
}
@media (max-height: 400px) { .hsk-hsCupSetup .hsk-cup-rules { font-size: 12px; } .so-games-inner .screen-head { display: none; } }
@media (orientation: portrait) { body.is-touch .so-games-inner .so-record .sr-label { display: none; } }
.hsk-idle, .hsk-res { pointer-events: none; }
@media (max-width: 640px) and (orientation: portrait) {
  .hsk-setup.is-cup { grid-template-rows: minmax(170px, 1fr) minmax(0, auto); } .hsk-setup.is-cup .hsk-side .hsk-spot { min-height: 90px; } .hsk-cup-rules { padding: 6px 10px; font-size: 12.5px; justify-content: flex-start; } .hsk-cup-rules .hsc-art { height: 72px; } .hsk-cup-rules p { margin: 1px 0; }
}
@media (max-width: 1000px) and (min-height: 1px) { body:not(.is-touch) .hud-keys { display: none; } }
body.is-touch .pause-btn, body.is-touch .ctl-btn { min-width: 34px; min-height: 34px; }
@media (max-height: 480px) { .mc-title { font-size: clamp(14px, 3vw, 22px); letter-spacing: .06em; } }
/* Head Soccer touch editor: controls sit at their real screen positions */
.hsk-hsTouch .hs-body { overflow: visible; } .hst-field { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.hst-strip { position: absolute; left: 0; right: 0; bottom: 0; background: var(--x-05101f-a55); border-top: 2px dashed var(--x-d6aa58); z-index: -1; }
.hst-b { position: absolute; padding: 0; border-radius: 50%; border: 2px solid var(--x-ffe4a3); background: var(--x-10213b); color: var(--x-fff3d9); font: 800 11px var(--font-display); touch-action: none; cursor: grab; pointer-events: auto; } .hst-b.is-p2 { border-color: var(--x-ff8c86); }
.hst-tabs { position: relative; z-index: 4; }
.hsk-hsTouch .hs-foot { position: relative; z-index: 4; align-self: center; margin-bottom: auto; } .hsk-hsTouch .hs-inner { justify-content: flex-start; } .hsk-hsTouch .hs-body { flex: none; }
@media (max-height: 480px) { .hsk-hsTouch .hs-foot { position: relative; top: auto; right: auto; } .hsk-hsTouch .hsk-btn { min-height: 32px; } }
.esa-fetch { text-align: center; } .esa-fetch-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; } .esa-fetch-btns [hidden] { display: none; }
/* very short phones with browser bars: the welcome screen keeps Start and the wordmark apart */
@media (max-height: 420px) { .welcome-foot { display: none; } .welcome-wordmark { font-size: clamp(34px, 8vw, 62px); } .welcome-emblem { height: 76px; width: auto; margin-top: 30px; } .welcome-kicker { font-size: 9px; } .welcome-inner { gap: 4px; } .press-start { padding: 6px 22px; }
  #welcomeNews { bottom: 8px; } }
@media (max-height: 480px) { .hsn-btn { min-height: 32px; } .hsn-x { width: 32px; height: 32px; } }
#teDone { grid-column: 1 / -1; }