/* ⚽ NUGGET SOCCER — the game's layer (body.soccer-mode), the menus, the phone pad.
   The look: a broadcast package — flat dark panels, one green accent and gold for the active thing, condensed type
   for names. No emoji, no gloss (the lesson of the Alert skirmish screen). */
#soccerWorld { position: fixed; inset: 0; display: none; z-index: 9990; background: #070b08; overflow: hidden; touch-action: none;
  --s-bg: rgba(10, 14, 20, 0.92); --s-line: #2a333d; --s-text: #e6ecf1; --s-dim: #8d9aa7; --s-green: #2aa84a; --s-gold: #d9a23a;
  --s-head: 'Oswald', 'Bahnschrift', 'Avenir Next Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --s-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font: 400 14px/1.4 var(--s-body); color: var(--s-text); user-select: none; -webkit-user-select: none; }
body.soccer-mode #soccerWorld { display: block; }
#soccerWorld canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#soccerWorld .soc-gl { pointer-events: none; }
#soccerWorld .soc-ov { pointer-events: none; }
.soc-menu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 16px; box-sizing: border-box; }
.soc-menu > * { pointer-events: auto; }
.soc-menu button { font: inherit; color: inherit; cursor: pointer; }
.soc-big { height: 46px; padding: 0 26px; border: 0; background: var(--s-gold); color: #15110a !important; font: 600 17px/1 var(--s-head) !important; letter-spacing: 0.16em; text-transform: uppercase; }
.soc-big:hover { background: #e8b44c; }
.soc-ghost { height: 46px; padding: 0 22px; border: 1px solid #44515e; background: rgba(10, 14, 20, 0.6); font: 500 14px var(--s-body); letter-spacing: 0.04em; }
.soc-ghost:hover { border-color: #6b7a88; }
.soc-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
/* the title */
.soc-title { background: var(--s-bg); border-top: 3px solid var(--s-green); padding: 26px 30px 22px; width: min(720px, 100%); box-sizing: border-box; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.soc-logo { font: 700 54px/0.95 var(--s-head); letter-spacing: 0.06em; text-transform: uppercase; }
.soc-logo span { display: block; font-size: 22px; letter-spacing: 0.5em; color: var(--s-gold); margin-bottom: 4px; }
.soc-sub { color: var(--s-dim); margin: 8px 0 6px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.soc-opts { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.soc-opt label { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-dim); margin-bottom: 6px; }
.soc-seg { display: flex; border: 1px solid var(--s-line); }
.soc-seg button { height: 32px; padding: 0 14px; border: 0; background: transparent; font: 500 13px var(--s-body); }
.soc-seg button + button { border-left: 1px solid var(--s-line); }
.soc-seg button.on { background: #1f2a35; box-shadow: inset 0 -2px 0 var(--s-gold); color: #fff; }
.soc-keys { margin-top: 18px; color: var(--s-dim); font-size: 12px; line-height: 1.55; }
/* the club pick */
.soc-pick, .soc-cup, .soc-card { background: var(--s-bg); border-top: 3px solid var(--s-green); padding: 20px 24px; width: min(980px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.soc-card { width: min(560px, 100%); text-align: center; }
.soc-pick h2, .soc-cup h2, .soc-card h2 { margin: 0 0 12px; font: 600 26px/1.1 var(--s-head); letter-spacing: 0.06em; text-transform: uppercase; }
.soc-cup h2 small { font: 500 12px var(--s-body); color: var(--s-dim); letter-spacing: 0.14em; margin-left: 10px; }
.soc-pick h3, .soc-round h3 { margin: 0 0 8px; font: 500 11px var(--s-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-dim); }
.soc-pickcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.soc-pickcols > div:only-child { grid-column: 1 / -1; }
.soc-clubs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.soc-club { display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 8px 10px; border: 1px solid var(--s-line); background: rgba(255,255,255,0.02); text-align: left; position: relative; }
.soc-club .soc-kit { grid-row: 1 / 3; }
.soc-club b { font: 500 15px/1.1 var(--s-head); letter-spacing: 0.03em; }
.soc-club span { font-size: 11px; color: var(--s-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.soc-club i { grid-row: 1 / 3; grid-column: 3; font-style: normal; color: var(--s-gold); font-size: 12px; letter-spacing: 1px; }
.soc-club:hover { background: #18212a; }
.soc-club.on { background: #1f2a35; border-color: var(--s-gold); }
.soc-kit { display: inline-block; width: 22px; height: 26px; background: linear-gradient(var(--a) 0 62%, var(--b) 62% 100%); clip-path: polygon(22% 0, 78% 0, 100% 18%, 88% 34%, 82% 30%, 82% 100%, 18% 100%, 18% 30%, 12% 34%, 0 18%); }
/* the cards: half time, full time, pause */
.soc-score { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 14px; flex-wrap: wrap; }
.soc-score b { font: 500 16px var(--s-head); letter-spacing: 0.04em; }
.soc-score em { font: 700 34px/1 var(--s-head); font-style: normal; padding: 0 10px; }
.soc-score em small { display: block; font: 500 12px var(--s-body); color: var(--s-dim); }
.soc-stats { margin: 0 auto; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 300px; }
.soc-stats td, .soc-stats th { padding: 4px 12px; border-bottom: 1px solid #1c242c; }
.soc-stats th { font: 500 11px var(--s-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-dim); }
.soc-stats td:first-child { text-align: right; } .soc-stats td:last-child { text-align: left; }
.soc-earn { color: var(--s-gold); margin: 12px 0 0; }
/* the cup bracket */
.soc-bracket { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.soc-round { display: flex; flex-direction: column; gap: 8px; justify-content: space-around; }
.soc-tie { border: 1px solid var(--s-line); }
.soc-tie.mine { border-color: var(--s-gold); }
.soc-tie span { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; font: 500 13px var(--s-head); letter-spacing: 0.03em; }
.soc-tie span + span { border-top: 1px solid #1c242c; }
.soc-tie span.w { background: #1f2a35; color: #fff; }
.soc-tie span em { font-style: normal; font-variant-numeric: tabular-nums; }
.soc-tie .soc-kit { width: 16px; height: 19px; }
.soc-tie.tbd { padding: 14px; text-align: center; color: var(--s-dim); }
.soc-res { width: 100%; text-align: center; font: 600 20px var(--s-head); letter-spacing: 0.06em; color: var(--s-gold); margin: 0 0 6px; }
@media (max-width: 760px) {
  .soc-pickcols, .soc-bracket { grid-template-columns: 1fr; }
  .soc-clubs { grid-template-columns: 1fr; }
  .soc-logo { font-size: 40px; }
}

/* ---- 📱 the phone pad (js/soccerUI.js "THE PHONE"): the Blitz pattern ---------------------------------------------------- */
body.soccer-mode.soc-touch .storm-hud { display: none !important; }
.soc-pad { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  --safeR: env(safe-area-inset-right, 0px); --safeL: env(safe-area-inset-left, 0px); --safeB: env(safe-area-inset-bottom, 0px); }
.soc-pad[hidden] { display: none; }
.socp-b { position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); padding: 0;
  background: color-mix(in srgb, var(--c, #2aa84a) 88%, black); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 rgba(0,0,0,0.45); opacity: 0.86; -webkit-tap-highlight-color: transparent; touch-action: none;
  font: 600 14px/1 var(--s-head); letter-spacing: 0.06em; transition: transform 0.06s; }
.socp-b.on { transform: translateY(2px) scale(0.94); opacity: 1; box-shadow: 0 1px 0 rgba(0,0,0,0.45); }
.socp-b[data-slot="B0"] { width: 86px; height: 86px; right: calc(24px + var(--safeR)); bottom: calc(24px + var(--safeB)); font-size: 17px; }
.socp-b[data-slot="B1"] { width: 70px; height: 70px; right: calc(122px + var(--safeR)); bottom: calc(18px + var(--safeB)); }
.socp-b[data-slot="B2"] { width: 66px; height: 66px; right: calc(110px + var(--safeR)); bottom: calc(102px + var(--safeB)); }
.socp-b[data-slot="B3"] { width: 62px; height: 62px; right: calc(32px + var(--safeR)); bottom: calc(124px + var(--safeB)); }
.socp-stick { position: absolute; left: calc(84px + var(--safeL)); top: calc(100% - 96px - var(--safeB)); width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: rgba(10,14,20,0.25); opacity: 0.55; }
.socp-stick.live { opacity: 0.9; margin: -56px 0 0 -56px; }
.socp-stick.sprint { border-color: var(--s-gold); box-shadow: 0 0 0 3px rgba(217,162,58,0.35); }
.socp-stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(255,255,255,0.75); }
.socp-pause { position: absolute; pointer-events: auto; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + var(--safeR)); width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4); background: rgba(10,14,20,0.6); color: #fff; font: 700 14px var(--s-head); }