/* Compact game menus, shared with the rooftop art direction. */
:root { --ink:#17262f; --ink-soft:#20343e; --ink-raised:#2a414b; --paper:#f0e9db; --muted:#acbdc2; --line:rgba(218,229,225,.16); --lime:#d9e998; --display:'Avenir Next','Segoe UI',sans-serif; --body:'Avenir Next','Segoe UI',sans-serif; }
body {background:#17262f;}
.cosmetic-shop{margin-top:48px;padding-top:32px;border-top:2px solid #53666c;}
.cosmetic-shop-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.cosmetic-shop-heading h2{font-size:clamp(28px,4vw,46px);margin:4px 0 12px;}
.cosmetic-shop-note{max-width:68ch;color:#c4cccd;line-height:1.6;}
.sound-setting{display:flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap;cursor:pointer;}
.sound-setting input{accent-color:#f4c76a;width:20px;height:20px;}
.match-sound-button{position:absolute;top:72px;left:12px;min-width:72px;min-height:44px;padding:8px;font-size:10px;pointer-events:auto;}
.cosmetic-preview{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:150px;margin:24px 0 12px;padding:24px;background:#0d1b23;border-left:4px solid #f4c76a;}
.cosmetic-preview>span,.cosmetic-preview>strong{position:relative;z-index:1;}
.cosmetic-preview>span{font-size:10px;letter-spacing:.18em;color:#bdc8c9;}
.cosmetic-preview>strong{font-size:clamp(22px,3vw,36px);color:#fff4ba;}
.cosmetic-preview-sparks{position:absolute;right:15%;top:60%;width:1px;height:1px;color:#f4c76a;}
.cosmetic-preview-sparks i{position:absolute;width:4px;height:16px;background:currentColor;transform:rotate(var(--angle)) translateY(-46px);opacity:.6;}
.cosmetic-preview-sparks i:nth-child(3n){height:7px;}
.cosmetic-preview-sparks i:nth-child(1){--angle:0deg}.cosmetic-preview-sparks i:nth-child(2){--angle:30deg}.cosmetic-preview-sparks i:nth-child(3){--angle:60deg}.cosmetic-preview-sparks i:nth-child(4){--angle:90deg}.cosmetic-preview-sparks i:nth-child(5){--angle:120deg}.cosmetic-preview-sparks i:nth-child(6){--angle:150deg}.cosmetic-preview-sparks i:nth-child(7){--angle:180deg}.cosmetic-preview-sparks i:nth-child(8){--angle:210deg}.cosmetic-preview-sparks i:nth-child(9){--angle:240deg}.cosmetic-preview-sparks i:nth-child(10){--angle:270deg}.cosmetic-preview-sparks i:nth-child(11){--angle:300deg}.cosmetic-preview-sparks i:nth-child(12){--angle:330deg}
.cosmetic-preview[data-style=electric] .cosmetic-preview-sparks{color:#69d9f0;}
.cosmetic-preview[data-style=confetti] i:nth-child(3n){background:#ff7d62;}.cosmetic-preview[data-style=confetti] i:nth-child(3n + 1){background:#69d9f0;}
.cosmetic-preview[data-style=music] .cosmetic-preview-sparks{color:#dce985;}
.cosmetic-preview.is-previewing i{animation:locker-spark 1.3s ease-out both;}
@keyframes locker-spark{0%{transform:rotate(var(--angle)) translateY(-8px);opacity:0;}20%{opacity:1;}100%{transform:rotate(var(--angle)) translateY(-110px);opacity:0;}}
.cosmetic-status{min-height:44px;color:#f4c76a;font-size:13px;line-height:1.5;}
.cosmetic-shop-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
.cosmetic-category{min-width:0;}.cosmetic-category h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px;}
.cosmetic-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:20px 0;border-top:1px solid #53666c;}
.cosmetic-symbol{display:grid;place-items:center;align-self:start;width:42px;height:42px;background:#263d48;color:#f4c76a;font-size:28px;}
.cosmetic-symbol-electric,.cosmetic-symbol-night-drive{color:#69d9f0;}.cosmetic-symbol-confetti,.cosmetic-symbol-samba{color:#ff9e77;}
.cosmetic-description h4{margin:0 0 6px;font-size:19px;}.cosmetic-description p{margin:0 0 8px;color:#c4cccd;font-size:13px;line-height:1.45;min-height:38px;}.cosmetic-description small{color:#a6b4b8;font-size:10px;}
.cosmetic-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;}
.cosmetic-actions button{min-height:44px;padding:8px 14px;border:1px solid #728185;background:#263d48;color:#fff4ba;font:inherit;font-size:12px;cursor:pointer;}
.cosmetic-actions button:hover:not(:disabled){background:#405965;}.cosmetic-actions button:active:not(:disabled){transform:translateY(1px);}
.cosmetic-actions button:disabled{opacity:.55;cursor:default;}.cosmetic-actions button[aria-pressed=true]{opacity:1;background:#f4c76a;color:#17262f;border-color:#f4c76a;}
.cosmetic-actions button:focus-visible,.sound-setting input:focus-visible{outline:2px solid #fff4ba;outline-offset:3px;}
@media(max-width:760px){.cosmetic-shop-items{grid-template-columns:minmax(0,1fr);gap:20px;}.cosmetic-shop-heading{align-items:flex-start;flex-direction:column;gap:0;}.cosmetic-preview{min-height:130px;padding:18px;}.cosmetic-preview-sparks{right:12%;opacity:.6;}.cosmetic-shop{margin-top:32px;padding-top:24px;}}
@media(prefers-reduced-motion:reduce){.cosmetic-preview.is-previewing i{animation:none;}}
.topbar {min-height:66px;padding:0 30px;background:#1b2d36;backdrop-filter:none;}
.brand {font-size:18px;font-weight:800;letter-spacing:-.6px;}
.brand-slashes {font-size:23px;color:#d9be97;}
.nav-button {font-size:12px;letter-spacing:.06em;padding:22px 19px;}
.wallet {font-size:14px;min-width:100px;border:0;clip-path:none;background:transparent;}
.screen {max-width:1280px;padding:28px 30px 40px;min-height:calc(100dvh - 66px);}
.screen h1 {font-family:var(--display);font-size:28px!important;line-height:1.15!important;font-weight:750;letter-spacing:-.8px;text-transform:none;margin:6px 0 12px;}
.screen h2 {font-family:var(--display);font-size:19px!important;line-height:1.3!important;letter-spacing:-.3px;font-weight:700;text-transform:none;}
.kicker {font-size:10px;letter-spacing:.15em;color:#b3c5c7;line-height:1.5;}
.lede {font-size:13px;line-height:1.6;max-width:none;margin:0 0 20px;color:#b9c8ca;}
.play-screen {grid-template-columns:minmax(0,1.3fr) minmax(320px,.85fr);align-items:start;gap:34px;}
.play-copy {min-width:0;}
.court-preview {position:relative;overflow:hidden;border:1px solid #4a6066;border-radius:12px;background:#78949d;margin:18px 0 22px;}
.court-preview>img {display:block;width:100%;height:235px;object-fit:cover;}
.court-caption {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;background:#243c46;color:var(--paper);}
.court-caption>span:first-child {display:grid;gap:3px;}
.court-caption small {font-size:8px;letter-spacing:.14em;color:#a7bec3;}
.court-caption strong {font-size:15px;font-weight:700;}
.court-caption>span:last-child {font-size:10px;color:#bfcdce;}
.court-caption i {font-style:normal;padding:0 5px;color:#687f86;}
.difficulty-picker {margin:0 0 16px;gap:7px;}
.difficulty-picker legend {font-size:11px;letter-spacing:.06em;margin-bottom:9px;}
.difficulty-picker label>span {min-height:56px;padding:10px 12px;border-radius:7px;background:#20343d;clip-path:none;}
.difficulty-picker strong {font-size:12px;}
.difficulty-picker small {font-size:10px;line-height:1.35;margin-top:3px;}
.primary-action {min-height:49px;padding:0 22px;clip-path:none;border-radius:7px;font-size:13px;font-weight:800;letter-spacing:.025em;background:#d9e998;color:#20333a;}
.start-match-button {width:100%;margin:0;justify-content:space-between;}
.button-arrow {font-size:22px;}
.keyboard-guide {display:flex;flex-wrap:wrap;gap:10px 14px;margin:16px 0 0;font-size:10px;color:#99b0b8;}
.keyboard-guide kbd {font-family:var(--body);font-size:10px;min-width:20px;padding:3px 5px;border-radius:3px;}
.club-select {padding-top:8px;min-width:0;}
.club-select::before {display:none;}
.section-heading {margin-bottom:17px;}
.section-heading h2 {margin-top:4px;}
.selection-index {font-size:11px;}
.team-style-list {display:grid;gap:7px;border-top:0;}
.team-style-button {min-height:0;padding:12px 13px;grid-template-columns:5px minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:7px;clip-path:none;background:#20343d;}
.team-style-button strong {font-size:13px;font-family:var(--body);font-weight:750;line-height:1.2;}
.team-style-button small {font-size:10px;line-height:1.45;margin-top:4px;}
.team-reference {display:none;}
.lineup-preview {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px;padding-top:12px;border:0;border-top:1px solid var(--line);background:none;}
.lineup-mini {display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:9px 4px;background:#20343d;border-radius:6px;}
.lineup-mini strong {font-size:12px;font-family:var(--body);}
.lineup-mini small {font-size:8px;line-height:1.4;}
.lineup-mini .head-avatar {--avatar-size:66px;inline-size:66px;block-size:66px;}
.playbook {margin-top:20px;border-top:1px solid var(--line);padding-top:15px;font-size:11px;line-height:1.65;color:#aebfc4;}
.playbook summary {cursor:pointer;font-size:12px;font-weight:700;color:var(--paper);}
.playbook p {margin:10px 0;}
.playbook strong {color:#d7e1de;font-weight:650;}
.screen-heading {margin-bottom:25px;align-items:center;gap:25px;}
.screen-heading>p {font-size:12px;max-width:450px;line-height:1.65;}
.squad-slot {min-height:128px;border-radius:8px;clip-path:none;}
.squad-slot h3,.squad-slot strong {font-family:var(--body);font-size:20px;}
.player-collection {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.player-card {min-height:350px;clip-path:none;border-radius:10px;padding:15px;background:linear-gradient(160deg,#324e58,#20343d 60%);}
.card-portrait {min-height:142px;}
.card-portrait .head-avatar {--avatar-size:142px;inline-size:142px!important;block-size:142px!important;}
.card-identity h3 {font-family:var(--body);font-size:21px;letter-spacing:.01em;line-height:1.2;}
.card-rating {font-family:var(--body);font-size:27px;font-weight:800;}
.card-rarity,.role-band {font-size:9px;letter-spacing:.08em;}
.card-player-name {font-size:11px;}
.card-style {font-size:10px;line-height:1.5;}
.head-avatar.portrait-3d {position:relative;display:block;border-radius:14%;background:linear-gradient(150deg,#607985,#304a53);border:1px solid rgba(211,226,225,.22);overflow:hidden;box-shadow:none;}
.head-avatar.portrait-3d:before,.head-avatar.portrait-3d:after {display:none;}
.portrait-3d>img {display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;transform:scale(1.08);}
.card-portrait .portrait-3d {border:0;background:transparent;overflow:visible;}
.active-player-avatar-shell {border-radius:8px;}
.active-player-panel {min-width:210px;background:rgba(23,38,47,.92);border-radius:7px;border:1px solid #62776b;padding:10px;}
.active-player-panel strong {font-size:17px;font-weight:800;}
.active-player-panel small {font-size:8px;}
.scoreboard {clip-path:none;border-radius:7px;min-height:58px;background:rgba(23,38,47,.94);}
.scoreboard>strong {font-size:30px;font-weight:800;}
.hud-button {border-radius:6px;background:rgba(23,38,47,.94);}
.announcement {font-size:clamp(24px,4vw,48px);font-weight:800;letter-spacing:-1px;}
.announcement.is-player-switch {font-size:13px;}
.match-overlay-card {border-radius:12px;padding:28px;max-width:460px;}
.match-overlay-card h2 {font-size:27px;letter-spacing:-.5px;line-height:1.15;}
.match-overlay-card p {font-size:13px;line-height:1.6;}
.desktop-action-guide {font-size:9px;gap:9px;flex-wrap:wrap;max-width:650px;justify-content:flex-end;}
.desktop-action-guide kbd {font-size:10px;padding:4px;border-radius:3px;}
.action-meter {border-radius:5px;}
#tactical-map {position:absolute;right:22px;top:76px;width:134px;height:80px;border:1px solid var(--line);border-radius:6px;opacity:.86;}
.pack-stage {padding-top:12px;gap:40px;min-height:400px;}
.pack-copy>p {font-size:13px;line-height:1.6;}
.pack-face>strong {font-size:62px;}.pack-face>em {font-size:32px;}
.pack-reveal {
  overflow:hidden;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  height:100dvh;
  align-items:center;
}
.pack-reveal-backdrop {background:rgba(16,29,37,.98);}
.pack-reveal-content {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
  height:min(760px,100%);
  min-height:0;
}
.pack-reveal-header .kicker {margin:0 0 5px;}
.pack-reveal-content h2 {margin:0;font-size:26px;line-height:1.2;letter-spacing:-.5px;text-transform:none;}
.reveal-hint {margin:7px 0 0;font-size:12px;line-height:1.4;color:var(--muted);}
.pack-reveal .reveal-cards {
  min-height:0;
  max-width:none;
  margin:0;
  padding:8px 6px 16px;
  overflow:auto;
  overscroll-behavior:contain;
  align-content:start;
  align-items:start;
  grid-auto-rows:max-content;
  scrollbar-width:thin;
}
.reveal-cards:focus-visible {outline:2px solid var(--lime);outline-offset:-2px;}
.pack-reveal .player-card {min-width:0;width:100%;height:max-content;grid-template-rows:repeat(5,auto);text-align:left;}
.pack-reveal .player-card.is-best-pull {box-shadow:inset 0 0 0 1px var(--rarity-color);}
.pack-reveal-footer {padding-top:10px;border-top:1px solid var(--line);}
.pack-reveal-footer .duplicate-summary {min-height:0;margin:0 0 10px;font-size:12px;line-height:1.5;}
.pack-reveal-footer .continue-button {min-width:0;width:min(320px,100%);}
.history-stat strong {font-size:30px;}
.history-match {border-radius:7px;}
.through-action {grid-column:1;grid-row:1;}
.shield-action {grid-column:1;grid-row:3;}
.skill-action {grid-column:3;grid-row:3;display:grid;place-content:center;gap:2px;}
.skill-action output {font-size:7px;text-transform:none;color:#d9e998;}
.shield-action.is-held {background:#486875;transform:scale(.94);}
.skill-action.is-cooling {opacity:.5;}
.touch-actions .touch-action {max-width:100%;min-height:0;}
.touch-action[hidden] {display:none!important;}
.match-screen,.match-screen * {touch-action:none!important;overscroll-behavior:none;}
.touch-actions .touch-action {transition:transform 90ms ease-out,background-color 90ms ease-out,border-color 90ms ease-out;}
.touch-actions .touch-action.is-feedback,.touch-actions .touch-action.is-held {transform:scale(.91);background-color:#53666c;border-color:#fff4ba;}
.goal-replay {position:absolute;top:96px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;max-width:calc(100% - 24px);padding:4px 6px 4px 14px;background:#17262f;color:#fff4ba;z-index:4;}
.goal-replay[hidden] {display:none!important;}
.match-screen.is-goal-presentation :is(.active-player-panel,.action-meters,#tactical-map,.touch-controls) {visibility:hidden;}
.goal-replay strong {font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.goal-replay button {min-width:56px;min-height:44px;border:1px solid #728185;background:#263d48;color:#fff4ba;cursor:pointer;}
@media(max-width:760px) {.goal-replay{top:186px;}}
@media(prefers-reduced-motion:reduce) {.touch-actions .touch-action {transition:none;}.touch-actions .touch-action.is-feedback,.touch-actions .touch-action.is-held {transform:none;}}
.game-viewport .player-shot-meter {position:absolute;left:0;top:0;display:block;width:56px;height:6px;min-width:0;padding:0;pointer-events:none;z-index:2;user-select:none;-webkit-user-select:none;background:none;border:0;box-shadow:none;}
.game-viewport .player-shot-meter[hidden] {display:none!important;}
.player-shot-meter .meter-track {display:block;width:100%;height:6px;margin:0;background:rgba(15,30,39,.9);border:1px solid rgba(255,255,255,.65);}
.action-meters {grid-template-columns:minmax(0,1fr);}
.touch-controls,.touch-controls *,.match-hud,.match-hud * {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.touch-actions .touch-action * {pointer-events:none;}
@media(max-width:1060px) {
  .play-screen {gap:22px;grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr);}
  .player-collection {grid-template-columns:repeat(3,minmax(0,1fr));}
  .screen {padding:24px;}
}
@media(max-width:760px) {
  .topbar {padding:0 16px;min-height:64px;}
  .brand {font-size:16px;}.wallet{font-size:12px;}
  .screen {padding:20px 16px 90px;}
  .screen h1 {font-size:25px!important;}
  .play-screen {display:flex;flex-direction:column;gap:25px;}
  .play-copy,.club-select {width:100%;}
  .court-preview {margin:15px 0;}.court-preview>img{height:auto;aspect-ratio:1.7;}.court-caption {padding:10px 12px;}
  .court-caption>span:last-child {font-size:9px;}
  .difficulty-picker small {font-size:9px;}.difficulty-picker label>span {padding:9px 7px;}
  .keyboard-guide {display:none;}
  .primary-nav {background:#20343d;border-top:1px solid #4b6268;}
  .nav-button {padding:12px 4px;font-size:10px;letter-spacing:.03em;}
  .lineup-mini .head-avatar {--avatar-size:64px;inline-size:64px;block-size:64px;}
  .screen-heading {display:block;margin-bottom:20px;}.screen-heading>p {font-size:12px;}
  .player-collection {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .player-card {min-height:300px;padding:11px;}.card-portrait{min-height:110px;}
  .card-portrait .head-avatar{--avatar-size:110px;inline-size:110px!important;block-size:110px!important;}
  .card-style{font-size:9px;}.card-identity h3{font-size:18px;}.card-rating{font-size:23px;}
  .scoreboard {min-height:48px;}.scoreboard>strong{font-size:25px;}
  .active-player-panel {min-width:174px;max-width:calc(100% - 200px);padding:8px;}
  .active-player-panel strong{font-size:14px;}.active-player-panel small{font-size:7px;}
  .active-player-panel .portrait-3d{border-radius:6px;}
  .touch-action{background:rgba(23,38,47,.86);font-size:9px;letter-spacing:0;}
  .touch-action-small{font-size:7px;}.switch-action small{font-size:6px;}
  #tactical-map{top:122px;right:12px;width:96px;height:57px;}
  .pack-stage{display:flex;flex-direction:column;gap:20px;}.pack-copy{width:100%;}
  .pack-visual{transform:scale(.8);margin:-15px auto;}
  .pack-reveal-content {height:100%;gap:8px;}
  .pack-reveal .reveal-cards {grid-template-columns:minmax(0,1fr);gap:14px;}
  .pack-reveal .player-card {width:min(360px,100%);justify-self:center;}
  .pack-reveal-footer .continue-button {width:100%;}
}
@media(max-width:360px) {
  .court-caption {gap:6px;}.court-caption>span:last-child{font-size:8px;}
  .active-player-panel{min-width:168px;}
  .card-portrait .head-avatar{--avatar-size:96px;inline-size:96px!important;block-size:96px!important;}
  .touch-action{font-size:8px;}.touch-action-small{font-size:7px;}
}