/* HEADS sticker album: classic British football trading cards, sealed in plastic toploaders.
   Card sizes use --u (1px on a 150px card) so a card looks identical at any size. */
#shell .arena[data-venue]{
 /* ---------- The card ---------- */
 .tcard{--w:150px;--u:calc(var(--w) / 150);--mx:30%;--my:20%;--rx:0deg;--ry:0deg;--club:#c8323a;--club-dark:#7d1620;--club-ink:#fff6e6;
  position:relative;width:var(--w);aspect-ratio:5/7;border-radius:calc(12 * var(--u));padding:calc(7 * var(--u));flex:none;
  transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease-out;
  background:linear-gradient(160deg,#ffffff38,#ffffff05 40%,#0000001a);box-shadow:0 0 0 2px #0a0f16,0 calc(6 * var(--u)) 0 #0a0f16,0 calc(14 * var(--u)) calc(24 * var(--u)) #0008}
 .tcard-community{--club:#1f8a54;--club-dark:#0d4b2c;--club-ink:#effff4}
 .tcard-sunday{--club:#a8652b;--club-dark:#5b3414;--club-ink:#fff3dc}
 .tcard-academy{--club:#1d5fa8;--club-dark:#0d2f5c;--club-ink:#f2f8ff}
 .tcard-favela{--club:#129b4b;--club-dark:#06502a;--club-ink:#fff6c8}
 .tcard-face{position:relative;height:100%;border-radius:calc(7 * var(--u));overflow:hidden;display:flex;flex-direction:column;
  background:#f4ead0;color:#1c1712;font-family:var(--display);box-shadow:inset 0 0 0 calc(4 * var(--u)) #f4ead0,inset 0 0 0 calc(5 * var(--u)) #c9b98f}
 .tcard-top{display:flex;justify-content:space-between;align-items:center;padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u));font-size:calc(8 * var(--u));letter-spacing:.14em;color:#6b5a3c}
 .tcard-no{font-size:calc(13 * var(--u));letter-spacing:0;color:#fff;background:var(--club);border:calc(2 * var(--u)) solid #1c1712;border-radius:50%;
  width:calc(24 * var(--u));height:calc(24 * var(--u));display:grid;place-items:center;margin:calc(-2 * var(--u)) calc(-2 * var(--u)) 0 0}
 .tcard-photo{position:relative;margin:0 calc(6 * var(--u));flex:1;min-height:0;border:calc(2 * var(--u)) solid #1c1712;border-radius:calc(4 * var(--u));overflow:hidden;
  /* The flag ripples: soft light and shade bands over the cloth. */
  background:linear-gradient(180deg,#0000 55%,#0005),linear-gradient(100deg,#0000 8%,#ffffff2e 20%,#0000 32%,#00000029 46%,#0000 58%,#ffffff24 72%,#0000 84%,#00000024 96%),var(--flag) center/cover}
 .tcard-photo::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,#0000 40%,#0006);pointer-events:none}
 .tcard-portrait{position:absolute;z-index:1;left:50%;bottom:-6%;width:auto;height:110%;aspect-ratio:1;transform:translateX(-50%);image-rendering:pixelated}
 .tcard-crest{position:absolute;top:calc(5 * var(--u));left:calc(5 * var(--u));z-index:2;font-size:calc(9 * var(--u));letter-spacing:.06em;color:var(--club-ink);background:var(--club);
  border:calc(2 * var(--u)) solid #1c1712;padding:calc(3 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u));border-radius:calc(3 * var(--u)) calc(3 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));box-shadow:0 calc(2 * var(--u)) 0 #1c1712}
 .tcard-banner{position:relative;margin:calc(-10 * var(--u)) calc(4 * var(--u)) 0;padding:calc(5 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));background:var(--club);color:var(--club-ink);
  border:calc(2 * var(--u)) solid #1c1712;transform:skewY(-3deg);box-shadow:0 calc(3 * var(--u)) 0 #1c1712;z-index:2;text-align:center}
 .tcard-name{display:block;font-size:calc(14 * var(--u));line-height:1;letter-spacing:.03em;text-shadow:0 calc(2 * var(--u)) 0 var(--club-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .tcard-nick{display:block;font-size:calc(8.5 * var(--u));letter-spacing:.04em;opacity:.9;margin-top:calc(2 * var(--u))}
 .tcard-stats{display:flex;justify-content:space-between;align-items:center;padding:calc(7 * var(--u)) calc(8 * var(--u)) 0;font-size:calc(10 * var(--u))}
 .tcard-stars{--fill:50%;width:calc(58 * var(--u));height:calc(11 * var(--u));background:linear-gradient(90deg,#d99a14 var(--fill),#c9b98f var(--fill));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cg fill='black'%3E%3Cpath id='s' d='M6 0l1.8 3.9 4.2.4-3.2 2.8 1 4.1L6 9.1 2.2 11.2l1-4.1L0 4.3l4.2-.4z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/g%3E%3C/svg%3E") left/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cg fill='black'%3E%3Cpath id='s' d='M6 0l1.8 3.9 4.2.4-3.2 2.8 1 4.1L6 9.1 2.2 11.2l1-4.1L0 4.3l4.2-.4z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/g%3E%3C/svg%3E") left/contain no-repeat}
 .tcard-rating{color:var(--club-dark)}
 .tcard-bio{margin:calc(4 * var(--u)) calc(8 * var(--u)) 0;font-family:var(--body);font-size:calc(8 * var(--u));line-height:1.25;color:#4a3d29;min-height:calc(20 * var(--u))}
 .tcard-foot{margin-top:auto;padding:calc(4 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u));font-size:calc(6.5 * var(--u));letter-spacing:.12em;text-align:center;color:#f4ead0;background:#1c1712}
 /* Plastic toploader: clear rim, glossy diagonal bands and a light that follows the pointer. */
 .tcard-sleeve{position:absolute;inset:0;z-index:3;border-radius:calc(12 * var(--u));pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my),#ffffff55,#fff0 38%),linear-gradient(115deg,#fff0 30%,#ffffff40 38%,#fff0 46%,#fff0 60%,#ffffff22 64%,#fff0 70%);
  box-shadow:inset 0 0 0 calc(2 * var(--u)) #ffffff40,inset 0 calc(8 * var(--u)) 0 calc(-6 * var(--u)) #ffffff70;mix-blend-mode:screen}
 .tcard-sleeve::after{content:'';position:absolute;left:12%;right:12%;top:calc(4 * var(--u));height:calc(3 * var(--u));border-radius:calc(2 * var(--u));background:#ffffff59}
 .tcard-foil{display:none}
 /* Shiny: holographic foil on the frame, photo backdrop and banner; the player's face stays clean. */
 .tcard.is-shiny{box-shadow:0 0 0 2px #0a0f16,0 calc(6 * var(--u)) 0 #0a0f16,0 0 calc(22 * var(--u)) #ffd23f88,0 calc(14 * var(--u)) calc(24 * var(--u)) #0008}
 .tcard.is-shiny .tcard-face{background:linear-gradient(calc(120deg + var(--ry) * 4),#ffe2f2,#fff2b8 18%,#d2ffe3 36%,#cdeeff 54%,#e8d8ff 72%,#ffe2f2) var(--mx) var(--my)/240% 240%;box-shadow:inset 0 0 0 calc(5 * var(--u)) #d9b24a}
 .tcard.is-shiny .tcard-photo::before{content:'';position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.55;pointer-events:none;
  background:linear-gradient(calc(110deg + var(--ry) * 3),#ff5ec8,#ffd23f 20%,#5effa0 40%,#4fd8ff 60%,#a26bff 80%,#ff5ec8) var(--mx) var(--my)/240% 240%}
 .tcard.is-shiny .tcard-banner{background:linear-gradient(100deg,var(--club),color-mix(in srgb,var(--club) 55%,#ffd84a) 50%,var(--club))}
 .tcard.is-shiny .tcard-foot{background:linear-gradient(90deg,#1c1712,#5a4613,#1c1712)}
 .tcard-stamp{position:absolute;right:calc(6 * var(--u));top:36%;z-index:2;font-size:calc(10 * var(--u));letter-spacing:.08em;color:#1c1712;padding:calc(3 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u));
  transform:rotate(12deg);background:linear-gradient(135deg,#fff6c8,#ffd84a 45%,#f2ad14);border:calc(2 * var(--u)) solid #1c1712;border-radius:calc(4 * var(--u));box-shadow:0 calc(2 * var(--u)) 0 #1c1712}

 /* ---------- Album ---------- */
 .album-overlay{background:radial-gradient(circle at 50% 30%,#1b2a38f2,#070b10f7);padding:14px;place-items:stretch}
 .album-book{display:flex;flex-direction:column;min-height:0;height:100%;border-radius:14px;overflow:hidden;border:3px solid #0a0f16;box-shadow:0 8px 0 #0a0f16,0 20px 40px #000a;
  background:radial-gradient(circle at 1px 1px,#00000012 1px,#0000 1.4px) 0 0/6px 6px,linear-gradient(180deg,#f7efd9,#eadcb8)}
 .album-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 16px;background:linear-gradient(90deg,#c8323a,#7d1620);border-bottom:3px solid #0a0f16;color:#fff6e6}
 .album-title{display:flex;flex-direction:column;line-height:1}
 .album-kicker,.album-season{font-family:var(--display);font-size:10px;letter-spacing:.24em;opacity:.85}
 .album-title strong{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.02em;-webkit-text-stroke:4px #0a0f16;paint-order:stroke fill;margin:3px 0}
 .album-meta{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:13px;letter-spacing:.06em}
 .album-bar{width:120px;height:10px;border-radius:6px;background:#0005;border:2px solid #0a0f16;overflow:hidden}.album-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd84a,#f2ad14)}
 .album-meta .text-button{color:#fff6e6;padding:6px 4px}
 .album-body{flex:1;min-height:0;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 16px}
 .album-cover-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border:2px dashed #b9a679;border-radius:10px;background:#fff8}
 .album-cover-wrap .tcard{--w:170px}
 .album-cover-label{font-family:var(--display);font-size:11px;letter-spacing:.18em;color:#7d1620}
 .album-page{min-width:0;min-height:0;display:flex;flex-direction:column}
 .album-tabs{display:flex;gap:6px}
 .album-tabs button{flex:1;font-family:var(--display);font-size:12px;letter-spacing:.08em;padding:8px 6px;border:2px solid #0a0f16;border-bottom:0;border-radius:8px 8px 0 0;background:#d9c89c;color:#4a3d29;cursor:pointer}
 .album-tabs button[aria-selected=true]{background:#1c1712;color:#ffd84a}
 .album-rule{margin:0;padding:6px 10px;font-family:var(--display);font-size:11px;letter-spacing:.04em;color:#f4ead0;background:#1c1712}
 .album-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(4,max-content);grid-auto-flow:column;grid-template-rows:repeat(3,max-content);
  justify-content:center;align-content:start;gap:12px 14px;padding:14px 6px;border:2px solid #0a0f16;border-top:0;background:#fffbef80}
 .album-grid .tcard{--w:104px}
 .album-slot{width:104px;aspect-ratio:5/7;border:2px dashed #a8946a;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;padding:8px;color:#8c7b56;background:repeating-linear-gradient(135deg,#0000 0 8px,#0000000a 8px 9px)}
 .album-slot-no{font-family:var(--display);font-size:30px;line-height:1;color:#b9a679}
 .album-slot-name{font-family:var(--display);font-size:12px;letter-spacing:.04em;color:#6b5a3c}
 .album-slot-hint{font-size:9px;font-family:var(--body);color:#9a8862}
 .album-slot.is-shiny{border-color:#d9a72b;background:repeating-linear-gradient(135deg,#0000 0 8px,#f2ad1414 8px 9px)}
 .album-slot.is-shiny .album-slot-no{color:#d9a72b}
 .album-slot.is-super{border-color:#9a6d10;border-style:solid;background:repeating-linear-gradient(135deg,#0000 0 8px,#9a6d1018 8px 9px)}
 .album-slot.is-super .album-slot-no{color:#9a6d10}
 /* Super rare: gold full-art. The flag runs under the whole card, behind a gold frame and a slow shimmer. */
 .tcard.is-super{box-shadow:0 0 0 2px #0a0f16,0 calc(6 * var(--u)) 0 #0a0f16,0 0 calc(26 * var(--u)) #ffc83dcc,0 calc(14 * var(--u)) calc(24 * var(--u)) #0008}
 .tcard.is-super .tcard-face{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff3b0d9,#e3ab32b3 38%,#fff1a8bf 55%,#a9740fd9),var(--flag) center/cover;
  box-shadow:inset 0 0 0 calc(5 * var(--u)) #e7b93a,inset 0 0 0 calc(6.5 * var(--u)) #6b4a0a}
 .tcard.is-super .tcard-face::after{content:'';position:absolute;inset:-20%;z-index:3;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,#fff0 40%,#fffbe6cc 50%,#fff0 60%) 0 0/250% 100% no-repeat;animation:gold-sweep 3.2s ease-in-out infinite}
 .tcard.is-super .tcard-photo{border-color:#6b4a0a;background:linear-gradient(180deg,#0000 55%,#0004),var(--flag) center/cover}
 .tcard.is-super .tcard-banner{background:linear-gradient(100deg,#7a5208,#f7d36b 42%,#fff3c4 50%,#d9a12a 60%,#7a5208);color:#1c1712}
 .tcard.is-super .tcard-nick{color:#3d2a05}
 .tcard.is-super .tcard-top,.tcard.is-super .tcard-bio{color:#2b1d03}
 .tcard.is-super .tcard-foot{background:linear-gradient(90deg,#3d2a05,#c99a2e,#3d2a05);color:#fff6d8}
 .tcard.is-super .tcard-stamp{color:#ffd84a;background:linear-gradient(135deg,#2b1d03,#5a3d06);border-color:#ffd84a}

 /* ---------- New sticker reveal ---------- */
 .sticker-reveal{background:radial-gradient(circle at 50% 45%,#2a2312f0,#070b10f9);z-index:9}
 .reveal-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
 .reveal-wrap h2{margin:0;font-family:var(--display);font-weight:400;font-size:34px;color:#ffd84a;-webkit-text-stroke:6px #0a0f16;paint-order:stroke fill;text-shadow:0 4px 0 #0a0f16}
 .reveal-wrap p{margin:0;font-family:var(--display);letter-spacing:.04em;color:#f4ead0}
 .reveal-stage{perspective:900px;animation:card-slide .6s cubic-bezier(.2,.9,.3,1.2) both}
 .reveal-flip{position:relative;width:200px;aspect-ratio:5/7;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
 .sticker-reveal.is-flipped .reveal-flip{transform:rotateY(180deg)}
 .tcard-back,.reveal-front{position:absolute;inset:0;backface-visibility:hidden}
 .reveal-front{--w:200px;transform:rotateY(180deg)}
 .tcard-back{border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:7px solid #f4ead0;box-shadow:0 0 0 2px #0a0f16,0 6px 0 #0a0f16;
  background:repeating-linear-gradient(45deg,#7d1620 0 10px,#8f1d28 10px 20px)}
 .tcard-back-logo{font-family:var(--display);font-size:42px;color:#fff6e6;-webkit-text-stroke:5px #0a0f16;paint-order:stroke fill}
 .tcard-back-sub{font-family:var(--display);font-size:9px;letter-spacing:.2em;color:#ffd84a}
 .sticker-reveal.is-flipped .reveal-front .tcard-sleeve{animation:sleeve-sweep 1.2s .5s ease-out}
 .home-album{background:#ff8a3d}
}
@keyframes card-slide{from{transform:translateY(-140%)}to{transform:translateY(0)}}
@keyframes gold-sweep{0%,30%{background-position:130% 0}70%,100%{background-position:-30% 0}}
@keyframes sleeve-sweep{from{background-position:-200% 0,-200% 0}to{background-position:200% 0,200% 0}}
@container (max-width:620px){#shell .arena[data-venue]{.album-body{grid-template-columns:1fr}.album-cover-wrap{display:none}.album-grid .tcard{--w:96px}.album-slot{width:96px}.album-title strong{font-size:18px}}}
@media(prefers-reduced-motion:reduce){#shell .arena[data-venue]{.tcard,.reveal-flip{transition:none}.reveal-stage{animation:none}.tcard.is-super .tcard-face::after{animation:none}}}
/* NEW badge on the album buttons, and the NEW tag on freshly opened cards. */
#shell .arena[data-venue]{
 #hub-album,#open-album{position:relative;overflow:visible}
 .new-badge{position:absolute;top:-11px;right:-10px;padding:3px 8px;font-family:var(--display);font-size:13px;letter-spacing:.06em;line-height:1.2;
  color:#1c1712;background:linear-gradient(180deg,#fff3a6,#ffd84a 55%,#f2ad14);border:2px solid #0a0f16;border-radius:6px;box-shadow:0 2px 0 #0a0f16;transform:rotate(6deg);animation:new-pop 1.6s ease-in-out infinite;pointer-events:none}
 .tcard-new{position:absolute;z-index:4;top:calc(-6 * var(--u));left:calc(-6 * var(--u));padding:calc(2 * var(--u)) calc(6 * var(--u));font-family:var(--display);font-size:calc(9 * var(--u));letter-spacing:.06em;
  color:#fff;background:#d8323c;border:calc(2 * var(--u)) solid #0a0f16;border-radius:calc(4 * var(--u));transform:rotate(-8deg);box-shadow:0 calc(2 * var(--u)) 0 #0a0f16}
}
@keyframes new-pop{0%,100%{transform:rotate(6deg) scale(1)}50%{transform:rotate(6deg) scale(1.12)}}
@media(prefers-reduced-motion:reduce){#shell .arena[data-venue] .new-badge{animation:none}}
/* Hub league switch and free play. */
#shell .arena[data-venue]{
 /* The plate moves onto the title so the arrows sit either side of it on one row. */
 .training-toolbar>div.league-switch:first-child{flex-direction:row;align-items:center;gap:6px;padding:0;background:none;border:0;box-shadow:none}
 .league-switch>div{background:var(--venue-pattern),var(--venue-panel);border:3px solid var(--ink);border-radius:11px;padding:3px 12px 4px 10px;box-shadow:inset 0 2px 0 #ffffff14,0 3px 0 var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:2px}
 .league-arrow{width:30px;height:30px;padding:0;display:grid;place-items:center;font-family:var(--display);font-size:22px;line-height:1;color:var(--venue-text);
  background:linear-gradient(#2f4152,#1e2b38);border:2px solid var(--ink);border-radius:8px;box-shadow:inset 0 2px 0 #ffffff1f,0 3px 0 var(--ink);cursor:pointer}
 .league-arrow:disabled{opacity:.35;cursor:default}
 .freeplay-card .float-kicker span+span{color:var(--venue-accent)}
 .freeplay-label{margin:8px 0 4px;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--venue-accent)}
 .freeplay-cards{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px}
 .freeplay-tile{flex:0 0 auto;width:66px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 3px;border:2px solid var(--ink);border-radius:8px;
  background:linear-gradient(#2f4152,#1e2b38);color:var(--venue-text);font-family:var(--display);cursor:pointer;box-shadow:0 2px 0 var(--ink)}
 .freeplay-tile canvas{width:44px;height:40px}
 .freeplay-tile span{font-size:9.5px;letter-spacing:.02em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .freeplay-tile small{font-size:9px;color:#ffd84a}
 .freeplay-tile[aria-pressed=true]{outline:3px solid var(--venue-accent);outline-offset:1px;background:linear-gradient(#3b5568,#24384a)}
 button.fixture{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
 button.fixture:disabled{cursor:default;opacity:.55}
 /* Rival faces stay in silhouette until their sticker card is collected. */
 .visual-option.is-card-locked canvas{filter:brightness(0) opacity(.45)}
 .visual-option.is-card-locked{position:relative}
 .visual-option.is-card{position:relative}
 .visual-option.is-card::after{content:'CARD';position:absolute;top:4px;right:4px;padding:1px 4px;font-family:var(--display);font-size:9px;letter-spacing:.06em;color:#1c1712;background:#ffd84a;border:2px solid #0a0f16;border-radius:4px}
}
/* Locked boots show what unlocks them. */
#shell .arena[data-venue]{
 #editor-kit [data-unlock]{position:relative}
 #editor-kit [data-unlock]::before{content:attr(data-unlock);position:absolute;z-index:2;left:50%;bottom:-7px;transform:translateX(-50%);padding:0 4px;white-space:nowrap;font-family:var(--display);font-size:9px;letter-spacing:.04em;line-height:14px;color:#1c1712;background:#ffd84a;border:2px solid #0a0f16;border-radius:4px}
}
/* A won league's fixtures can be tapped to pick a round. */
#shell .arena[data-venue]{
 .fixture.pickable{cursor:pointer}
 .fixture.pickable:hover{filter:brightness(1.15)}
 .fixture.pickable:focus-visible{outline:2px solid var(--venue-accent);outline-offset:2px}
}
/* Home screen in the campaign: the current league's ground behind, painted heads, and a progress line. */
#shell .arena[data-venue]{
 .title-screen[style*="--home-ground"]{background:radial-gradient(70% 60% at 50% 35%,#0b111933,#0b1119c0 80%),linear-gradient(180deg,#0b111980,#0b111922 45%,#0b1119bb),var(--home-ground) center 62%/cover}
 .title-screen[style*="--home-ground"]::before,.title-screen[style*="--home-ground"]::after{display:none}
 .home-player.is-painted{width:17%;image-rendering:auto}
 .home-player-left.is-painted{left:3%;bottom:19%;transform:scaleX(-1) rotate(8deg)}
 .home-player-right.is-painted{right:3%;bottom:20%;transform:rotate(-8deg)}
 .home-player-third.is-painted{width:10%;right:15%;top:5%;transform:rotate(10deg)}
 .home-progress{display:inline-block;margin-top:10px;padding:5px 12px;font-family:var(--display);font-size:12px;letter-spacing:.1em;color:var(--venue-accent,#ffd84a);background:#0b1119cc;border:2px solid var(--ink,#0a0f16);border-radius:8px;box-shadow:0 3px 0 var(--ink,#0a0f16)}
}
/* Shown when the running server is older than the game's rules on disk. */
#shell .arena[data-venue] .update-banner{position:absolute;z-index:20;left:50%;top:10px;transform:translateX(-50%);max-width:90%;padding:7px 14px;font-family:var(--display);font-size:13px;letter-spacing:.03em;text-align:center;color:#1c1712;background:#ffd84a;border:3px solid #0a0f16;border-radius:10px;box-shadow:0 4px 0 #0a0f16;pointer-events:none}
/* Five grounds share one row: long names wrap onto two lines instead of being cut off. */
#shell .arena[data-venue] .picker-ground .pick-label{white-space:normal;overflow:visible;text-overflow:clip;font-size:13px;line-height:1.05;padding:18px 7px 6px}
/* On-screen controls for touchscreens. Portrait: under the pitch; landscape: see-through in the bottom corners. */
#shell .touch-pad{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;padding:12px max(16px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-bottom));pointer-events:none}
#shell .touch-pad[hidden]{display:none}
#shell .touch-move,#shell .touch-act{display:flex;gap:min(14px,3vw);align-items:flex-end}
#shell .touch-pad button{pointer-events:auto;width:min(76px,19vw);aspect-ratio:1;border-radius:50%;border:3px solid #0a0f16;background:#f4ead0;color:#1c1712;font-family:'Lilita One',sans-serif;font-size:19px;letter-spacing:.04em;box-shadow:0 5px 0 #0a0f16;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#shell .touch-pad .touch-kick{width:min(92px,23vw);background:#ffd84a}
#shell .touch-pad button.down{transform:translateY(4px);box-shadow:0 1px 0 #0a0f16;filter:brightness(.92)}
#shell .touch-hint{width:100%;margin:0 0 16px;text-align:center;font-family:'Lilita One',sans-serif;font-size:13px;letter-spacing:.06em;color:#cfe3d6;opacity:.8}
@media (orientation:landscape){
 #shell .touch-pad{padding:0 max(10px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom))}
 #shell .touch-pad button{width:min(15vh,74px);font-size:min(3.4vh,17px);opacity:.62}
 #shell .touch-pad .touch-kick{width:min(18vh,88px)}
 #shell .touch-hint{display:none}
 #shell .touch-act{margin-bottom:min(14vh,64px)}/* clear of the sound and fullscreen buttons */
}
/* Phones held sideways are short: shrink the hub's panels and toolbar so nothing is cut off. */
@media (max-height:440px){#shell .arena[data-venue]{.hub-float-grid,.training-toolbar,.history-panel{zoom:.62}.training-hub .hub-float-grid{height:47%;max-height:47%}}}
/* Quick Match cast pickers: who you play as, and which rival you face. */
#shell .arena[data-venue]{
 .field-wide{grid-column:1/-1}
 .quick-cast[hidden]{display:none}
 .cast-row{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
 .cast-tile{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 3px;border:2px solid var(--ink,#0a0f16);border-radius:8px;background:linear-gradient(#2f4152,#1e2b38);color:var(--venue-text,#f1f6ec);font-family:var(--display);cursor:pointer;box-shadow:0 2px 0 var(--ink,#0a0f16)}
 .cast-tile canvas{width:42px;height:38px}
 .cast-tile span{font-size:9.5px;letter-spacing:.02em;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .cast-tile .cast-random{display:grid;place-items:center;width:42px;height:38px;font-size:24px;color:var(--venue-accent,#ffd84a)}
 .cast-tile[aria-pressed=true]{outline:3px solid var(--venue-accent,#ffd84a);outline-offset:1px;background:linear-gradient(#3b5568,#24384a)}
}
/* Rewards: coins, daily and rival challenges, head to head, the celebrations locker and the result tally. */
#shell .arena[data-venue]{
 .coin-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 7px;font-family:var(--display);font-size:14px;color:#1c1712;background:#ffd84a;border:2px solid #0a0f16;border-radius:999px;box-shadow:0 3px 0 #0a0f16;white-space:nowrap}
 .coin-chip::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c8,#f2ad14 60%,#c47f04);border:2px solid #0a0f16}
 .daily-card{margin-top:8px;padding-top:8px;border-top:2px dashed #ffffff24}
 .daily-heading{display:flex;justify-content:space-between;font-family:var(--display);font-size:11px;letter-spacing:.08em;color:var(--venue-accent,#ffd84a)}
 .daily-list{list-style:none;margin:5px 0 0;padding:0;display:grid;gap:3px}
 .daily-list li{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.25;padding:3px 7px;border-radius:6px;background:#0a0f1640}
 .daily-list li span{font-family:var(--display);color:var(--venue-accent,#ffd84a);white-space:nowrap}
 .daily-list li.done{opacity:.6;text-decoration:line-through}
 .daily-list li.done span{color:#7be08a;text-decoration:none}
 .next-h2h{margin:2px 0 0;font-family:var(--display);font-size:11px;letter-spacing:.08em;color:var(--venue-accent,#ffd84a)}
 .next-challenge{margin:3px 0 6px;font-size:11.5px;line-height:1.3;padding:4px 7px;border-radius:6px;border:2px solid #0a0f16;background:#ffd84a;color:#1c1712;font-family:var(--display);letter-spacing:.02em}
 .next-challenge:empty,.next-h2h:empty{display:none}
 .next-challenge.is-done{background:#7be08a}
 .moves-head{display:flex;gap:14px;align-items:center;margin-bottom:10px}
 #moves-preview{width:240px;height:150px;flex:0 0 auto;border-radius:12px;border:3px solid #0a0f16;background:radial-gradient(80% 90% at 50% 30%,#3b5568,#1e2b38);box-shadow:0 4px 0 #0a0f16}
 .moves-wallet{display:grid;gap:2px;font-family:var(--display)}
 .moves-wallet span{font-size:11px;letter-spacing:.1em;color:var(--venue-accent,#ffd84a)}
 .moves-wallet strong{font-size:30px;color:#f6f3ea}
 .moves-wallet small{font-family:var(--body,inherit);font-size:12px;opacity:.75;max-width:220px}
 .moves-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
 .move-tile{display:grid;gap:3px;text-align:left;padding:9px 10px;border:3px solid #0a0f16;border-radius:10px;background:linear-gradient(#2f4152,#1e2b38);color:#f6f3ea;font-family:var(--display);cursor:pointer;box-shadow:0 3px 0 #0a0f16}
 .move-tile strong{font-size:15px;font-weight:400}
 .move-tag{font-size:10.5px;letter-spacing:.06em;color:var(--venue-accent,#ffd84a)}
 .move-tile.is-locked .move-tag{color:#ffd84a}
 .move-tile[aria-pressed=true]{background:linear-gradient(#3f7a4c,#285236)}
 .move-tile[aria-pressed=true] .move-tag{color:#c9ffd2}
 .move-tile.is-previewed{outline:3px solid var(--venue-accent,#ffd84a);outline-offset:1px}
 .move-tile:disabled{opacity:.55;cursor:not-allowed}
 .is-buyable{opacity:.75}
 .is-buyable:hover{opacity:1}
 .result-reward{margin:10px auto 4px;max-width:340px;text-align:left}
 .reward-lines{list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:160px;overflow-y:auto}
 .reward-lines li{display:flex;justify-content:space-between;gap:10px;padding:4px 9px;border-radius:7px;background:#0a0f1655;font-size:13px;opacity:0;transform:translateX(-10px);animation:reward-in .3s ease-out forwards}
 .reward-lines li strong{font-family:var(--display);font-weight:400;color:#ffd84a}
 .reward-lines li.is-special{background:#ffd84a26;border:1px solid #ffd84a80}
 @keyframes reward-in{to{opacity:1;transform:none}}
 .reward-total{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:6px 10px;border:3px solid #0a0f16;border-radius:10px;background:#ffd84a;color:#1c1712;font-family:var(--display);box-shadow:0 3px 0 #0a0f16}
 .reward-total span{font-size:12px;letter-spacing:.08em}
 .reward-total strong{font-size:22px;font-weight:400}
 .reward-next{margin-top:8px;font-family:var(--display);font-size:11px;letter-spacing:.06em;color:var(--venue-accent,#ffd84a)}
 .reward-track{margin-top:4px;height:9px;border:2px solid #0a0f16;border-radius:999px;background:#0a0f1680;overflow:hidden}
 .reward-track i{display:block;height:100%;background:linear-gradient(90deg,#f2ad14,#ffd84a);transition:width .9s cubic-bezier(.2,.8,.2,1)}
 .tcard-challenge{margin:calc(3 * var(--u)) calc(8 * var(--u)) 0;padding:calc(2 * var(--u)) calc(5 * var(--u));font-family:var(--display);font-size:calc(7.5 * var(--u));letter-spacing:.03em;color:#1c1712;background:#f4ead0;border:1px solid #1c171266;border-radius:calc(3 * var(--u))}
 .tcard-challenge.is-done{background:#7be08a;border-color:#1c1712}
}
/* Hub, tidied: upgrades in their own window, bigger match ratings, and the coach's target as a badge. */
#shell .arena[data-venue]{
 .training-hub .hub-float-grid{grid-template-columns:repeat(2,minmax(200px,1fr))}
 .upgrades-panel .history-heading h3{margin:0}
 .upgrades-panel #hub-rating{margin:4px 0 10px}
 .upgrades-panel .stat-row{margin-bottom:6px}
 .training-actions .icon-button.has-points{background:#ffd84a;color:#1c1712;border-color:#0a0f16}
 .next-target{margin:4px 0 2px;padding:5px 8px;border:2px solid #0a0f16;border-radius:7px;background:#ff9f43;color:#1c1712;font-family:var(--display);font-size:12.5px;letter-spacing:.03em;line-height:1.2;box-shadow:0 2px 0 #0a0f16}
 .next-target[hidden]{display:none}
 .fixture-heading{margin:8px 0 3px;font-family:var(--display);font-size:11px;letter-spacing:.1em;color:var(--venue-accent,#ffd84a)}
 .training-hub .next-card .fixture-list{gap:6px}
 .training-hub .next-card .fixture{flex:1;width:auto;height:38px}
 .training-hub .next-card .fixture .performance-badge{width:100%;min-width:0;height:36px;font-size:19px}
 .rating-averages{gap:16px}
 .rating-averages .performance-badge{min-width:54px;height:40px;font-size:22px}
 .rating-averages small{font-size:10px;letter-spacing:.08em}
}
/* Match ratings lead the progress card. */
#shell .arena[data-venue]{
 .progress-top{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
 .progress-top .rating-averages{border:0;margin:0;padding:0;justify-content:flex-end}
 .progress-top .history-toggle{grid-column:1/-1;justify-self:end;margin:-4px 0 4px}
}
/* Hub fits without scrolling: your form on the left, the next match on the right; goals live in their own window. */
#shell .arena[data-venue]{
 .training-hub .hub-float-grid{grid-template-columns:minmax(170px,.75fr) minmax(260px,1.5fr);overflow:visible}
 .training-hub .hub-float{overflow:hidden;display:flex;flex-direction:column}
 .progress-card .rating-averages{border:0;margin:6px 0 2px;padding:0;gap:12px}
 .progress-card .history-toggle{align-self:flex-start;margin:2px 0 6px;padding:0}
 .goals-button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:7px 10px;border:2px solid #0a0f16;border-radius:8px;background:#ffd84a;color:#1c1712;font-family:var(--display);font-size:12px;letter-spacing:.04em;box-shadow:0 3px 0 #0a0f16;cursor:pointer}
 .goals-button span{font-size:10px;padding:2px 6px;border-radius:999px;background:#1c1712;color:#ffd84a;white-space:nowrap}
 .progress-card .hub-message{margin:7px 0 0;font-size:11px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .next-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
 .next-head h3{margin:0}
 .next-meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
 .next-meta p{margin:0}
 .next-card .next-target,.next-card .next-challenge{margin:3px 0 0;padding:3px 7px;font-size:11px}
 .next-card .fixture-heading{margin:5px 0 2px}
 .training-hub .next-card .fixture{height:30px}
 .training-hub .next-card .fixture .performance-badge{height:28px;font-size:16px}
 .next-card #career-play{margin-top:6px}
 .goals-panel{width:min(620px,calc(100% - 28px))}
 .goals-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}
 .goals-grid .daily-card{margin:0;padding:0;border:0}
 .goals-grid .daily-list li{font-size:13px;padding:6px 9px}
 @media (max-width:560px){.goals-grid{grid-template-columns:1fr}}
}
#shell .arena[data-venue]{
 .rival-heading{margin-top:12px}
 .daily-list li.is-waiting{opacity:.55}
}
/* Room for both hub panels without scrolling (phones held sideways keep their own 47%). */
@media (min-height:441px){#shell .arena[data-venue] .training-hub .hub-float-grid{height:42%;max-height:42%}}
/* Upright phones: the game area is too short for the hub, so the panels scroll there (sideways fits). */
@media (max-width:600px) and (orientation:portrait){#shell .arena[data-venue] .training-hub .hub-float{overflow-y:auto}#shell .arena[data-venue] .training-hub .hub-float-grid{grid-template-columns:repeat(2,minmax(150px,1fr));overflow-x:auto}}
/* Your form: streak and last five results. */
#shell .arena[data-venue]{
 .form-streak{margin:2px 0 6px;padding:4px 8px;border-radius:7px;background:#0a0f1655;font-family:var(--display);font-size:11px;letter-spacing:.05em;color:var(--venue-text,#f1f6ec)}
 .form-streak.is-hot{background:#ff7a1f;color:#1c1712;border:2px solid #0a0f16}
 .form-streak.is-hot::before{content:"\1F525  "}
 .form-heading{font-family:var(--display);font-size:10px;letter-spacing:.1em;color:var(--venue-accent,#ffd84a);margin-bottom:3px}
}
#shell .arena[data-venue]{
 .progress-card .rating-averages{margin:3px 0 0}
 .progress-card .rating-averages .performance-badge{height:34px;font-size:20px}
 .form-streak{margin:0 0 5px}
 .progress-card .hub-message[hidden]{display:none}
 .training-toolbar .training-actions{flex-wrap:nowrap}
 .training-toolbar .training-actions .icon-button,.training-toolbar .coin-chip{white-space:nowrap}
}
@media (max-width:900px){#shell .arena[data-venue]{.training-toolbar .training-actions{gap:4px}.training-toolbar .training-actions .icon-button{padding:6px 7px;font-size:9px}.training-toolbar .coin-chip{font-size:11px;padding:3px 8px 3px 5px}.training-toolbar .league-switch strong{white-space:nowrap;font-size:13px}}}
#shell .arena[data-venue]{
 .hub-daily{margin:0 0 7px;gap:3px}
 .hub-daily li{font-size:11px;padding:3px 7px}
}
#shell .arena[data-venue]{
 .hub-daily{margin:0 0 7px;gap:3px}
 .hub-daily li{font-size:11px;padding:3px 7px}
}
#shell .arena[data-venue]{
 .progress-card .hub-daily{margin:0 0 5px;gap:2px}
 .progress-card .hub-daily li{font-size:10.5px;line-height:1.15;padding:2px 6px}
 .progress-card .form-streak{margin:0 0 4px;padding:3px 8px}
 .progress-card .form-heading{margin-bottom:2px}
 .progress-card .goals-button{padding:5px 9px}
 .progress-card .history-toggle{margin:0 0 4px}
}
/* One spacing rhythm in both hub panels; their main buttons sit on the same bottom line. */
#shell .arena[data-venue]{
 .training-hub .hub-float{gap:6px}
 .training-hub .hub-float>*{margin-top:0;margin-bottom:0}
 .training-hub .hub-float>.float-kicker{display:flex;justify-content:space-between;align-items:center;min-height:18px}
 .training-hub .progress-card .goals-button,.training-hub .next-card #career-play,.training-hub .freeplay-card #freeplay-play{margin-top:auto}
 .progress-card .rating-averages>div{align-items:center}
 .progress-card .rating-averages small{text-align:center}
 .progress-card .history-toggle{margin:0}
 .progress-card .form-streak,.progress-card .hub-daily{margin:0}
 .progress-card .form-heading,.next-card .fixture-heading{margin:0 0 -3px}
}
#shell .arena[data-venue] .progress-card .rating-averages{align-items:center}
#shell .arena[data-venue] .progress-card .rating-averages .history-toggle{margin-left:auto;align-self:center;white-space:nowrap}
#shell .arena[data-venue] .progress-card .rating-averages .performance-badge{height:30px;min-width:48px;font-size:18px}
#shell .arena[data-venue] .progress-card .rating-averages{gap:10px}
#shell .arena[data-venue] .progress-card .rating-averages>div{gap:3px}
#shell .arena[data-venue] .training-hub .next-card #career-play,#shell .arena[data-venue] .training-hub .freeplay-card #freeplay-play{min-height:0;padding-top:8px;padding-bottom:8px}
#shell .arena[data-venue]{
 .training-hub .next-card #career-play,.training-hub .freeplay-card #freeplay-play,.training-hub .progress-card .goals-button{height:30px;padding-top:0;padding-bottom:0}
 .training-hub .next-card .fixture{height:26px}
 .training-hub .next-card .fixture .performance-badge{height:24px;font-size:15px}
}
#shell .arena[data-venue] :is(.training-hub .next-card #career-play,.training-hub .freeplay-card #freeplay-play,.training-hub .progress-card .goals-button){height:28px;flex-shrink:0}
/* The rating averages are the headline of the hub. */
#shell .arena[data-venue]{
 .progress-card .float-kicker .history-toggle{margin:0;padding:0;font-size:10px;letter-spacing:.06em}
 .progress-card .rating-averages{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .progress-card .rating-averages>div{align-items:stretch;gap:3px}
 .progress-card .rating-averages .performance-badge{width:100%;height:46px;font-size:30px;border-width:3px;border-radius:9px}
 .progress-card .rating-averages small{font-size:10px;letter-spacing:.1em;text-align:center}
}
@media (min-height:441px){#shell .arena[data-venue] .training-hub .hub-float-grid{height:46%;max-height:46%}}
/* Album: tap a card to show it big on the left. */
#shell .arena[data-venue]{
 .album-grid .tcard.is-pickable{cursor:pointer}
 .album-grid .tcard.is-featured{outline:3px solid #ffd84a;outline-offset:3px;border-radius:8px}
 .album-cover-back{margin-top:8px;font-family:var(--display);letter-spacing:.06em}
 .album-cover-back[hidden]{display:none}
}
#shell .arena[data-venue] .album-cover-back{color:#8a2318;font-size:13px}
/* Sound settings: Music and Sound FX switches above the speaker button. */
#shell .sound-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:30;display:grid;gap:6px;min-width:170px;padding:10px;background:#0b1119f2;border:2px solid #0a0f16;border-radius:10px;box-shadow:0 6px 0 #0a0f16}
#shell .sound-menu[hidden]{display:none}
#shell .sound-menu button{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border:2px solid #0a0f16;border-radius:7px;background:#2f4152;color:#f6f3ea;font-family:var(--display);font-size:13px;letter-spacing:.05em;cursor:pointer}
#shell .sound-menu button span{padding:1px 7px;border-radius:999px;background:#ff8d8d;color:#1c1712;font-size:11px}
#shell .sound-menu button[aria-checked=true] span{background:#7be08a}
#shell .sound-menu small{font-family:var(--display);font-size:10px;letter-spacing:.06em;color:#cfd8d3;opacity:.7;text-align:center}
#shell .home-privacy{position:absolute;left:12px;bottom:8px;z-index:3;font-family:var(--display);font-size:11px;letter-spacing:.06em;color:#f6f3eaaa;text-decoration:none}
#shell .home-privacy:hover{color:#ffd84a}
#shell .result-ad{display:block;margin:6px auto 0}
#shell .result-ad[hidden]{display:none}
#shell .home-version{position:absolute;left:68px;bottom:8px;z-index:3;font-family:var(--display);font-size:11px;letter-spacing:.06em;color:#f6f3ea88;pointer-events:none}
/* Save slots. */
#shell .arena[data-venue]{
 .slots-card{max-width:640px;width:calc(100% - 32px)}
 .slot-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
 .slot-card{display:grid;justify-items:center;align-content:start;gap:4px;min-height:190px;padding:10px 8px;border:3px solid #0a0f16;border-radius:12px;background:linear-gradient(#2f4152,#1e2b38);color:#f6f3ea;font-family:var(--display);cursor:pointer;box-shadow:0 4px 0 #0a0f16}
 .slot-card:hover{filter:brightness(1.08)}
 .slot-card.is-current{outline:3px solid var(--venue-accent,#ffd84a);outline-offset:2px}
 .slot-card.is-empty{background:#0a0f1640;border-style:dashed}
 .slot-card canvas{width:72px;height:66px}
 .slot-card strong{font-size:17px;font-weight:400}
 .slot-card small{font-size:10px;letter-spacing:.06em;color:var(--venue-accent,#ffd84a);text-align:center}
 .slot-number{font-size:10px;letter-spacing:.12em;opacity:.7}
 .slot-card .slot-plus{font-size:44px;line-height:66px;opacity:.6}
 @media (max-width:560px){.slot-list{grid-template-columns:1fr}.slot-card{min-height:0}}
}
#shell .home-install{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;padding:6px 14px;border:2px solid #0a0f16;border-radius:999px;background:#ffd84a;color:#1c1712;font-family:var(--display);font-size:12px;letter-spacing:.06em;box-shadow:0 3px 0 #0a0f16;cursor:pointer}
#shell .home-install[hidden]{display:none}