/* ===================================================================== * GGFC Matchday — public widget stylesheet * Alpha 140 * * Rewrite goals (no markup/class changes — drop-in replacement): * 1. Single design-token layer so light + dark share one source of truth. * 2. One ordered responsive ladder (1150 / 900 / 650 / 480 / 400) instead * of the four overlapping @media blocks that accumulated over earlier * alphas (this also fixes the small-phone grid that used to stay * 2-up because a later 480px rule overrode the 380px single-column rule). * 3. Consistent card radius / shadow / border / focus treatment. * 4. Keyboard :focus-visible rings + prefers-reduced-motion support. * * Light mode renders identically to alpha 120. Dark mode is preserved with * its surface/border/text shades harmonised onto the same tokens — tweak the * dark token block below if you want to fine-tune any single shade. * ===================================================================== */ .ggfc-mp{ /* fonts */ --mp-font-display:"Readex Pro","Roboto",Arial,sans-serif; --mp-font-body:"Roboto",Arial,sans-serif; /* brand */ --mp-green:#004d39; /* primary brand / accent text */ --mp-green-2:#006149; /* lighter brand, eyebrow */ --mp-green-ink:#003f30; /* darker brand for hover text */ --mp-gold:#f2c200; /* accent "soft" state (is-open / complete / community) */ --mp-accent-text:#004d39; --mp-accent-bg:#e8f3ee; --mp-accent-border:#c8dfd5; /* surfaces */ --mp-surface:#fff; /* primary cards */ --mp-surface-2:#f7f2ed; /* cream inputs / pills / chips */ --mp-surface-3:#ede7df; /* player preview backdrop */ --mp-surface-pop:#fff; /* popovers */ --mp-surface-tint:#fbf8f4; /* collapsed summary bar */ --mp-surface-muted:#f1ebe4; /* muted potm / summary hover */ /* borders */ --mp-border:#e5d8cb; --mp-border-soft:#eadfd3; --mp-border-hair:#eee1d5; --mp-border-strong:#d8c6b6; /* text */ --mp-ink:#151515; /* hero h2 / strong headings */ --mp-ink-2:#1f1d1a; /* labels, consensus h3 */ --mp-ink-3:#25201b; /* popular b, submitted strong */ --mp-text:#3d3540; /* body headings, select text */ --mp-text-2:#4f4740; --mp-text-dim:#756a60; /* descriptions */ --mp-text-soft:#5f5a55; /* privacy */ --mp-text-mute:#8a8179; /* hint */ /* feedback */ --mp-warn-text:#8a3a12; --mp-warn-bg:#fbe5dc; --mp-warn-border:#eccab6; --mp-dupe-border:#d8743f; --mp-dupe-bg:#fbeadf; --mp-dupe-ring:rgba(216,116,63,.18); /* progress bars / tracks */ --mp-track:#eee1d5; --mp-prog-fill:rgba(0,97,73,.08); /* radii */ --mp-radius:13px; --mp-radius-card:15px; --mp-radius-lg:16px; --mp-radius-sm:12px; --mp-pill:999px; /* shadows */ --mp-shadow-block:0 2px 8px rgba(0,0,0,.065),0 10px 26px rgba(50,35,20,.045); --mp-shadow-card:0 1px 4px rgba(58,38,18,.035); --mp-shadow-card-hover:0 6px 14px rgba(58,38,18,.065); --mp-shadow-pop:0 10px 28px rgba(37,32,27,.10); /* focus */ --mp-focus-shadow:0px 2px 0px 0px hsla(var(--xf-paletteAccent1)); /* select arrow (light) */ --mp-arrow:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 20 20%22%3E%3Cpath fill=%22%235f5a55%22 d=%22M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z%22/%3E%3C/svg%3E"); margin:12px 0 16px; font-family:var(--mp-font-body); } .ggfc-mp *{box-sizing:border-box} /* ---------- shell ---------- */ .ggfc-mp.block .block-container,.ggfc-mp .block-container{overflow:hidden;border-radius:var(--mp-radius)!important;background:var(--mp-surface);border:0!important;box-shadow:var(--mp-shadow-block)!important} .ggfc-mp.is-collapsed .ggfc-mp__panel{display:none} /* ---------- hero ---------- */ .ggfc-mp__hero{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;background:var(--mp-surface);color:var(--mp-ink-2);border-bottom:1px solid var(--mp-border);border-radius:var(--mp-radius) var(--mp-radius) 0 0} .ggfc-mp.is-collapsed .ggfc-mp__hero{border-bottom:0;border-radius:var(--mp-radius)} .ggfc-mp__hero-main{min-width:0} .ggfc-mp__hero h2{margin:2px 0 3px;font-family:var(--mp-font-display);font-size:17px;line-height:1.18;font-weight:800;color:var(--mp-ink);letter-spacing:-.018em} .ggfc-mp__hero p{margin:0;color:var(--mp-text-soft);font-size:12.5px;line-height:1.35;max-width:760px} .ggfc-mp__eyebrow{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.10em;font-size:9.5px;color:var(--mp-green-2);font-weight:850;opacity:.95} .ggfc-mp__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mp-gold);box-shadow:0 0 0 3px rgba(242,194,0,.18)} .ggfc-mp__hero-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} /* ---------- primary button ---------- */ .ggfc-mp .button.button--primary{border-radius:var(--mp-pill)!important;padding:13px 19px!important;font-family:var(--mp-font-display)!important;font-weight:800!important;font-size:14.5px!important;letter-spacing:-.01em!important;min-width:112px!important;min-height:48px!important;line-height:1.1!important;border:0!important;color:#fff!important;background:linear-gradient(180deg,#006149 0%,#004d39 100%)!important;box-shadow:0 2px 3px rgba(0,0,0,.14),0 7px 16px rgba(0,77,57,.20)!important;transform:translateY(0);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important} .ggfc-mp .button.button--primary:hover{color:#fff!important;background:linear-gradient(180deg,#007153 0%,#00533e 100%)!important;box-shadow:0 3px 5px rgba(0,0,0,.15),0 10px 21px rgba(0,77,57,.24)!important;filter:none!important;transform:translateY(-1px)} .ggfc-mp .button.button--primary:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.20),0 5px 12px rgba(0,77,57,.22)!important} .ggfc-mp .button.button--primary .button-text{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:inherit;font-weight:inherit;line-height:1} /* toggle uses the XF CTA colour, with explicit dark-surface fallbacks (set by JS) */ .ggfc-mp__toggle{min-height:48px!important;padding-left:20px!important;padding-right:20px!important} .ggfc-mp .ggfc-mp__toggle.button--primary{position:relative!important;overflow:hidden!important;color:hsla(var(--xf-textColorEmphasized))!important;background:hsla(var(--xf-buttonCtaBg))!important;background-color:hsla(var(--xf-buttonCtaBg))!important;border:0!important;text-shadow:none!important;box-shadow:0 6px 14px rgba(25,39,52,.12)!important} .ggfc-mp .ggfc-mp__toggle.button--primary:before,.ggfc-mp .ggfc-mp__toggle.button--primary:after{content:none!important} .ggfc-mp .ggfc-mp__toggle.button--primary .button-text{position:relative;z-index:1} .ggfc-mp .ggfc-mp__toggle.button--primary:hover,.ggfc-mp .ggfc-mp__toggle.button--primary:focus{color:hsla(var(--xf-textColorEmphasized))!important;background:hsla(var(--xf-buttonCtaBg))!important;background-color:hsla(var(--xf-buttonCtaBg))!important;border-color:transparent!important;box-shadow:0 7px 16px rgba(25,39,52,.16)!important} [data-color-scheme="dark"] .ggfc-mp .ggfc-mp__toggle.button--primary,.styleType--dark .ggfc-mp .ggfc-mp__toggle.button--primary,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__toggle.button.button--primary,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__toggle.button--primary,.ggfc-mp.ggfc-mp--dark-surface button.ggfc-mp__toggle{color:#f7f2ed!important;background:#243746!important;background-color:#243746!important;border:0!important;text-shadow:none!important;box-shadow:0 7px 16px rgba(0,0,0,.30)!important} [data-color-scheme="dark"] .ggfc-mp .ggfc-mp__toggle.button--primary:hover,[data-color-scheme="dark"] .ggfc-mp .ggfc-mp__toggle.button--primary:focus,.styleType--dark .ggfc-mp .ggfc-mp__toggle.button--primary:hover,.styleType--dark .ggfc-mp .ggfc-mp__toggle.button--primary:focus,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__toggle.button.button--primary:hover,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__toggle.button--primary:hover,.ggfc-mp.ggfc-mp--dark-surface button.ggfc-mp__toggle:hover,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__toggle.button.button--primary:focus,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__toggle.button--primary:focus,.ggfc-mp.ggfc-mp--dark-surface button.ggfc-mp__toggle:focus{color:#fff!important;background:#2d4354!important;background-color:#2d4354!important;border:0!important;box-shadow:0 8px 18px rgba(0,0,0,.34)!important} /* ---------- kickoff meta chip ---------- */ .ggfc-mp__meta{background:var(--mp-surface-2);border:1px solid var(--mp-border);border-radius:var(--mp-pill);padding:7px 11px;min-width:0;text-align:left;color:var(--mp-ink-2);white-space:nowrap} .ggfc-mp__meta b{display:inline;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mp-text-dim);margin-right:5px} .ggfc-mp__meta span{display:inline;font-weight:850;font-size:12px;color:var(--mp-ink)} /* ---------- panel + form ---------- */ .ggfc-mp__panel{background:var(--mp-surface);border-top:1px solid var(--mp-border);border-radius:0 0 var(--mp-radius) var(--mp-radius)} .ggfc-mp__label{display:block;margin-bottom:7px;font-weight:800;font-size:13px;letter-spacing:.01em;color:var(--mp-text)} .ggfc-mp__formation{max-width:240px;border-radius:var(--mp-radius-sm)!important;background:var(--mp-surface-2)!important;border-color:var(--mp-border)!important;min-height:42px;color:var(--mp-text)!important} .ggfc-mp__slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:12px;margin:15px 0} .ggfc-mp__slot{position:relative;border:1px solid var(--mp-border);border-radius:var(--mp-radius-card);background:var(--mp-surface);padding:10px;box-shadow:var(--mp-shadow-card);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} .ggfc-mp__slot:hover{border-color:var(--mp-border-strong);box-shadow:var(--mp-shadow-card-hover);transform:translateY(-1px)} .ggfc-mp__slot label{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:850;margin-bottom:8px;color:var(--mp-ink-2);text-transform:uppercase;letter-spacing:.035em} .ggfc-mp__slot label:after{content:"Socceroos";font-size:10px;font-weight:800;color:var(--mp-text-dim);background:var(--mp-surface-2);border:1px solid var(--mp-border);border-radius:var(--mp-pill);padding:3px 8px;text-transform:none;letter-spacing:0} .ggfc-mp__player-preview{display:flex;align-items:center;justify-content:center;min-height:118px;padding:9px;border-radius:var(--mp-radius);background:var(--mp-surface-3);border:1px solid #dfd0c2;margin-bottom:9px;overflow:hidden} .ggfc-mp__player-preview.is-empty{background:var(--mp-surface-3)} .ggfc-mp__player-avatar{width:116px;height:116px;border-radius:var(--mp-radius-lg);overflow:hidden;background:transparent;display:flex;align-items:flex-end;justify-content:center;box-shadow:none;border:0} .ggfc-mp__player-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;image-rendering:auto;transform:translateZ(0)} .ggfc-mp__player-avatar img.ggfc-mp__placeholder{object-fit:contain;object-position:center bottom;opacity:.96;transform:none} .ggfc-mp__player-avatar span{width:78px;height:78px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:20px;letter-spacing:.04em;background:linear-gradient(135deg,#004d39,#006149)} .ggfc-mp__player-select{width:100%;border-radius:var(--mp-radius-sm)!important;font-weight:750!important;background:var(--mp-surface-2)!important;border-color:var(--mp-border)!important;color:var(--mp-text)!important;min-height:42px!important;font-size:14px!important} /* native select arrow */ .ggfc-mp select.ggfc-mp__formation,.ggfc-mp select.ggfc-mp__player-select,.ggfc-mp select.ggfc-mp__potm-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-image:var(--mp-arrow)!important;background-repeat:no-repeat!important;background-position:right 13px center!important;background-size:12px 12px!important;padding-right:38px!important} .ggfc-mp select.ggfc-mp__formation::-ms-expand,.ggfc-mp select.ggfc-mp__player-select::-ms-expand,.ggfc-mp select.ggfc-mp__potm-select::-ms-expand{display:none} .ggfc-mp select.ggfc-mp__formation::-webkit-calendar-picker-indicator,.ggfc-mp select.ggfc-mp__player-select::-webkit-calendar-picker-indicator,.ggfc-mp select.ggfc-mp__potm-select::-webkit-calendar-picker-indicator{display:none!important} .ggfc-mp__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px} .ggfc-mp__actions .button{min-height:50px!important;padding-left:21px!important;padding-right:21px!important;font-size:14.5px!important} .ggfc-mp__actions .button:hover{filter:none!important} .ggfc-mp__hint{font-size:13px;color:var(--mp-text-mute);line-height:1.4} /* ---------- consensus / community XI ---------- */ .ggfc-mp__consensus{border-top:0;padding:0!important;margin:12px 10px 10px!important;background:transparent} .ggfc-mp__consensus h3{margin:0 0 8px;font-family:var(--mp-font-display);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--mp-ink-2)} .ggfc-mp__consensus p{margin-top:0;color:var(--mp-text-dim);font-size:14px} .ggfc-mp__consensus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .ggfc-mp__consensus-grid>div{position:relative;border:1px solid var(--mp-border);border-radius:var(--mp-radius-card);padding:12px;background:var(--mp-surface);display:grid;grid-template-columns:44px 92px 1fr;grid-template-rows:auto auto;gap:8px 12px;align-items:center;min-height:116px;box-shadow:var(--mp-shadow-card)} .ggfc-mp__consensus-grid b{grid-row:1 / span 2;font-size:12px;color:var(--mp-ink-2);font-weight:850;text-transform:uppercase;letter-spacing:.035em} .ggfc-mp__consensus-grid img{grid-row:1 / span 2;width:92px;height:92px;object-fit:cover;object-position:center top;border-radius:var(--mp-radius-lg);background:var(--mp-surface-2)} .ggfc-mp__consensus-grid span{align-self:end;font-size:13px;color:var(--mp-text-2);font-weight:650;line-height:1.2} .ggfc-mp__consensus-grid em{align-self:start;justify-self:start;font-style:normal;font-size:12px;line-height:1;font-weight:850;color:var(--mp-green);background:var(--mp-surface-2);border:1px solid var(--mp-border);border-radius:var(--mp-pill);padding:6px 9px;white-space:nowrap} .ggfc-mp__vote-link{align-self:start;justify-self:start;text-decoration:none!important;cursor:pointer} .ggfc-mp__vote-link:hover em{background:var(--mp-surface-muted);border-color:var(--mp-border)} .ggfc-mp__community-pop summary{margin-bottom:0;background:var(--mp-surface);border-color:#e0d6cc} .ggfc-mp__community-pop summary b{color:#1a1714} .ggfc-mp__community-pop summary small{color:#3d3730;font-weight:650} .ggfc-mp__community-pop summary em{color:var(--mp-green);border-color:var(--mp-accent-border);background:#eef6f2} .ggfc-mp__community-popover{margin-top:10px} .ggfc-mp__community-pop .ggfc-mp__section-head{margin-bottom:10px} /* ---------- POTM ---------- */ .ggfc-mp__potm{border-top:0;padding:16px!important;margin:12px 10px 10px;background:var(--mp-surface-2);border:1px solid var(--mp-border);border-radius:var(--mp-radius-lg);box-shadow:0 2px 8px rgba(37,32,27,.045)} .ggfc-mp__potm--muted{background:var(--mp-surface-muted);border-color:#e0d4c8;box-shadow:none} .ggfc-mp__potm--muted .ggfc-mp__section-head h3{color:#6f655c} .ggfc-mp__potm--muted .ggfc-mp__status{background:#fbf8f4;color:#7d736a;border-color:#ded1c4} .ggfc-mp__section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px} .ggfc-mp__section-head h3{margin:0 0 4px;font-family:var(--mp-font-display);font-size:18px;font-weight:850;letter-spacing:-.02em;color:var(--mp-text)} .ggfc-mp__section-head p{margin:0;color:var(--mp-text-dim);font-size:13px;line-height:1.35} .ggfc-mp__section-head--potm{margin-bottom:0} .ggfc-mp__section-head--potm+.ggfc-mp__potm-form,.ggfc-mp__section-head--potm+.ggfc-mp__potm-results{margin-top:12px} .ggfc-mp__status{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:var(--mp-pill);background:var(--mp-surface-2);border:1px solid var(--mp-border);color:var(--mp-text-dim);font-size:11px;font-weight:850;padding:7px 10px;text-transform:uppercase;letter-spacing:.04em} .ggfc-mp__status.is-open{background:var(--mp-accent-bg);border-color:var(--mp-accent-border);color:var(--mp-accent-text)} .ggfc-mp__potm-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 12px} .ggfc-mp__potm-select{flex:1;min-width:180px;border-radius:var(--mp-radius-sm)!important;background:var(--mp-surface-2)!important;border-color:var(--mp-border)!important;color:var(--mp-text)!important;min-height:46px!important;font-weight:750!important} .ggfc-mp__potm-results{display:grid;gap:9px;margin-top:10px} .ggfc-mp__potm-row{position:relative;display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;min-height:58px;padding:8px 10px;border:1px solid var(--mp-border);border-radius:14px;background:var(--mp-surface);overflow:hidden} .ggfc-mp__potm-row img{width:48px;height:48px;border-radius:var(--mp-radius-sm);object-fit:cover;object-position:center top;background:var(--mp-surface-2);z-index:1} .ggfc-mp__potm-row div{z-index:1;min-width:0} .ggfc-mp__potm-row b{display:block;color:var(--mp-text);font-size:13.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ggfc-mp__potm-row span{display:block;color:var(--mp-text-dim);font-size:12px;margin-top:2px} .ggfc-mp__potm-row em{position:absolute;left:0;top:0;bottom:0;background:var(--mp-prog-fill);border-radius:14px 0 0 14px;z-index:0} /* ---------- submitted note + edit ---------- */ .ggfc-mp__submitted-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--mp-border-hair);background:var(--mp-surface)} .ggfc-mp__submitted-note>span{flex:1 1 220px} .ggfc-mp__submitted-note strong{font-family:var(--mp-font-display);color:var(--mp-ink-3);font-size:14px;letter-spacing:-.01em} .ggfc-mp__submitted-note>span{color:var(--mp-text-dim);font-size:13px;line-height:1.45} .ggfc-mp__submitted-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto} .ggfc-mp__submitted-note .ggfc-mp__change-xi{min-height:42px!important;padding:10px 18px!important;border-radius:var(--mp-pill)!important;background:var(--mp-surface-2)!important;border:1px solid #dfd1c2!important;color:var(--mp-green)!important;box-shadow:0 1px 2px rgba(41,31,20,.05),inset 0 1px 0 rgba(255,255,255,.7)!important;font-family:var(--mp-font-display)!important;font-size:13px!important;font-weight:850!important;letter-spacing:-.01em!important;white-space:nowrap!important;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,color .16s ease!important} .ggfc-mp__submitted-note .ggfc-mp__change-xi:hover{background:#efe6dc!important;border-color:#cdbba9!important;color:var(--mp-green-ink)!important;box-shadow:0 5px 14px rgba(50,35,20,.10),inset 0 1px 0 rgba(255,255,255,.72)!important;transform:translateY(-1px)} .ggfc-mp__submitted-note .ggfc-mp__change-xi.is-editing{background:#efe5db!important;border-color:#d5bba2!important;color:#6b3b24!important;box-shadow:0 1px 2px rgba(41,31,20,.05),inset 0 1px 0 rgba(255,255,255,.62)!important} .ggfc-mp__submitted-note .ggfc-mp__change-xi.is-editing:hover{background:#e7d8c8!important;border-color:#bf9d7f!important;color:#4f2c1b!important;box-shadow:0 5px 14px rgba(50,35,20,.11)!important} .ggfc-mp__share-xi{min-height:40px!important;border-radius:var(--mp-pill)!important;font-weight:800!important} .ggfc-mp__edit-pick{border-top:1px solid #eadbd0;background:var(--mp-surface)} /* ---------- privacy / anon ---------- */ .ggfc-mp__privacy{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:var(--mp-text-soft);line-height:1.2;white-space:nowrap} .ggfc-mp__privacy input{margin:0;accent-color:var(--mp-green)} .ggfc-mp__privacy--potm{align-self:center} .ggfc-mp__anon{display:inline-flex!important;align-items:center;gap:9px;margin-top:12px;color:var(--mp-text-soft);font-size:14px;font-weight:700;line-height:1.25} .ggfc-mp__anon input{margin-right:2px} .ggfc-mp__anon .iconic-label{line-height:1.35} .ggfc-mp__anon--potm{margin-top:0;white-space:nowrap;font-size:14px} .ggfc-mp__voter-names{display:block;margin-top:6px;color:#6f6257;font-size:11.5px;line-height:1.35} /* ---------- most-picked popover ---------- */ .ggfc-mp__popular{border-top:0;background:transparent;position:relative;padding:0!important;margin:12px 10px 10px!important} .ggfc-mp__popular-pop{position:relative} .ggfc-mp__popular-pop summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid var(--mp-border-soft);border-radius:var(--mp-radius-lg);background:var(--mp-surface-tint);box-shadow:0 2px 8px rgba(37,32,27,.04);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease} .ggfc-mp__popular-pop summary::-webkit-details-marker{display:none} .ggfc-mp__popular-pop summary:hover{background:var(--mp-surface-muted)!important;border-color:#d8c9ba;box-shadow:0 3px 10px rgba(37,32,27,.055)} .ggfc-mp__popular-pop summary b{display:block;font-family:var(--mp-font-display);font-size:15px;font-weight:850;color:var(--mp-ink-3);letter-spacing:-.01em} .ggfc-mp__popular-pop summary small{display:block;margin-top:2px;font-size:12px;color:var(--mp-text-dim);font-weight:500} .ggfc-mp__popular-pop summary em{font-style:normal;white-space:nowrap;border:1px solid #ded0c2;border-radius:var(--mp-pill);background:var(--mp-surface);padding:6px 10px;font-size:12px;font-weight:800;color:var(--mp-green)} .ggfc-mp__popular-pop[open] summary{border-bottom-left-radius:10px;border-bottom-right-radius:10px} .ggfc-mp__popular-popover{margin-top:10px;padding:14px;border:1px solid var(--mp-border-soft);border-radius:var(--mp-radius-lg);background:var(--mp-surface-pop);box-shadow:var(--mp-shadow-pop)} .ggfc-mp__popular-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px} .ggfc-mp__popular-card{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:10px;border:1px solid var(--mp-border-soft);border-radius:var(--mp-radius-sm);background:var(--mp-surface)} .ggfc-mp__popular-card img{width:52px;height:52px;object-fit:contain;border-radius:var(--mp-radius-sm);background:var(--mp-surface-2)} .ggfc-mp__popular-card b{display:block;font-family:var(--mp-font-display);font-size:13px;color:var(--mp-ink-3)} .ggfc-mp__popular-card span{display:block;font-size:12px;color:#74685f;margin-top:2px} .ggfc-mp__popular-card em{display:block;height:5px;background:var(--mp-track);border-radius:var(--mp-pill);margin-top:7px;overflow:hidden} .ggfc-mp__popular-card em i{display:block;height:100%;background:var(--mp-green);border-radius:var(--mp-pill)} .ggfc-mp__popular-card .ggfc-mp__voter-names{display:block;margin-top:7px;color:#6f6257;font-size:11.5px;line-height:1.35} /* ---------- voters detail ---------- */ .ggfc-mp__voters{background:var(--mp-surface);border-top:1px solid var(--mp-border-hair)} .ggfc-mp__voters details{border:1px solid var(--mp-border);border-radius:14px;background:var(--mp-surface-2);padding:0;overflow:hidden} .ggfc-mp__voters summary{cursor:pointer;list-style:none;padding:13px 15px;font-family:var(--mp-font-display);font-weight:850;color:#181512;display:flex;justify-content:space-between;align-items:center;gap:12px} .ggfc-mp__voters summary::-webkit-details-marker{display:none} .ggfc-mp__voters summary span{font-family:var(--mp-font-body);font-size:12px;font-weight:750;color:var(--mp-text-dim)} .ggfc-mp__voters details[open] summary{border-bottom:1px solid var(--mp-border);background:var(--mp-surface)} .ggfc-mp__voters h4{margin:15px 15px 8px;font-family:var(--mp-font-display);font-size:13px;color:var(--mp-ink-2)} .ggfc-mp__voters p{margin:10px 15px;color:#6d625a} .ggfc-mp__voter-slot{margin:10px 15px 12px;padding:10px;border:1px solid var(--mp-border);border-radius:var(--mp-radius-sm);background:var(--mp-surface)} .ggfc-mp__voter-slot>strong{display:block;margin-bottom:7px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mp-text-dim)} .ggfc-mp__voter-line{display:grid;grid-template-columns:minmax(135px,230px) 34px 1fr;gap:10px;align-items:center;padding:8px 0;border-top:1px solid rgba(229,216,203,.7)} .ggfc-mp__voter-line:first-child{border-top:0} .ggfc-mp__voter-line b{font-size:13px;color:#201b16;min-width:0;overflow:hidden;text-overflow:ellipsis} .ggfc-mp__voter-line>em{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;border-radius:var(--mp-pill);background:var(--mp-green);color:#fff;font-style:normal;font-size:11px;font-weight:800;justify-self:start} .ggfc-mp__voter-line span{font-size:13px;color:var(--mp-text-soft);line-height:1.35} /* ---------- pitch (Your XI + Community XI) ---------- */ .ggfc-mp__your-xi{background:var(--mp-surface)} .ggfc-mp__your-xi-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .ggfc-mp__your-xi-head h3{margin:0;font-family:var(--mp-font-display);font-size:17px;font-weight:850;letter-spacing:-.02em;color:var(--mp-text)} .ggfc-mp__pitch{position:relative;width:100%;max-width:440px;margin:6px auto 4px;aspect-ratio:3 / 4;border-radius:var(--mp-radius-lg);overflow:hidden;background:repeating-linear-gradient(0deg,#0a7a4f 0,#0a7a4f 9.09%,#0f865a 9.09%,#0f865a 18.18%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),inset 0 0 60px rgba(0,0,0,.18),0 6px 18px rgba(0,60,40,.20)} .ggfc-mp__pitch--community{max-width:470px} .ggfc-mp__pitch-lines{position:absolute;inset:9px;border:2px solid rgba(255,255,255,.30);border-radius:10px;pointer-events:none} .ggfc-mp__pitch-lines:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.30)} .ggfc-mp__pitch-lines:after{content:"";position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.30);border-radius:50%} .ggfc-mp__pitch-spot{position:absolute;left:calc(var(--mp-x,50%) - 37px);bottom:calc(var(--mp-y,50%) - 37px);display:flex;flex-direction:column;align-items:center;gap:5px;width:74px;max-width:24%;z-index:2} .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{left:calc(var(--mp-x,50%) - 41px);bottom:calc(var(--mp-y,50%) - 40px);width:82px} .ggfc-mp__pitch-token{position:relative;width:50px;height:50px;border-radius:50%;background:#06603f;border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 8px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;overflow:hidden;clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%)} .ggfc-mp__pitch--community .ggfc-mp__pitch-token{width:54px;height:54px} .ggfc-mp__pitch-token img{width:100%;height:100%;min-width:100%;min-height:100%;object-fit:cover;object-position:center top;display:block;image-rendering:-webkit-optimize-contrast;backface-visibility:hidden} .ggfc-mp__pitch-initials{font-family:var(--mp-font-display);font-weight:900;font-size:15px;color:#fff;letter-spacing:.02em;-webkit-font-smoothing:antialiased} .ggfc-mp__pitch-slotcode{font-family:var(--mp-font-display);font-weight:850;font-size:11px;color:rgba(255,255,255,.85);-webkit-font-smoothing:antialiased} .ggfc-mp__pitch-spot.is-empty .ggfc-mp__pitch-token{background:rgba(255,255,255,.10);border-style:dashed;border-color:rgba(255,255,255,.55)} .ggfc-mp__pitch-num{display:none!important} .ggfc-mp__pitch-name{max-width:104px;padding:2px 7px;border-radius:var(--mp-pill);background:rgba(7,40,28,.88);color:#fff;font-family:var(--mp-font-display);font-weight:800;font-size:11px;line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased} .ggfc-mp__pitch--community .ggfc-mp__pitch-name{font-size:11.5px;max-width:112px} .ggfc-mp__your-xi .ggfc-mp__pitch-spot{cursor:pointer} .ggfc-mp__your-xi .ggfc-mp__pitch-spot:hover .ggfc-mp__pitch-token,.ggfc-mp__your-xi .ggfc-mp__pitch-spot:focus-visible .ggfc-mp__pitch-token{border-color:var(--mp-gold);box-shadow:0 0 0 3px rgba(242,194,0,.35),0 3px 8px rgba(0,0,0,.30)} .ggfc-mp__your-xi .ggfc-mp__pitch-spot:focus{outline:none} /* ---------- validation counter + states ---------- */ .ggfc-mp__count{display:inline-flex;align-items:center;gap:6px;font-family:var(--mp-font-display);font-weight:850;font-size:12.5px;letter-spacing:.01em;color:var(--mp-text-dim);background:var(--mp-surface-2);border:1px solid var(--mp-border);border-radius:var(--mp-pill);padding:7px 12px;white-space:nowrap} .ggfc-mp__count.is-complete{color:var(--mp-accent-text);background:var(--mp-accent-bg);border-color:var(--mp-accent-border)} .ggfc-mp__count.is-warning{color:var(--mp-warn-text);background:var(--mp-warn-bg);border-color:var(--mp-warn-border);white-space:normal} .ggfc-mp select.ggfc-mp__player-select.is-duplicate{border-color:var(--mp-dupe-border)!important;background-color:var(--mp-dupe-bg)!important;box-shadow:0 0 0 2px var(--mp-dupe-ring)!important} .ggfc-mp .button.button--primary.is-disabled,.ggfc-mp .button.button--primary:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:0 1px 2px rgba(0,0,0,.12)!important;filter:grayscale(.25)} /* ---------- keyboard focus (a11y) ---------- */ .ggfc-mp a:focus-visible, .ggfc-mp button:focus-visible, .ggfc-mp select:focus-visible, .ggfc-mp summary:focus-visible, .ggfc-mp [tabindex]:focus-visible{outline:0;box-shadow:var(--mp-focus-shadow)} .ggfc-mp select:focus-visible{box-shadow:var(--mp-focus-shadow)!important} .ggfc-mp select:focus{outline:0;box-shadow:var(--mp-focus-shadow)!important} /* ===================================================================== * Dark mode — remap tokens once, then only the rules that aren't pure * colour (image swaps, translucent specifics, option backgrounds). * ===================================================================== */ [data-color-scheme="dark"] .ggfc-mp{ --mp-green:#00bf8f; --mp-green-2:#00bf8f; --mp-green-ink:#bdeed9; --mp-accent-text:#bdeed9; --mp-accent-bg:rgba(0,97,73,.30); --mp-accent-border:rgba(0,191,143,.28); --mp-surface:rgba(255,255,255,.04); --mp-surface-2:rgba(255,255,255,.07); --mp-surface-3:rgba(255,255,255,.06); --mp-surface-pop:var(--xf-contentBg,#22323e); --mp-surface-tint:var(--xf-contentBg,rgba(255,255,255,.045)); --mp-surface-muted:rgba(255,255,255,.04); --mp-border:rgba(255,255,255,.10); --mp-border-soft:rgba(255,255,255,.10); --mp-border-hair:rgba(255,255,255,.10); --mp-border-strong:rgba(255,255,255,.16); --mp-ink:#f4f7f8; --mp-ink-2:#f4f7f8; --mp-ink-3:#f4f7f8; --mp-text:#f4f7f8; --mp-text-2:rgba(244,247,248,.82); --mp-text-dim:rgba(244,247,248,.68); --mp-text-soft:rgba(244,247,248,.72); --mp-text-mute:rgba(244,247,248,.6); --mp-track:rgba(255,255,255,.09); --mp-prog-fill:rgba(242,194,0,.10); --mp-warn-text:#f4c4a6; --mp-warn-bg:rgba(216,116,63,.18); --mp-warn-border:rgba(216,116,63,.40); --mp-dupe-border:#d8743f; --mp-dupe-bg:rgba(216,116,63,.18); --mp-dupe-ring:rgba(216,116,63,.30); --mp-shadow-block:0 10px 28px rgba(0,0,0,.30); --mp-shadow-card:none; --mp-shadow-card-hover:0 6px 16px rgba(0,0,0,.20); --mp-shadow-pop:0 14px 32px rgba(0,0,0,.22); --mp-focus-shadow:0px 2px 0px 0px hsla(var(--xf-paletteAccent1)); --mp-arrow:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 20 20%22%3E%3Cpath fill=%22%23f4f7f8%22 d=%22M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z%22/%3E%3C/svg%3E"); } [data-color-scheme="dark"] .ggfc-mp__hero{background:transparent;border-bottom-color:rgba(255,255,255,.08)} [data-color-scheme="dark"] .ggfc-mp__eyebrow{color:var(--mp-gold)} [data-color-scheme="dark"] .ggfc-mp__panel{background:transparent} [data-color-scheme="dark"] .ggfc-mp__player-preview{border-color:rgba(255,255,255,.09)} [data-color-scheme="dark"] .ggfc-mp__player-select option,[data-color-scheme="dark"] .ggfc-mp__formation option,[data-color-scheme="dark"] .ggfc-mp__potm-select option{background:#20323d;color:#f4f7f8} [data-color-scheme="dark"] .ggfc-mp__formation,[data-color-scheme="dark"] .ggfc-mp__player-select,[data-color-scheme="dark"] .ggfc-mp__potm-select{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important} [data-color-scheme="dark"] .ggfc-mp__player-avatar img.ggfc-mp__placeholder{content:url("/styles/ggfc/matchpulse/player-placeholder-dark.png");opacity:.9} [data-color-scheme="dark"] .ggfc-mp__consensus-grid img{background:transparent!important} [data-color-scheme="dark"] .ggfc-mp__community-pop summary small{color:rgba(244,247,248,.82)} [data-color-scheme="dark"] .ggfc-mp__community-pop summary em{background:rgba(0,97,73,.30);border-color:rgba(0,191,143,.28);color:#bdeed9} [data-color-scheme="dark"] .ggfc-mp__popular-pop summary:hover{background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)),var(--xf-contentBg,rgba(255,255,255,.045))!important;border-color:rgba(255,255,255,.14)} [data-color-scheme="dark"] .ggfc-mp__popular-card span,[data-color-scheme="dark"] .ggfc-mp__popular-card .ggfc-mp__voter-names,[data-color-scheme="dark"] .ggfc-mp__voter-names{color:rgba(244,247,248,.66)} [data-color-scheme="dark"] .ggfc-mp__popular-card span{color:rgba(244,247,248,.68)} [data-color-scheme="dark"] .ggfc-mp__voters summary{color:#f4f7f8} [data-color-scheme="dark"] .ggfc-mp__voter-line b{color:#f4f7f8} [data-color-scheme="dark"] .ggfc-mp__voter-line{border-top-color:rgba(255,255,255,.065)} [data-color-scheme="dark"] .ggfc-mp__submitted-note .ggfc-mp__change-xi{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.12)!important;color:#f4f7f8!important;box-shadow:0 1px 0 rgba(255,255,255,.05) inset!important} [data-color-scheme="dark"] .ggfc-mp__submitted-note .ggfc-mp__change-xi:hover{background:rgba(247,216,74,.10)!important;border-color:rgba(247,216,74,.34)!important;color:#f7d84a!important;box-shadow:0 6px 16px rgba(0,0,0,.20)!important} [data-color-scheme="dark"] .ggfc-mp__submitted-note .ggfc-mp__change-xi.is-editing{background:rgba(247,216,74,.12)!important;color:#f7d84a!important;border-color:rgba(247,216,74,.28)!important} [data-color-scheme="dark"] .ggfc-mp__submitted-note .ggfc-mp__change-xi.is-editing:hover{background:rgba(247,216,74,.18)!important;border-color:rgba(247,216,74,.44)!important;color:#ffe981!important} [data-color-scheme="dark"] .ggfc-mp__edit-pick{border-top-color:rgba(255,255,255,.10)} [data-color-scheme="dark"] .ggfc-mp__potm--muted{border-color:var(--mp-border);background:var(--mp-surface)} [data-color-scheme="dark"] .ggfc-mp__potm--muted .ggfc-mp__section-head h3{color:rgba(244,247,248,.5)} [data-color-scheme="dark"] .ggfc-mp__potm--muted .ggfc-mp__status{background:var(--mp-surface-2);color:var(--mp-text-dim);border-color:var(--mp-border)} [data-color-scheme="dark"] .ggfc-mp__community-pop summary{border-color:var(--mp-border)} [data-color-scheme="dark"] .ggfc-mp__community-pop summary b{color:#f4f7f8} [data-color-scheme="dark"] .ggfc-mp__popular-pop summary em{border-color:rgba(0,191,143,.28);background:rgba(0,97,73,.30);color:#bdeed9} /* ===================================================================== * Responsive ladder — ordered widest -> narrowest, one block each. * ===================================================================== */ /* Wide desktop: lock the XI editor to a tidy 5-up grid */ @media (min-width:1150px){ .ggfc-mp__slots{grid-template-columns:repeat(5,minmax(0,1fr))} .ggfc-mp__slot{min-width:0} } /* Tablet / small laptop */ @media (max-width:900px){ .ggfc-mp__slots{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} } /* Phones */ @media (max-width:650px){ .ggfc-mp{margin:10px 0 14px} .ggfc-mp.block .block-container,.ggfc-mp .block-container{border-radius:14px!important} .ggfc-mp__hero{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:13px 12px;gap:10px 12px;align-items:center} .ggfc-mp__hero h2{font-size:16px;line-height:1.15} .ggfc-mp__hero p{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ggfc-mp__hero-actions{justify-self:end;align-self:center} .ggfc-mp__meta{display:none} .ggfc-mp__toggle{min-width:88px!important;min-height:38px!important;padding:8px 12px!important;border-radius:var(--mp-pill)!important;font-size:12px!important} .ggfc-mp__panel .block-row{padding:12px!important} .ggfc-mp__formation{max-width:100%;width:100%;min-height:44px!important} .ggfc-mp__slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0} .ggfc-mp__slot{padding:8px;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.025)} .ggfc-mp__slot label{font-size:11px;margin-bottom:7px} .ggfc-mp__slot label:after{font-size:9px;padding:2px 6px} .ggfc-mp__player-preview{min-height:94px;padding:7px;border-radius:12px;margin-bottom:7px} .ggfc-mp__player-avatar{width:88px;height:88px;border-radius:14px} .ggfc-mp__player-select{min-height:40px!important;font-size:12.5px!important;padding-left:10px!important} .ggfc-mp__actions{gap:8px;margin-top:12px} .ggfc-mp__actions .button{width:auto;min-width:138px;min-height:46px!important;padding-left:16px!important;padding-right:16px!important;font-size:13.5px!important} .ggfc-mp__hint{font-size:12px;flex:1;min-width:160px} .ggfc-mp__submitted-note{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 10px;padding:12px!important} .ggfc-mp__submitted-note strong{font-size:13.5px;line-height:1.25} .ggfc-mp__submitted-note>span{font-size:12px;line-height:1.3;min-width:0;grid-column:1} .ggfc-mp__submitted-actions{grid-column:1 / -1;width:100%;margin-left:0} .ggfc-mp__submitted-actions .button{flex:1 1 auto} .ggfc-mp__section-head{align-items:center} .ggfc-mp__section-head h3{font-size:17px} .ggfc-mp__potm{margin-left:0;margin-right:0} .ggfc-mp__potm-form{display:grid;grid-template-columns:1fr auto;gap:8px} .ggfc-mp__potm-select{min-width:0;min-height:44px!important} .ggfc-mp__potm-form .button{min-width:96px!important;min-height:44px!important;padding:11px 14px!important;font-size:13px!important} .ggfc-mp__privacy{width:100%;white-space:normal} .ggfc-mp__consensus{margin:12px 0 10px!important;padding-top:12px} .ggfc-mp__consensus h3{font-size:18px} .ggfc-mp__consensus-grid{grid-template-columns:1fr;gap:9px} .ggfc-mp__consensus-grid>div{grid-template-columns:38px 70px 1fr;min-height:90px;padding:10px} .ggfc-mp__consensus-grid img{width:70px;height:70px;border-radius:14px} .ggfc-mp__consensus-grid span{font-size:13px} .ggfc-mp__consensus-grid em{font-size:11px;padding:5px 8px} .ggfc-mp__popular{margin:12px -8px 10px!important;padding-top:8px} .ggfc-mp__popular-pop summary{padding:12px 14px} .ggfc-mp__popular-pop summary em{font-size:11px;padding:5px 9px} .ggfc-mp__popular-popover,.ggfc-mp__community-popover{padding:10px 8px;margin-left:-4px;margin-right:-4px;border-radius:15px} .ggfc-mp__popular-grid{grid-template-columns:1fr;gap:9px} .ggfc-mp__popular-card{grid-template-columns:58px minmax(0,1fr);gap:11px;padding:10px 12px;border-radius:14px} .ggfc-mp__popular-card img{width:58px;height:58px} .ggfc-mp__popular-card b{font-size:14px;line-height:1.15} .ggfc-mp__popular-card span{font-size:12.5px} .ggfc-mp__popular-card .ggfc-mp__voter-names{font-size:12px;line-height:1.32} .ggfc-mp__voters summary{align-items:flex-start;flex-direction:column} .ggfc-mp__voter-slot{margin-left:10px;margin-right:10px} .ggfc-mp__voter-line{grid-template-columns:1fr auto;gap:4px} .ggfc-mp__voter-line span{grid-column:1 / -1} .ggfc-mp__pitch,.ggfc-mp__pitch--community{width:100%;max-width:420px} .ggfc-mp__pitch-spot,.ggfc-mp__pitch--community .ggfc-mp__pitch-spot{left:calc(var(--mp-x,50%) - 34px);bottom:calc(var(--mp-y,50%) - 32px);width:68px} .ggfc-mp__pitch-token,.ggfc-mp__pitch--community .ggfc-mp__pitch-token{width:42px;height:42px} .ggfc-mp__pitch-initials{font-size:13px} .ggfc-mp__pitch-name,.ggfc-mp__pitch--community .ggfc-mp__pitch-name{font-size:10px;max-width:88px;padding-left:6px;padding-right:6px} } /* Large phones / small phones */ @media (max-width:480px){ .ggfc-mp__hero{align-items:center} .ggfc-mp__toggle{width:auto;min-width:86px!important} .ggfc-mp__player-avatar{width:82px;height:82px} .ggfc-mp__player-preview{min-height:90px} .ggfc-mp__player-select{font-size:12px!important} .ggfc-mp__popular-popover,.ggfc-mp__community-popover{padding:10px 6px;margin-left:-10px;margin-right:-10px} .ggfc-mp__pitch,.ggfc-mp__pitch--community{max-width:calc(100vw - 34px)} } /* Narrowest phones — XI editor goes single-column (previously never applied) */ @media (max-width:400px){ .ggfc-mp__slots{grid-template-columns:1fr} .ggfc-mp__hero{grid-template-columns:1fr auto} .ggfc-mp__potm-form{grid-template-columns:1fr} .ggfc-mp__potm-form .button{width:100%} .ggfc-mp__actions .button{width:100%} .ggfc-mp__hint{width:100%;flex:auto} .ggfc-mp__player-avatar{width:92px;height:92px} .ggfc-mp__pitch,.ggfc-mp__pitch--community{max-width:calc(100vw - 28px)} .ggfc-mp__pitch-spot,.ggfc-mp__pitch--community .ggfc-mp__pitch-spot{left:calc(var(--mp-x,50%) - 32px);bottom:calc(var(--mp-y,50%) - 31px);width:64px} .ggfc-mp__pitch-name,.ggfc-mp__pitch--community .ggfc-mp__pitch-name{max-width:82px} } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion:reduce){ .ggfc-mp *,.ggfc-mp *:before,.ggfc-mp *:after{transition:none!important;animation:none!important} .ggfc-mp .button.button--primary:hover,.ggfc-mp__slot:hover,.ggfc-mp__submitted-note .ggfc-mp__change-xi:hover{transform:none!important} } /* ---------- slot voters overlay (theme-aware site-style dataList) ---------- */ .ggfc-mp-votesOverlay{ color:var(--xf-textColor,CanvasText); } .ggfc-mp-votesOverlay .block-container{ background:var(--xf-contentBg,#fff); border:1px solid var(--xf-borderColor,#e5d8cb); border-radius:13px; box-shadow:0 2px 8px rgba(0,0,0,.065),0 10px 26px rgba(50,35,20,.045); overflow:hidden; } .ggfc-mp-votesOverlay .block-body{background:var(--xf-contentBg,#fff)} .ggfc-mp-voteList .dataList-table{width:100%;border-collapse:collapse} .ggfc-mp-voteList .dataList-row{ background:var(--xf-contentBg,#fff); border-bottom:1px solid var(--xf-borderColor,#eee1d5); transition:background .16s ease; } .ggfc-mp-voteList .dataList-row:hover{background:var(--xf-contentHighlightBg,var(--xf-contentAltBg,#fbf8f4))} .ggfc-mp-voteList .dataList-row:last-child{border-bottom:0} .ggfc-mp-voteList .dataList-cell{ padding-top:8px; padding-bottom:8px; vertical-align:middle; } .ggfc-mp-voteList .dataList-cell--imageSmall{ width:58px; padding-left:12px; padding-right:8px; } .ggfc-mp-voteList .dataList-cell--main{ padding-left:2px; padding-right:14px; } .ggfc-mp-voteList .dataList-cell--main>a, .ggfc-mp-voteList .dataList-cell--main>a:visited, .ggfc-mp-voteList .dataList-cell--image>a, .ggfc-mp-voteList .dataList-cell--image>a:visited, .ggfc-mp-voteList__memberLink, .ggfc-mp-voteList__memberLink:visited{ display:block; color:var(--xf-textColor,CanvasText)!important; -webkit-text-fill-color:var(--xf-textColor,CanvasText)!important; text-decoration:none!important; opacity:1!important; visibility:visible!important; } .ggfc-mp-voteList__name, .ggfc-mp-voteList__name.username, .ggfc-mp-voteList a .ggfc-mp-voteList__name, .ggfc-mp-voteList .username{ color:var(--xf-textColor,CanvasText)!important; -webkit-text-fill-color:var(--xf-textColor,CanvasText)!important; opacity:1!important; visibility:visible!important; } .ggfc-mp-voteList .avatar.avatar--s{ width:42px; height:42px; border-radius:6px; box-shadow:none; overflow:hidden; } .ggfc-mp-voteList .avatar.avatar--s img{ width:42px; height:42px; object-fit:cover; display:block; } .ggfc-mp-voteList__anonAvatar{ background:var(--xf-contentHighlightBg,#f1ebe4)!important; color:var(--xf-textColorMuted,#756a60)!important; -webkit-text-fill-color:var(--xf-textColorMuted,#756a60)!important; } .ggfc-mp-voteList__rowText{ display:flex; align-items:baseline; gap:5px; min-width:0; line-height:1.25; } .ggfc-mp-voteList .username{ font-family:var(--mp-font-display,"Readex Pro","Roboto",Arial,sans-serif); font-weight:850; font-size:14px; line-height:1.25; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ggfc-mp-voteList .username em, .ggfc-mp-voteList__name--anonymous{ font-style:normal; color:var(--xf-textColorMuted,#756a60)!important; -webkit-text-fill-color:var(--xf-textColorMuted,#756a60)!important; } .ggfc-mp-voteList .dataList-hint{ color:var(--xf-textColorMuted,#8a8179)!important; -webkit-text-fill-color:var(--xf-textColorMuted,#8a8179)!important; font-size:12.5px; font-weight:600; white-space:nowrap; opacity:1!important; visibility:visible!important; } .ggfc-mp-voteList .dataList-row:hover .username, .ggfc-mp-voteList .dataList-row:hover .ggfc-mp-voteList__name{ color:var(--xf-linkHoverColor,var(--xf-linkColor,#006149))!important; -webkit-text-fill-color:var(--xf-linkHoverColor,var(--xf-linkColor,#006149))!important; } .ggfc-mp-votesOverlay .block-footer{ background:var(--xf-contentAltBg,#fbf8f4); border-top:1px solid var(--xf-borderColor,#eee1d5); color:var(--xf-textColorMuted,#756a60)!important; font-size:12.5px; font-weight:700; padding:10px 12px; } .ggfc-mp-votesOverlay .block-footer-counter{ color:var(--xf-textColorMuted,#756a60)!important; -webkit-text-fill-color:var(--xf-textColorMuted,#756a60)!important; } html[data-color-scheme="dark"] .ggfc-mp-votesOverlay .block-container, [data-color-scheme="dark"] .ggfc-mp-votesOverlay .block-container, .styleType--dark .ggfc-mp-votesOverlay .block-container, [data-variation="alternate"] .ggfc-mp-votesOverlay .block-container{ box-shadow:0 10px 28px rgba(0,0,0,.30); } /* ---------- Alpha 138 voter popup light/dark visibility fix ---------- */ /* MatchPulse voter popup hard visibility guard. Light mode keeps the Alpha 137 white card that works well. Dark mode remaps only the surfaces/text so names remain readable. */ .ggfc-mp-votersPopup, .ggfc-mp-votersPopup *, .overlay .ggfc-mp-votersPopup, .overlay .ggfc-mp-votersPopup * { opacity: 1 !important; visibility: visible !important; text-shadow: none !important; } .ggfc-mp-votersPopup .block-container { background: #ffffff !important; color: #1f2328 !important; -webkit-text-fill-color: #1f2328 !important; border: 1px solid #eadfd3 !important; border-radius: 13px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 10px 26px rgba(50,35,20,.05) !important; } .ggfc-mp-votersPopup .block-body { background: #ffffff !important; color: #1f2328 !important; -webkit-text-fill-color: #1f2328 !important; } .ggfc-mp-votersPopup__row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 12px !important; background: #ffffff !important; border-bottom: 1px solid #eee1d5 !important; color: #1f2328 !important; -webkit-text-fill-color: #1f2328 !important; } .ggfc-mp-votersPopup__row:hover { background: #fbf8f4 !important; } .ggfc-mp-votersPopup__row:last-child { border-bottom: 0 !important; } .ggfc-mp-votersPopup__avatarWrap { width: 42px !important; min-width: 42px !important; height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; color: #1f2328 !important; -webkit-text-fill-color: #1f2328 !important; } .ggfc-mp-votersPopup .avatar.avatar--s { width: 42px !important; height: 42px !important; border-radius: 50% !important; overflow: hidden !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #eadfd3 !important; } .ggfc-mp-votersPopup .avatar.avatar--s img { width: 42px !important; height: 42px !important; object-fit: cover !important; display: block !important; } .ggfc-mp-votersPopup__meta { display: flex !important; align-items: baseline !important; gap: 7px !important; min-width: 0 !important; line-height: 1.25 !important; color: #1f2328 !important; -webkit-text-fill-color: #1f2328 !important; } .ggfc-mp-votersPopup__name, .ggfc-mp-votersPopup__name:link, .ggfc-mp-votersPopup__name:visited, .ggfc-mp-votersPopup__name:hover, .ggfc-mp-votersPopup__name:active { display: inline-block !important; font-family: "Readex Pro", "Roboto", Arial, sans-serif !important; font-size: 14px !important; font-weight: 850 !important; line-height: 1.25 !important; color: #1f2328 !important; -webkit-text-fill-color: #1f2328 !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 220px !important; } .ggfc-mp-votersPopup__time { font-size: 12.5px !important; font-weight: 650 !important; line-height: 1.25 !important; white-space: nowrap !important; color: #7b7269 !important; -webkit-text-fill-color: #7b7269 !important; } .ggfc-mp-votersPopup__anonAvatar { background: #f1ebe4 !important; color: #756a60 !important; -webkit-text-fill-color: #756a60 !important; } .ggfc-mp-votersPopup .block-footer { background: #fbf8f4 !important; border-top: 1px solid #eee1d5 !important; padding: 10px 12px !important; color: #756a60 !important; -webkit-text-fill-color: #756a60 !important; font-size: 12.5px !important; font-weight: 750 !important; } .ggfc-mp-votersPopup .block-footer-counter { color: #756a60 !important; -webkit-text-fill-color: #756a60 !important; } /* Dark mode: override the hard Alpha 137 white card only when XF/the browser is dark. */ html[data-color-scheme="dark"] .ggfc-mp-votersPopup .block-container, [data-color-scheme="dark"] .ggfc-mp-votersPopup .block-container, .styleType--dark .ggfc-mp-votersPopup .block-container, html.styleType--dark .ggfc-mp-votersPopup .block-container, body.styleType--dark .ggfc-mp-votersPopup .block-container, [data-variation="alternate"] .ggfc-mp-votersPopup .block-container, html[data-variation="dark"] .ggfc-mp-votersPopup .block-container, html[data-theme="dark"] .ggfc-mp-votersPopup .block-container { background: #1f303c !important; color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 12px 30px rgba(0,0,0,.38) !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup .block-body, [data-color-scheme="dark"] .ggfc-mp-votersPopup .block-body, .styleType--dark .ggfc-mp-votersPopup .block-body, html.styleType--dark .ggfc-mp-votersPopup .block-body, body.styleType--dark .ggfc-mp-votersPopup .block-body, [data-variation="alternate"] .ggfc-mp-votersPopup .block-body, html[data-variation="dark"] .ggfc-mp-votersPopup .block-body, html[data-theme="dark"] .ggfc-mp-votersPopup .block-body { background: #1f303c !important; color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup__row, [data-color-scheme="dark"] .ggfc-mp-votersPopup__row, .styleType--dark .ggfc-mp-votersPopup__row, html.styleType--dark .ggfc-mp-votersPopup__row, body.styleType--dark .ggfc-mp-votersPopup__row, [data-variation="alternate"] .ggfc-mp-votersPopup__row, html[data-variation="dark"] .ggfc-mp-votersPopup__row, html[data-theme="dark"] .ggfc-mp-votersPopup__row { background: #1f303c !important; border-bottom-color: rgba(255,255,255,.09) !important; color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup__row:hover, [data-color-scheme="dark"] .ggfc-mp-votersPopup__row:hover, .styleType--dark .ggfc-mp-votersPopup__row:hover, html.styleType--dark .ggfc-mp-votersPopup__row:hover, body.styleType--dark .ggfc-mp-votersPopup__row:hover, [data-variation="alternate"] .ggfc-mp-votersPopup__row:hover, html[data-variation="dark"] .ggfc-mp-votersPopup__row:hover, html[data-theme="dark"] .ggfc-mp-votersPopup__row:hover { background: #243746 !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup__avatarWrap, [data-color-scheme="dark"] .ggfc-mp-votersPopup__avatarWrap, .styleType--dark .ggfc-mp-votersPopup__avatarWrap, html.styleType--dark .ggfc-mp-votersPopup__avatarWrap, body.styleType--dark .ggfc-mp-votersPopup__avatarWrap, [data-variation="alternate"] .ggfc-mp-votersPopup__avatarWrap, html[data-variation="dark"] .ggfc-mp-votersPopup__avatarWrap, html[data-theme="dark"] .ggfc-mp-votersPopup__avatarWrap, html[data-color-scheme="dark"] .ggfc-mp-votersPopup__meta, [data-color-scheme="dark"] .ggfc-mp-votersPopup__meta, .styleType--dark .ggfc-mp-votersPopup__meta, html.styleType--dark .ggfc-mp-votersPopup__meta, body.styleType--dark .ggfc-mp-votersPopup__meta, [data-variation="alternate"] .ggfc-mp-votersPopup__meta, html[data-variation="dark"] .ggfc-mp-votersPopup__meta, html[data-theme="dark"] .ggfc-mp-votersPopup__meta { color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup .avatar.avatar--s, [data-color-scheme="dark"] .ggfc-mp-votersPopup .avatar.avatar--s, .styleType--dark .ggfc-mp-votersPopup .avatar.avatar--s, html.styleType--dark .ggfc-mp-votersPopup .avatar.avatar--s, body.styleType--dark .ggfc-mp-votersPopup .avatar.avatar--s, [data-variation="alternate"] .ggfc-mp-votersPopup .avatar.avatar--s, html[data-variation="dark"] .ggfc-mp-votersPopup .avatar.avatar--s, html[data-theme="dark"] .ggfc-mp-votersPopup .avatar.avatar--s { box-shadow: 0 0 0 2px #1f303c, 0 0 0 3px rgba(255,255,255,.14) !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup__name, html[data-color-scheme="dark"] .ggfc-mp-votersPopup__name:link, html[data-color-scheme="dark"] .ggfc-mp-votersPopup__name:visited, html[data-color-scheme="dark"] .ggfc-mp-votersPopup__name:hover, html[data-color-scheme="dark"] .ggfc-mp-votersPopup__name:active, [data-color-scheme="dark"] .ggfc-mp-votersPopup__name, [data-color-scheme="dark"] .ggfc-mp-votersPopup__name:link, [data-color-scheme="dark"] .ggfc-mp-votersPopup__name:visited, [data-color-scheme="dark"] .ggfc-mp-votersPopup__name:hover, [data-color-scheme="dark"] .ggfc-mp-votersPopup__name:active, .styleType--dark .ggfc-mp-votersPopup__name, .styleType--dark .ggfc-mp-votersPopup__name:link, .styleType--dark .ggfc-mp-votersPopup__name:visited, .styleType--dark .ggfc-mp-votersPopup__name:hover, .styleType--dark .ggfc-mp-votersPopup__name:active, [data-variation="alternate"] .ggfc-mp-votersPopup__name, [data-variation="alternate"] .ggfc-mp-votersPopup__name:link, [data-variation="alternate"] .ggfc-mp-votersPopup__name:visited, [data-variation="alternate"] .ggfc-mp-votersPopup__name:hover, [data-variation="alternate"] .ggfc-mp-votersPopup__name:active, html[data-variation="dark"] .ggfc-mp-votersPopup__name, html[data-theme="dark"] .ggfc-mp-votersPopup__name { color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup__time, [data-color-scheme="dark"] .ggfc-mp-votersPopup__time, .styleType--dark .ggfc-mp-votersPopup__time, html.styleType--dark .ggfc-mp-votersPopup__time, body.styleType--dark .ggfc-mp-votersPopup__time, [data-variation="alternate"] .ggfc-mp-votersPopup__time, html[data-variation="dark"] .ggfc-mp-votersPopup__time, html[data-theme="dark"] .ggfc-mp-votersPopup__time { color: rgba(244,247,248,.68) !important; -webkit-text-fill-color: rgba(244,247,248,.68) !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup__anonAvatar, [data-color-scheme="dark"] .ggfc-mp-votersPopup__anonAvatar, .styleType--dark .ggfc-mp-votersPopup__anonAvatar, html.styleType--dark .ggfc-mp-votersPopup__anonAvatar, body.styleType--dark .ggfc-mp-votersPopup__anonAvatar, [data-variation="alternate"] .ggfc-mp-votersPopup__anonAvatar, html[data-variation="dark"] .ggfc-mp-votersPopup__anonAvatar, html[data-theme="dark"] .ggfc-mp-votersPopup__anonAvatar { background: #243746 !important; color: rgba(244,247,248,.78) !important; -webkit-text-fill-color: rgba(244,247,248,.78) !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup .block-footer, [data-color-scheme="dark"] .ggfc-mp-votersPopup .block-footer, .styleType--dark .ggfc-mp-votersPopup .block-footer, html.styleType--dark .ggfc-mp-votersPopup .block-footer, body.styleType--dark .ggfc-mp-votersPopup .block-footer, [data-variation="alternate"] .ggfc-mp-votersPopup .block-footer, html[data-variation="dark"] .ggfc-mp-votersPopup .block-footer, html[data-theme="dark"] .ggfc-mp-votersPopup .block-footer { background: #1a2933 !important; border-top-color: rgba(255,255,255,.10) !important; color: rgba(244,247,248,.70) !important; -webkit-text-fill-color: rgba(244,247,248,.70) !important; } html[data-color-scheme="dark"] .ggfc-mp-votersPopup .block-footer-counter, [data-color-scheme="dark"] .ggfc-mp-votersPopup .block-footer-counter, .styleType--dark .ggfc-mp-votersPopup .block-footer-counter, html.styleType--dark .ggfc-mp-votersPopup .block-footer-counter, body.styleType--dark .ggfc-mp-votersPopup .block-footer-counter, [data-variation="alternate"] .ggfc-mp-votersPopup .block-footer-counter, html[data-variation="dark"] .ggfc-mp-votersPopup .block-footer-counter, html[data-theme="dark"] .ggfc-mp-votersPopup .block-footer-counter { color: rgba(244,247,248,.70) !important; -webkit-text-fill-color: rgba(244,247,248,.70) !important; } @media (prefers-color-scheme: dark) { html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup .block-container { background: #1f303c !important; color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 12px 30px rgba(0,0,0,.38) !important; } html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup .block-body, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__row { background: #1f303c !important; color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; border-bottom-color: rgba(255,255,255,.09) !important; } html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__row:hover { background: #243746 !important; } html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup .avatar.avatar--s { box-shadow: 0 0 0 2px #1f303c, 0 0 0 3px rgba(255,255,255,.14) !important; } html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__avatarWrap, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__meta, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__name, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__name:link, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__name:visited, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__name:hover, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__name:active { color: #f4f7f8 !important; -webkit-text-fill-color: #f4f7f8 !important; } html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__time { color: rgba(244,247,248,.68) !important; -webkit-text-fill-color: rgba(244,247,248,.68) !important; } html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup__anonAvatar { background: #243746 !important; color: rgba(244,247,248,.78) !important; -webkit-text-fill-color: rgba(244,247,248,.78) !important; } html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup .block-footer, html:not([data-color-scheme="light"]) .ggfc-mp-votersPopup .block-footer-counter { background: #1a2933 !important; border-top-color: rgba(255,255,255,.10) !important; color: rgba(244,247,248,.70) !important; -webkit-text-fill-color: rgba(244,247,248,.70) !important; } } /* ===================================================================== * Alpha 140 — full add-on responsive polish layer. * Scope: safe visual upgrades only. Light mode keeps the existing GGFC look; * dark mode now also follows the JS dark-surface detector used by the widget. * ===================================================================== */ /* Hero chips: keeps the old summary text for compatibility, adds scannable match-centre stats. */ .ggfc-mp__hero-copy{margin-bottom:8px!important} .ggfc-mp__hero-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;max-width:100%} .ggfc-mp__hero-chips span{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:5px 9px;border:1px solid var(--mp-border);border-radius:var(--mp-pill);background:var(--mp-surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)} .ggfc-mp__hero-chips b{font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.075em;color:var(--mp-text-dim);font-weight:900} .ggfc-mp__hero-chips em{font-style:normal;font-size:11.5px;line-height:1;color:var(--mp-ink-2);font-weight:850;white-space:nowrap} /* Make the Community XI vote pills feel intentionally clickable across mouse, touch and keyboard. */ .ggfc-mp__vote-link em{display:inline-flex;align-items:center;justify-content:center;min-height:34px;min-width:74px;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,color .16s ease} .ggfc-mp__vote-link:hover em,.ggfc-mp__vote-link:focus-visible em{border-color:var(--mp-border-strong);box-shadow:0 4px 10px rgba(37,32,27,.075);transform:translateY(-1px)} .ggfc-mp__vote-link:active em{transform:translateY(0)} /* Most picked players: turn the existing list into a cleaner leaderboard without changing data. */ .ggfc-mp__popular-card{grid-template-columns:30px 52px minmax(0,1fr);position:relative;overflow:hidden} .ggfc-mp__popular-rank{display:inline-flex!important;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--mp-surface-2);border:1px solid var(--mp-border);color:var(--mp-green)!important;font-family:var(--mp-font-display);font-size:12px!important;font-weight:900!important;line-height:1!important;margin:0!important;align-self:center;justify-self:center} .ggfc-mp__popular-card>div{min-width:0} .ggfc-mp__popular-card b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ggfc-mp__popular-card em{height:6px} .ggfc-mp__popular-card:hover{border-color:var(--mp-border-strong);box-shadow:var(--mp-shadow-card-hover)} /* Better section density on real thread pages. */ .ggfc-mp__popular-pop summary,.ggfc-mp__community-pop summary{min-height:58px} .ggfc-mp__popular-pop summary span{min-width:0} .ggfc-mp__popular-pop summary b,.ggfc-mp__popular-pop summary small{overflow:hidden;text-overflow:ellipsis} .ggfc-mp__popular-pop summary small{white-space:nowrap} .ggfc-mp__section-head .ggfc-mp__status{flex-shrink:0} /* Dark surface aliases: XF style variations do not always expose data-color-scheme="dark". */ .ggfc-mp.ggfc-mp--dark-surface{ --mp-green:#00bf8f; --mp-green-2:#00bf8f; --mp-green-ink:#bdeed9; --mp-accent-text:#bdeed9; --mp-accent-bg:rgba(0,97,73,.30); --mp-accent-border:rgba(0,191,143,.28); --mp-surface:rgba(255,255,255,.04); --mp-surface-2:rgba(255,255,255,.07); --mp-surface-3:rgba(255,255,255,.06); --mp-surface-pop:var(--xf-contentBg,#22323e); --mp-surface-tint:var(--xf-contentBg,rgba(255,255,255,.045)); --mp-surface-muted:rgba(255,255,255,.04); --mp-border:rgba(255,255,255,.10); --mp-border-soft:rgba(255,255,255,.10); --mp-border-hair:rgba(255,255,255,.10); --mp-border-strong:rgba(255,255,255,.16); --mp-ink:#f4f7f8; --mp-ink-2:#f4f7f8; --mp-ink-3:#f4f7f8; --mp-text:#f4f7f8; --mp-text-2:rgba(244,247,248,.82); --mp-text-dim:rgba(244,247,248,.68); --mp-text-soft:rgba(244,247,248,.72); --mp-text-mute:rgba(244,247,248,.6); --mp-track:rgba(255,255,255,.09); --mp-prog-fill:rgba(242,194,0,.10); --mp-warn-text:#f4c4a6; --mp-warn-bg:rgba(216,116,63,.18); --mp-warn-border:rgba(216,116,63,.40); --mp-dupe-border:#d8743f; --mp-dupe-bg:rgba(216,116,63,.18); --mp-dupe-ring:rgba(216,116,63,.30); --mp-shadow-block:0 10px 28px rgba(0,0,0,.30); --mp-shadow-card:none; --mp-shadow-card-hover:0 6px 16px rgba(0,0,0,.20); --mp-shadow-pop:0 14px 32px rgba(0,0,0,.22); --mp-arrow:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 20 20%22%3E%3Cpath fill=%22%23f4f7f8%22 d=%22M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z%22/%3E%3C/svg%3E"); } .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__hero{background:transparent;border-bottom-color:rgba(255,255,255,.08)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__eyebrow{color:var(--mp-gold)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__panel{background:transparent} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__player-preview{border-color:rgba(255,255,255,.09)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__player-select option,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__formation option,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm-select option{background:#20323d;color:#f4f7f8} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__formation,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__player-select,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm-select{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__player-avatar img.ggfc-mp__placeholder{content:url("/styles/ggfc/matchpulse/player-placeholder-dark.png");opacity:.9} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__consensus-grid img{background:transparent!important} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__community-pop summary small{color:rgba(244,247,248,.82)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__community-pop summary em,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__popular-pop summary em{background:rgba(0,97,73,.30);border-color:rgba(0,191,143,.28);color:#bdeed9} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__popular-pop summary:hover{background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)),var(--xf-contentBg,rgba(255,255,255,.045))!important;border-color:rgba(255,255,255,.14)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__popular-card span,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__popular-card .ggfc-mp__voter-names,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__voter-names{color:rgba(244,247,248,.66)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__voters summary,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__voter-line b{color:#f4f7f8} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__voter-line{border-top-color:rgba(255,255,255,.065)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__edit-pick{border-top-color:rgba(255,255,255,.10)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm--muted{border-color:var(--mp-border);background:var(--mp-surface)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm--muted .ggfc-mp__section-head h3{color:rgba(244,247,248,.5)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm--muted .ggfc-mp__status{background:var(--mp-surface-2);color:var(--mp-text-dim);border-color:var(--mp-border)} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__submitted-note .ggfc-mp__change-xi{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.12)!important;color:#f4f7f8!important;box-shadow:0 1px 0 rgba(255,255,255,.05) inset!important} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__submitted-note .ggfc-mp__change-xi:hover{background:rgba(247,216,74,.10)!important;border-color:rgba(247,216,74,.34)!important;color:#f7d84a!important;box-shadow:0 6px 16px rgba(0,0,0,.20)!important} .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__submitted-note .ggfc-mp__change-xi.is-editing{background:rgba(247,216,74,.12)!important;color:#f7d84a!important;border-color:rgba(247,216,74,.28)!important} /* System preference dark mode support when XF has not set an explicit light variation. */ @media (prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .ggfc-mp{ --mp-green:#00bf8f;--mp-green-2:#00bf8f;--mp-green-ink:#bdeed9;--mp-accent-text:#bdeed9;--mp-accent-bg:rgba(0,97,73,.30);--mp-accent-border:rgba(0,191,143,.28);--mp-surface:rgba(255,255,255,.04);--mp-surface-2:rgba(255,255,255,.07);--mp-surface-3:rgba(255,255,255,.06);--mp-surface-pop:var(--xf-contentBg,#22323e);--mp-surface-tint:var(--xf-contentBg,rgba(255,255,255,.045));--mp-surface-muted:rgba(255,255,255,.04);--mp-border:rgba(255,255,255,.10);--mp-border-soft:rgba(255,255,255,.10);--mp-border-hair:rgba(255,255,255,.10);--mp-border-strong:rgba(255,255,255,.16);--mp-ink:#f4f7f8;--mp-ink-2:#f4f7f8;--mp-ink-3:#f4f7f8;--mp-text:#f4f7f8;--mp-text-2:rgba(244,247,248,.82);--mp-text-dim:rgba(244,247,248,.68);--mp-text-soft:rgba(244,247,248,.72);--mp-text-mute:rgba(244,247,248,.6);--mp-track:rgba(255,255,255,.09);--mp-prog-fill:rgba(242,194,0,.10);--mp-shadow-block:0 10px 28px rgba(0,0,0,.30);--mp-shadow-card:none;--mp-shadow-card-hover:0 6px 16px rgba(0,0,0,.20);--mp-shadow-pop:0 14px 32px rgba(0,0,0,.22);--mp-arrow:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 20 20%22%3E%3Cpath fill=%22%23f4f7f8%22 d=%22M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z%22/%3E%3C/svg%3E"); } } /* Mobile/touch safety. No sticky bar included: it tested as too intrusive for thread pages. */ @media (hover:none){ .ggfc-mp__slot:hover,.ggfc-mp__popular-card:hover,.ggfc-mp__vote-link:hover em{transform:none;box-shadow:var(--mp-shadow-card)} } @media (max-width:650px){ .ggfc-mp__hero{grid-template-columns:1fr;align-items:start} .ggfc-mp__hero-actions{justify-self:stretch;width:100%;display:flex;justify-content:space-between} .ggfc-mp__toggle{margin-left:auto} .ggfc-mp__hero-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%} .ggfc-mp__hero-chips span{display:flex;justify-content:center;min-width:0;padding:6px 7px} .ggfc-mp__hero-chips b{display:none} .ggfc-mp__hero-chips em{font-size:11px;overflow:hidden;text-overflow:ellipsis;max-width:100%} .ggfc-mp__vote-link em{min-height:38px;min-width:82px} .ggfc-mp__popular-card{grid-template-columns:28px 58px minmax(0,1fr);gap:10px} .ggfc-mp__popular-rank{width:26px;height:26px;font-size:11px!important} } @media (max-width:480px){ .ggfc-mp__hero-chips{grid-template-columns:1fr 1fr} .ggfc-mp__hero-chips span:last-child{grid-column:1 / -1} .ggfc-mp__popular-pop summary{align-items:flex-start} .ggfc-mp__popular-pop summary em{align-self:center} } @media (max-width:400px){ .ggfc-mp__popular-card{grid-template-columns:28px 52px minmax(0,1fr);padding:10px 9px} .ggfc-mp__vote-link em{min-width:78px} } /* ===================================================================== * Alpha 140 — native XenForo refinement layer. * Goal: keep the responsive/dark-mode fixes, but reduce the parts that felt * too much like a standalone sports app. This layer intentionally softens * the hero chips, rank circles, shadows and hover motion so MatchPulse reads * like part of the thread UI. * ===================================================================== */ .ggfc-mp{ --mp-shadow-block:0 1px 3px rgba(0,0,0,.045); --mp-shadow-card:0 1px 2px rgba(0,0,0,.035); --mp-shadow-card-hover:0 2px 5px rgba(0,0,0,.055); --mp-shadow-pop:0 6px 18px rgba(37,32,27,.08); } .ggfc-mp.block .block-container, .ggfc-mp .block-container{ border:1px solid var(--mp-border)!important; box-shadow:var(--mp-shadow-block)!important; border-radius:12px!important; } .ggfc-mp__hero{ padding:13px 15px; border-radius:12px 12px 0 0; } .ggfc-mp.is-collapsed .ggfc-mp__hero{border-radius:12px} .ggfc-mp__hero h2{font-size:16.5px;letter-spacing:-.01em} .ggfc-mp__hero p{font-size:12.5px;max-width:820px} .ggfc-mp__hero-copy{margin-bottom:0!important} .ggfc-mp__hero-chips{display:none!important} .ggfc-mp__eyebrow{font-size:9px;letter-spacing:.09em;color:var(--mp-text-dim)} .ggfc-mp__eyebrow:before{width:6px;height:6px;box-shadow:none;background:var(--mp-gold)} .ggfc-mp__meta{ background:var(--mp-surface-2); border-color:var(--mp-border); box-shadow:none; padding:6px 10px; } .ggfc-mp .button.button--primary, .ggfc-mp .ggfc-mp__toggle.button--primary{ box-shadow:none!important; transform:none!important; } .ggfc-mp .button.button--primary:hover, .ggfc-mp .ggfc-mp__toggle.button--primary:hover{ transform:none!important; box-shadow:none!important; } .ggfc-mp__slot, .ggfc-mp__consensus-grid>div, .ggfc-mp__popular-card, .ggfc-mp__potm, .ggfc-mp__popular-pop summary, .ggfc-mp__community-pop summary, .ggfc-mp__popular-popover, .ggfc-mp__community-popover{ box-shadow:var(--mp-shadow-card)!important; } .ggfc-mp__slot:hover, .ggfc-mp__popular-card:hover{ transform:none!important; box-shadow:var(--mp-shadow-card-hover)!important; } .ggfc-mp__vote-link em{ min-height:30px; min-width:68px; padding:6px 9px; box-shadow:none!important; transform:none!important; } .ggfc-mp__vote-link:hover em, .ggfc-mp__vote-link:focus-visible em{ box-shadow:none!important; transform:none!important; background:var(--mp-surface-muted); border-color:var(--mp-border-strong); } .ggfc-mp__popular-card{ grid-template-columns:52px minmax(0,1fr)!important; gap:10px; padding:10px; } .ggfc-mp__popular-rank{display:none!important} .ggfc-mp__popular-card em{height:5px} .ggfc-mp__popular-pop summary, .ggfc-mp__community-pop summary{min-height:0} .ggfc-mp__popular-pop summary em, .ggfc-mp__community-pop summary em{ box-shadow:none; } .ggfc-mp__section-head h3{font-size:17px} .ggfc-mp__section-head p{font-size:12.5px} .ggfc-mp.ggfc-mp--dark-surface, [data-color-scheme="dark"] .ggfc-mp{ --mp-shadow-block:0 1px 3px rgba(0,0,0,.22); --mp-shadow-card:none; --mp-shadow-card-hover:0 2px 8px rgba(0,0,0,.18); --mp-shadow-pop:0 8px 22px rgba(0,0,0,.24); } .ggfc-mp.ggfc-mp--dark-surface.block .block-container, .ggfc-mp.ggfc-mp--dark-surface .block-container, [data-color-scheme="dark"] .ggfc-mp.block .block-container, [data-color-scheme="dark"] .ggfc-mp .block-container{ border-color:var(--mp-border)!important; box-shadow:var(--mp-shadow-block)!important; } @media (max-width:650px){ .ggfc-mp__hero{grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px} .ggfc-mp__hero-actions{justify-self:end;width:auto;display:flex;justify-content:flex-end} .ggfc-mp__toggle{margin-left:0;min-height:38px!important} .ggfc-mp__popular-card{grid-template-columns:58px minmax(0,1fr)!important;gap:10px} .ggfc-mp__vote-link em{min-height:36px;min-width:78px} } @media (max-width:480px){ .ggfc-mp__hero{grid-template-columns:1fr;align-items:start} .ggfc-mp__hero-actions{width:100%;justify-content:space-between} .ggfc-mp__toggle{margin-left:auto} .ggfc-mp__popular-pop summary{align-items:center} } @media (max-width:400px){ .ggfc-mp__popular-card{grid-template-columns:52px minmax(0,1fr)!important;padding:10px} } /* Alpha 141: mobile submitted-XI note alignment + tap target guardrails. The live mobile view was letting the helper copy occupy a narrow left column while the submitted heading sat on the right. Keep desktop natural, but stack and centre this state on phones so it feels native and readable. */ @media (max-width: 650px){ .ggfc-mp__submitted-note{ display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:center!important; gap:10px!important; padding:18px 14px!important; text-align:center!important; } .ggfc-mp__submitted-note strong{ order:1!important; display:block!important; width:100%!important; flex:0 0 auto!important; margin:0!important; text-align:center!important; font-size:17px!important; line-height:1.25!important; } .ggfc-mp__submitted-note>span{ order:2!important; display:block!important; width:100%!important; max-width:34em!important; flex:0 0 auto!important; margin:0 auto!important; text-align:center!important; font-size:13.5px!important; line-height:1.45!important; } .ggfc-mp__submitted-actions{ order:3!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:10px!important; width:100%!important; margin:4px 0 0!important; } .ggfc-mp__submitted-actions .button, .ggfc-mp__submitted-note .ggfc-mp__change-xi, .ggfc-mp__submitted-note .ggfc-mp__share-xi{ width:100%!important; min-width:0!important; max-width:none!important; justify-content:center!important; padding-left:10px!important; padding-right:10px!important; font-size:13px!important; line-height:1.15!important; white-space:nowrap!important; } .ggfc-mp__submitted-actions .button .button-text{ overflow:hidden!important; text-overflow:ellipsis!important; } } @media (max-width: 370px){ .ggfc-mp__submitted-actions{ grid-template-columns:1fr!important; } .ggfc-mp__submitted-note strong{ font-size:16px!important; } } /* Alpha 145: admin-only POTM preview state */ .ggfc-mp__status.is-preview{background:#fff8df;border-color:#ddc46a;color:#685314} .ggfc-mp__potm--preview{background:var(--mp-surface-2);border-style:dashed} .ggfc-mp__potm-preview-note{margin:8px 0 2px;font-weight:700} .ggfc-mp__potm-form.is-preview .button[disabled]{opacity:.72;cursor:not-allowed} [data-color-scheme="dark"] .ggfc-mp__status.is-preview,.ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__status.is-preview{background:rgba(221,196,106,.12);border-color:rgba(221,196,106,.45);color:#ead681} /* Alpha 147: Australian Player of the Match polish */ .ggfc-mp__potm--open{background:var(--mp-surface-2)} .ggfc-mp__potm-intro{margin:8px 0 0;line-height:1.45} .ggfc-mp__potm-current{display:inline-flex;align-items:center;gap:5px;margin:10px 0 0;padding:5px 9px;border:1px solid var(--mp-border);border-radius:999px;background:var(--mp-surface);color:var(--mp-text-dim);font-size:12.5px;font-weight:700} .ggfc-mp__potm-current b{color:var(--mp-text)} .ggfc-mp__potm-control{flex:1;min-width:220px} .ggfc-mp__potm-control .ggfc-mp__label{display:block;margin:0 0 5px;font-size:12px;color:var(--mp-text-dim);font-weight:800} .ggfc-mp__potm-results-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 8px;color:var(--mp-text)} .ggfc-mp__potm-results-head b{font-size:13px} .ggfc-mp__potm-results-head span{font-size:12px;color:var(--mp-text-dim);font-weight:800;white-space:nowrap} .ggfc-mp__potm-empty{margin:12px 0 0;padding:10px 12px;border:1px dashed var(--mp-border);border-radius:var(--mp-radius-sm);background:var(--mp-surface);color:var(--mp-text-dim);font-size:13px;font-weight:700;text-align:center} .ggfc-mp__potm-form.is-preview .ggfc-mp__potm-select,.ggfc-mp__potm-form.is-preview .ggfc-mp__anon{opacity:.78} @media (max-width:700px){.ggfc-mp__potm-form{grid-template-columns:1fr!important}.ggfc-mp__potm-control{min-width:0}.ggfc-mp__potm-current{display:flex;justify-content:center;text-align:center}.ggfc-mp__potm-results-head{margin-top:14px}} /* Alpha 148: native POTM preview + grouped selector polish */ .ggfc-mp__potm .ggfc-mp__section-head--potm p{ max-width:620px; } .ggfc-mp__potm--preview{ border-style:solid!important; box-shadow:none!important; } .ggfc-mp__potm-preview-note{ display:block; margin:10px 0 4px!important; padding:9px 11px; border:1px solid var(--mp-border); border-radius:var(--mp-radius-sm); background:var(--mp-surface); color:var(--mp-text-dim); font-weight:750!important; line-height:1.4; } .ggfc-mp__potm-form{ align-items:flex-end!important; } .ggfc-mp__potm-control{ min-width:260px; } .ggfc-mp__potm-select optgroup{ font-weight:850; color:var(--mp-text); } .ggfc-mp__anon--potm{ min-height:46px; display:inline-flex!important; align-items:center; padding:0 2px 5px 0; color:var(--mp-text-dim); } .ggfc-mp__anon--potm small{ color:var(--mp-text-dim); opacity:.82; font-size:11px; } .ggfc-mp__potm-form .button{ min-height:46px!important; align-self:flex-end; } .ggfc-mp__potm-form.is-preview .ggfc-mp__potm-select{ opacity:1!important; } .ggfc-mp__potm-form.is-preview .ggfc-mp__anon{ opacity:.74; } [data-color-scheme="dark"] .ggfc-mp__potm-preview-note, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm-preview-note{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); color:var(--mp-text-dim); } @media (max-width:700px){ .ggfc-mp__potm .ggfc-mp__section-head--potm{ display:grid!important; grid-template-columns:1fr; gap:9px; } .ggfc-mp__potm .ggfc-mp__section-head--potm .ggfc-mp__status{ justify-self:start; } .ggfc-mp__potm-form{ display:grid!important; grid-template-columns:1fr!important; align-items:stretch!important; } .ggfc-mp__potm-control{ min-width:0!important; width:100%; } .ggfc-mp__anon--potm{ min-height:0; padding:2px 0; } .ggfc-mp__potm-form .button{ width:100%; } } /* Alpha 149: compact/click-to-expand Australian Player of the Match */ .ggfc-mp__potm-details{display:block} .ggfc-mp__potm-summary{list-style:none;cursor:pointer;outline:0} .ggfc-mp__potm-summary::-webkit-details-marker{display:none} .ggfc-mp__potm-summary .ggfc-mp__section-head--potm{margin-bottom:0!important;align-items:center} .ggfc-mp__potm-summary .ggfc-mp__section-head--potm:after{content:'▾';display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:2px;border:1px solid var(--mp-border);border-radius:999px;background:var(--mp-surface);color:var(--mp-text-dim);font-size:13px;font-weight:900;line-height:1;transition:transform .16s ease, background .16s ease, color .16s ease} .ggfc-mp__potm-details[open] .ggfc-mp__section-head--potm:after{transform:rotate(180deg)} .ggfc-mp__potm-summary:hover .ggfc-mp__section-head--potm:after,.ggfc-mp__potm-summary:focus-visible .ggfc-mp__section-head--potm:after{background:var(--mp-surface-2);color:var(--mp-text)} .ggfc-mp__potm-summary:focus-visible{border-radius:var(--mp-radius-sm);box-shadow:0 0 0 3px rgba(244,177,0,.25)} /* Alpha 152: keep the compact POTM status pinned to the right of the title. */ .ggfc-mp__potm-summary .ggfc-mp__section-head--potm{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto!important; align-items:center!important; gap:8px!important; width:100%; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm > div{ min-width:0; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm .ggfc-mp__status{ justify-self:end!important; margin-left:auto!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm h3{ overflow:hidden; text-overflow:ellipsis; } @media (max-width:420px){ .ggfc-mp__potm-summary .ggfc-mp__section-head--potm{ grid-template-columns:minmax(0,1fr) auto auto!important; gap:6px!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm .ggfc-mp__status{ font-size:10.5px; padding:6px 8px; letter-spacing:.025em; } } .ggfc-mp__potm-extra{padding-top:10px} .ggfc-mp__potm-extra .ggfc-mp__potm-intro:first-child{margin-top:0} @media (max-width:700px){ .ggfc-mp__potm-summary .ggfc-mp__section-head--potm{grid-template-columns:1fr auto auto!important;gap:8px!important} .ggfc-mp__potm-summary .ggfc-mp__status{justify-self:end!important} } /* Alpha 155: mobile POTM header wording. Desktop keeps the full official title; phones use “POTM” only so the status pill can remain cleanly aligned on the right. */ .ggfc-mp__potm-title-mobile, .ggfc-mp__potm-title-tiny{display:none} .ggfc-mp__potm-summary .ggfc-mp__section-head--potm h3{white-space:nowrap} @media (max-width:560px){ .ggfc-mp__potm-title-full, .ggfc-mp__potm-title-mobile{display:none} .ggfc-mp__potm-title-tiny{display:inline} .ggfc-mp__potm-summary .ggfc-mp__section-head--potm{ grid-template-columns:minmax(0,1fr) auto auto!important; gap:7px!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm h3{ font-size:15px!important; line-height:1.15!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm .ggfc-mp__status{ font-size:10.5px!important; padding:6px 8px!important; max-width:128px; white-space:nowrap; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm:after{ width:24px!important; height:24px!important; flex:0 0 24px; } } @media (max-width:340px){ .ggfc-mp__potm-title-mobile{display:none} .ggfc-mp__potm-title-tiny{display:inline} .ggfc-mp__potm-summary .ggfc-mp__section-head--potm .ggfc-mp__status{ max-width:110px; padding-left:7px!important; padding-right:7px!important; } } /* Alpha 150: POTM select light/dark mode hardening - Light mode: force the POTM selector itself to white. - Dark/System dark: keep the selector and expanded options on dark XF surfaces. - Covers XF explicit dark, JS dark-surface detection, and browser system dark mode. */ .ggfc-mp select.ggfc-mp__potm-select, .ggfc-mp .ggfc-mp__potm-select.input{ background-color:#fff!important; color:var(--mp-text,#3d3540)!important; border-color:var(--mp-border,#e5d8cb)!important; } .ggfc-mp select.ggfc-mp__potm-select option, .ggfc-mp select.ggfc-mp__potm-select optgroup{ background:#fff!important; color:#1f1d1a!important; } [data-color-scheme="dark"] .ggfc-mp select.ggfc-mp__potm-select, [data-color-scheme="dark"] .ggfc-mp .ggfc-mp__potm-select.input, .styleType--dark .ggfc-mp select.ggfc-mp__potm-select, .styleType--dark .ggfc-mp .ggfc-mp__potm-select.input, .ggfc-mp.ggfc-mp--dark-surface select.ggfc-mp__potm-select, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm-select.input{ background-color:#20323d!important; color:#f4f7f8!important; border-color:rgba(255,255,255,.16)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important; } [data-color-scheme="dark"] .ggfc-mp select.ggfc-mp__potm-select option, [data-color-scheme="dark"] .ggfc-mp select.ggfc-mp__potm-select optgroup, .styleType--dark .ggfc-mp select.ggfc-mp__potm-select option, .styleType--dark .ggfc-mp select.ggfc-mp__potm-select optgroup, .ggfc-mp.ggfc-mp--dark-surface select.ggfc-mp__potm-select option, .ggfc-mp.ggfc-mp--dark-surface select.ggfc-mp__potm-select optgroup{ background:#20323d!important; color:#f4f7f8!important; } [data-color-scheme="dark"] .ggfc-mp__potm, .styleType--dark .ggfc-mp__potm, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm{ background:var(--mp-surface,rgba(255,255,255,.04))!important; border-color:var(--mp-border,rgba(255,255,255,.10))!important; color:var(--mp-text,#f4f7f8)!important; } [data-color-scheme="dark"] .ggfc-mp__potm .ggfc-mp__hint, [data-color-scheme="dark"] .ggfc-mp__potm .ggfc-mp__potm-intro, [data-color-scheme="dark"] .ggfc-mp__potm .ggfc-mp__label, .styleType--dark .ggfc-mp__potm .ggfc-mp__hint, .styleType--dark .ggfc-mp__potm .ggfc-mp__potm-intro, .styleType--dark .ggfc-mp__potm .ggfc-mp__label, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm .ggfc-mp__hint, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm .ggfc-mp__potm-intro, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm .ggfc-mp__label{ color:var(--mp-text-dim,rgba(244,247,248,.68))!important; } [data-color-scheme="dark"] .ggfc-mp__potm-summary .ggfc-mp__section-head--potm:after, .styleType--dark .ggfc-mp__potm-summary .ggfc-mp__section-head--potm:after, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm-summary .ggfc-mp__section-head--potm:after{ background:rgba(255,255,255,.06)!important; color:rgba(244,247,248,.76)!important; border-color:rgba(255,255,255,.14)!important; } [data-color-scheme="dark"] .ggfc-mp__potm-summary:hover .ggfc-mp__section-head--potm:after, .styleType--dark .ggfc-mp__potm-summary:hover .ggfc-mp__section-head--potm:after, .ggfc-mp.ggfc-mp--dark-surface .ggfc-mp__potm-summary:hover .ggfc-mp__section-head--potm:after{ background:rgba(255,255,255,.10)!important; color:#f4f7f8!important; } @media (prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .ggfc-mp select.ggfc-mp__potm-select, html:not([data-color-scheme="light"]) .ggfc-mp .ggfc-mp__potm-select.input{ background-color:#20323d!important; color:#f4f7f8!important; border-color:rgba(255,255,255,.16)!important; } html:not([data-color-scheme="light"]) .ggfc-mp select.ggfc-mp__potm-select option, html:not([data-color-scheme="light"]) .ggfc-mp select.ggfc-mp__potm-select optgroup{ background:#20323d!important; color:#f4f7f8!important; } } /* Alpha 157: full mobile rhythm pass for the stacked MatchPulse sections. Goal: make POTM, Community XI and Most picked read as one native forum widget on phones. This keeps the Alpha 154/156 desktop design and the Alpha 150 white POTM select, but fixes the cramped/narrow summary headings on mobile. */ @media (max-width:650px){ .ggfc-mp__panel > .block-body{ margin:0!important; } .ggfc-mp__panel > .block-body + .block-body{ margin-top:0!important; } /* Keep the three stacked sections close, but not crushed. */ .ggfc-mp__potm{ margin:10px 10px 8px!important; padding:12px!important; border-radius:13px!important; } .ggfc-mp__consensus, .ggfc-mp__popular{ margin:8px 10px 0!important; padding:0!important; } .ggfc-mp__popular{ margin-bottom:10px!important; } /* The collapsed section rows should behave like XenForo list rows: label block on the left, compact pill on the right. */ .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:10px!important; width:100%!important; min-height:54px!important; padding:12px 13px!important; border-radius:13px!important; } .ggfc-mp__community-pop summary > span, .ggfc-mp__popular-pop summary > span{ display:block!important; min-width:0!important; width:100%!important; } .ggfc-mp__community-pop summary b, .ggfc-mp__popular-pop summary b{ display:block!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; line-height:1.18!important; } .ggfc-mp__community-pop summary small, .ggfc-mp__popular-pop summary small{ display:block!important; margin-top:2px!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; line-height:1.25!important; } .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em{ justify-self:end!important; flex:0 0 auto!important; white-space:nowrap!important; max-width:118px!important; overflow:hidden!important; text-overflow:ellipsis!important; padding:5px 9px!important; font-size:11px!important; line-height:1.1!important; } .ggfc-mp__popular-pop[open] summary, .ggfc-mp__community-pop[open] summary{ border-bottom-left-radius:10px!important; border-bottom-right-radius:10px!important; } .ggfc-mp__popular-popover, .ggfc-mp__community-popover{ margin-top:8px!important; padding:10px 8px!important; border-radius:13px!important; } /* Expanded headers should not squeeze long headings into a narrow column. */ .ggfc-mp__community-popover .ggfc-mp__section-head, .ggfc-mp__popular-popover .ggfc-mp__section-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:8px!important; align-items:start!important; margin-bottom:10px!important; } .ggfc-mp__community-popover .ggfc-mp__section-head > div, .ggfc-mp__popular-popover .ggfc-mp__section-head > div{ min-width:0!important; } .ggfc-mp__community-popover .ggfc-mp__section-head h3, .ggfc-mp__popular-popover .ggfc-mp__section-head h3{ margin:0 0 4px!important; max-width:100%!important; line-height:1.2!important; } .ggfc-mp__community-popover .ggfc-mp__section-head p, .ggfc-mp__popular-popover .ggfc-mp__section-head p{ margin:0!important; max-width:100%!important; line-height:1.35!important; } .ggfc-mp__community-popover .ggfc-mp__section-head .ggfc-mp__status{ justify-self:end!important; align-self:start!important; padding:6px 9px!important; font-size:10.5px!important; } } @media (max-width:480px){ .ggfc-mp__potm, .ggfc-mp__consensus, .ggfc-mp__popular{ margin-left:8px!important; margin-right:8px!important; } .ggfc-mp__popular-popover, .ggfc-mp__community-popover{ margin-left:0!important; margin-right:0!important; padding-left:7px!important; padding-right:7px!important; } } @media (max-width:380px){ .ggfc-mp__community-popover .ggfc-mp__section-head, .ggfc-mp__popular-popover .ggfc-mp__section-head{ grid-template-columns:1fr!important; } .ggfc-mp__community-popover .ggfc-mp__section-head .ggfc-mp__status{ justify-self:start!important; } .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em{ max-width:104px!important; padding-left:8px!important; padding-right:8px!important; } } /* ===================================================================== * Alpha 159 — pitch name wrapping, hero layout, eyebrow, brand tint. * ===================================================================== */ /* 1. Fix long surname truncation on the pitch. "Okon-Engst..." → "Okon-" / "Engstler" (wraps cleanly inside the token). */ @media (max-width:480px){ .ggfc-mp__pitch-name, .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ white-space:normal; font-size:9.5px; line-height:1.15; } } /* 2. Keep the hero as a 2-column layout at narrow phones (≤480px). Previously it dropped to 1-column, leaving the button floating disconnected below three lines of text. */ @media (max-width:480px){ .ggfc-mp__hero{grid-template-columns:1fr auto;align-items:center} .ggfc-mp__hero-actions{width:auto;justify-content:flex-end} .ggfc-mp__toggle{margin-left:0} } /* 3. Restore eyebrow brand green. Alpha 140 refinement muted it to --mp-text-dim (grey). It should read as a brand label, not chrome. */ .ggfc-mp__eyebrow{color:var(--mp-green-2);font-size:9.5px} /* 4. Subtle warm-green gradient on the hero to lift it above the plain panel. Very faint — just enough depth to signal "hero card" without looking like a sports-app widget. Transparent in dark mode (existing rules cover it). */ .ggfc-mp__hero{ background:linear-gradient(150deg,rgba(0,97,73,.06) 0%,rgba(0,97,73,.02) 35%,var(--mp-surface) 65%); } /* ===================================================================== * Alpha 160 - mobile readability pass. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp__hero{ gap:12px!important; padding:14px 12px!important; } .ggfc-mp__hero h2{ font-size:17px!important; line-height:1.22!important; } .ggfc-mp__hero p{ display:block!important; -webkit-line-clamp:unset!important; overflow:visible!important; font-size:13px!important; line-height:1.45!important; } .ggfc-mp__meta{ padding:8px 10px!important; } .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary{ min-height:62px!important; padding:13px 14px!important; } .ggfc-mp__community-pop summary b, .ggfc-mp__popular-pop summary b{ font-size:15px!important; line-height:1.22!important; } .ggfc-mp__community-pop summary small, .ggfc-mp__popular-pop summary small{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; font-size:12.5px!important; line-height:1.35!important; } .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em{ max-width:none!important; } .ggfc-mp__section-head h3{ font-size:18px!important; line-height:1.22!important; } .ggfc-mp__section-head p{ font-size:13px!important; line-height:1.45!important; } .ggfc-mp__potm-row{ grid-template-columns:54px minmax(0,1fr)!important; gap:11px!important; padding:10px!important; } .ggfc-mp__potm-row img{ width:54px!important; height:54px!important; } .ggfc-mp__potm-row b{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; font-size:14px!important; line-height:1.22!important; } .ggfc-mp__potm-row span{ font-size:12.5px!important; line-height:1.35!important; } .ggfc-mp__popular-card b{ white-space:normal!important; overflow:visible!important; text-overflow:clip!important; font-size:14px!important; line-height:1.22!important; } .ggfc-mp__popular-card span, .ggfc-mp__popular-card .ggfc-mp__voter-names{ font-size:12.5px!important; line-height:1.4!important; } .ggfc-mp__consensus-grid span{ font-size:13.5px!important; line-height:1.3!important; } } @media (max-width:480px){ .ggfc-mp__hero{ grid-template-columns:minmax(0,1fr) auto!important; } .ggfc-mp__toggle{ min-width:96px!important; padding-left:14px!important; padding-right:14px!important; } .ggfc-mp__hero-actions .ggfc-mp__meta{ display:none!important; } .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary{ grid-template-columns:minmax(0,1fr) auto!important; gap:8px!important; } .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em{ padding:5px 8px!important; font-size:11px!important; } .ggfc-mp__pitch-name, .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:92px!important; padding:3px 6px!important; } } @media (max-width:360px){ .ggfc-mp__hero{ grid-template-columns:1fr!important; } .ggfc-mp__hero-actions{ width:100%!important; justify-content:stretch!important; } .ggfc-mp__toggle{ width:100%!important; } .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary{ grid-template-columns:1fr!important; } .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em{ justify-self:start!important; } } /* ===================================================================== * Alpha 161 - narrow-phone pitch fit. * ===================================================================== */ @media (max-width:480px){ .ggfc-mp__your-xi{ padding-left:10px!important; padding-right:10px!important; } .ggfc-mp__your-xi-head{ margin-bottom:8px!important; } .ggfc-mp__pitch, .ggfc-mp__pitch--community{ max-width:100%!important; margin-top:8px!important; margin-bottom:8px!important; border-radius:13px!important; } .ggfc-mp__pitch-lines{ inset:8px!important; border-radius:9px!important; } .ggfc-mp__pitch-spot, .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:clamp(30px, var(--mp-x,50%), calc(100% - 30px))!important; bottom:clamp(18px, var(--mp-y,50%), calc(100% - 64px))!important; width:60px!important; max-width:none!important; gap:3px!important; transform:translateX(-50%)!important; } .ggfc-mp__pitch-token, .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:38px!important; height:38px!important; border-width:1.5px!important; } .ggfc-mp__pitch-initials{ font-size:12px!important; } .ggfc-mp__pitch-name, .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:66px!important; min-height:16px!important; padding:2px 5px!important; font-size:8.8px!important; line-height:1.12!important; overflow-wrap:anywhere!important; word-break:normal!important; hyphens:auto!important; } } @media (max-width:360px){ .ggfc-mp__your-xi{ padding-left:8px!important; padding-right:8px!important; } .ggfc-mp__pitch-spot, .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:clamp(28px, var(--mp-x,50%), calc(100% - 28px))!important; bottom:clamp(16px, var(--mp-y,50%), calc(100% - 60px))!important; width:56px!important; } .ggfc-mp__pitch-token, .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:36px!important; height:36px!important; } .ggfc-mp__pitch-name, .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:62px!important; font-size:8.4px!important; } } /* ===================================================================== * Alpha 162 - use more mobile screen width. * ===================================================================== */ @media (max-width:480px){ .ggfc-mp{ width:calc(100% + 16px)!important; margin-left:-8px!important; margin-right:-8px!important; } .ggfc-mp__hero{ padding-left:14px!important; padding-right:14px!important; } .ggfc-mp__panel .block-row.ggfc-mp__your-xi{ padding-left:6px!important; padding-right:6px!important; } .ggfc-mp__pitch, .ggfc-mp__pitch--community{ width:100%!important; max-width:none!important; } .ggfc-mp__pitch-lines{ inset:7px!important; } } @media (max-width:360px){ .ggfc-mp{ width:calc(100% + 20px)!important; margin-left:-10px!important; margin-right:-10px!important; } .ggfc-mp__panel .block-row.ggfc-mp__your-xi{ padding-left:4px!important; padding-right:4px!important; } } /* ===================================================================== * Alpha 163 - Community XI mobile polish. * ===================================================================== */ .ggfc-mp__community-title-mobile{ display:none; } @media (max-width:480px){ .ggfc-mp__consensus{ margin-left:4px!important; margin-right:4px!important; } .ggfc-mp__community-pop summary{ min-height:54px!important; padding:11px 12px!important; } .ggfc-mp__community-pop summary b{ font-size:15.5px!important; } .ggfc-mp__community-pop summary small{ font-size:12px!important; } .ggfc-mp__community-pop summary em{ align-self:center!important; padding:5px 9px!important; } .ggfc-mp__community-popover{ margin-left:-10px!important; margin-right:-10px!important; padding:8px 4px 10px!important; border-radius:12px!important; } .ggfc-mp__community-popover .ggfc-mp__section-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; gap:8px!important; margin:0 4px 8px!important; align-items:start!important; } .ggfc-mp__community-title-full{ display:none!important; } .ggfc-mp__community-title-mobile{ display:inline!important; } .ggfc-mp__community-popover .ggfc-mp__section-head h3{ margin-bottom:3px!important; font-size:18px!important; line-height:1.15!important; } .ggfc-mp__community-popover .ggfc-mp__section-head p{ font-size:12.5px!important; line-height:1.35!important; } .ggfc-mp__community-popover .ggfc-mp__section-head .ggfc-mp__status{ padding:6px 9px!important; font-size:10.5px!important; letter-spacing:.025em!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community{ width:calc(100% + 2px)!important; margin-left:-1px!important; margin-right:-1px!important; margin-top:7px!important; margin-bottom:10px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-lines{ inset:6px!important; } .ggfc-mp__community-popover .ggfc-mp__consensus-grid{ gap:8px!important; margin:0 4px!important; } .ggfc-mp__community-popover .ggfc-mp__consensus-grid > div{ grid-template-columns:32px 58px minmax(0,1fr)!important; min-height:76px!important; padding:8px!important; gap:7px 9px!important; border-radius:12px!important; } .ggfc-mp__community-popover .ggfc-mp__consensus-grid b{ font-size:11px!important; } .ggfc-mp__community-popover .ggfc-mp__consensus-grid img{ width:58px!important; height:58px!important; border-radius:12px!important; } .ggfc-mp__community-popover .ggfc-mp__consensus-grid span{ font-size:13px!important; line-height:1.25!important; font-weight:750!important; } .ggfc-mp__community-popover .ggfc-mp__vote-link em{ min-width:64px!important; min-height:30px!important; padding:5px 8px!important; font-size:11.5px!important; } } @media (max-width:360px){ .ggfc-mp__community-popover{ margin-left:-12px!important; margin-right:-12px!important; padding-left:3px!important; padding-right:3px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community{ width:calc(100% + 4px)!important; margin-left:-2px!important; margin-right:-2px!important; } .ggfc-mp__community-popover .ggfc-mp__consensus-grid > div{ grid-template-columns:30px 54px minmax(0,1fr)!important; min-height:72px!important; padding:7px!important; } .ggfc-mp__community-popover .ggfc-mp__consensus-grid img{ width:54px!important; height:54px!important; } } /* ===================================================================== * Alpha 165 - pitch-first Community XI mobile experiment. * Alpha 163 remains the rollback package if this direction is too bold. * ===================================================================== */ .ggfc-mp__status-mobile{ display:none; } .ggfc-mp__community-detail-list{ display:none!important; margin-top:10px; } .ggfc-mp__community-detail-list > summary{ display:none; } .ggfc-mp__community-detail-list:not([open]) > .ggfc-mp__consensus-grid{ display:grid!important; } @media (max-width:560px){ .ggfc-mp__potm-summary .ggfc-mp__status-full{ display:none; } .ggfc-mp__potm-summary .ggfc-mp__status-mobile{ display:inline; } } @media (max-width:480px){ .ggfc-mp__community-pop summary small{ display:none!important; } .ggfc-mp__community-popover{ padding-bottom:8px!important; } .ggfc-mp__community-popover .ggfc-mp__section-head{ margin-bottom:6px!important; } .ggfc-mp__community-popover .ggfc-mp__section-head p{ display:flex!important; flex-wrap:wrap!important; gap:2px 5px!important; align-items:center!important; } .ggfc-mp__mobile-dot{ opacity:.65; } .ggfc-mp__community-popover .ggfc-mp__section-head .ggfc-mp__status{ display:none!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community{ margin-bottom:8px!important; } .ggfc-mp__community-detail-list{ margin:8px 4px 0!important; border:1px solid var(--mp-border-soft)!important; border-radius:12px!important; background:var(--mp-surface)!important; overflow:hidden!important; } .ggfc-mp__community-detail-list > summary{ list-style:none!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:8px!important; min-height:44px!important; padding:11px 12px!important; cursor:pointer!important; color:var(--mp-text)!important; font-family:var(--mp-font-display)!important; font-weight:850!important; } .ggfc-mp__community-detail-list > summary::-webkit-details-marker{ display:none; } .ggfc-mp__community-detail-list > summary:after{ content:"▾"; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:2px; border:1px solid var(--mp-border); border-radius:999px; color:var(--mp-text-dim); background:var(--mp-surface-2); font-size:12px; line-height:1; transition:transform .16s ease; } .ggfc-mp__community-detail-list[open] > summary:after{ transform:rotate(180deg); } .ggfc-mp__community-detail-list > summary span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ggfc-mp__community-detail-list > summary em{ justify-self:end; font-style:normal; padding:5px 8px; border:1px solid var(--mp-border); border-radius:999px; background:var(--mp-surface-2); color:var(--mp-text-dim); font-size:11px; font-family:var(--mp-font-body); font-weight:850; white-space:nowrap; } .ggfc-mp__community-detail-list:not([open]) > .ggfc-mp__consensus-grid{ display:none!important; } .ggfc-mp__community-detail-list[open] > .ggfc-mp__consensus-grid{ display:grid!important; padding:0 8px 8px!important; margin:0!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__consensus-grid > div{ box-shadow:none!important; } } @media (max-width:360px){ .ggfc-mp__community-detail-list{ margin-left:3px!important; margin-right:3px!important; } .ggfc-mp__community-detail-list[open] > .ggfc-mp__consensus-grid{ padding-left:6px!important; padding-right:6px!important; } } /* ===================================================================== * Alpha 167 - finish the mobile polish list. * ===================================================================== */ .ggfc-mp__pitch--community a.ggfc-mp__pitch-spot{ color:inherit!important; text-decoration:none!important; } .ggfc-mp__pitch--community a.ggfc-mp__pitch-spot:focus-visible .ggfc-mp__pitch-token, .ggfc-mp__pitch--community a.ggfc-mp__pitch-spot:hover .ggfc-mp__pitch-token{ border-color:var(--mp-gold); box-shadow:0 0 0 3px rgba(242,194,0,.32),0 3px 8px rgba(0,0,0,.30); } @media (max-width:480px){ .ggfc-mp__pitch--community a.ggfc-mp__pitch-spot:after{ content:""; position:absolute; inset:-6px -5px; border-radius:14px; } .ggfc-mp__pitch-name, .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ background:rgba(5,33,23,.74)!important; box-shadow:none!important; font-weight:850!important; letter-spacing:0!important; } .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ background:rgba(5,33,23,.68)!important; } .ggfc-mp__community-popover{ border-color:rgba(229,216,203,.75)!important; box-shadow:0 4px 16px rgba(37,32,27,.07)!important; } .ggfc-mp__community-detail-list{ border-color:rgba(229,216,203,.8)!important; background:transparent!important; } .ggfc-mp__community-detail-list > summary{ background:var(--mp-surface)!important; } .ggfc-mp__community-detail-list[open] > .ggfc-mp__consensus-grid{ gap:6px!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__consensus-grid > div{ grid-template-columns:26px 42px minmax(0,1fr) auto!important; grid-template-rows:auto!important; min-height:58px!important; padding:7px 8px!important; gap:6px!important; align-items:center!important; border-radius:10px!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__consensus-grid b{ grid-row:auto!important; font-size:10.5px!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__consensus-grid img{ grid-row:auto!important; width:42px!important; height:42px!important; border-radius:10px!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__consensus-grid span{ align-self:center!important; font-size:12.8px!important; line-height:1.2!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__vote-link{ align-self:center!important; justify-self:end!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__vote-link em{ min-width:58px!important; min-height:28px!important; padding:5px 7px!important; font-size:11px!important; } } @media (max-width:360px){ .ggfc-mp__community-detail-list[open] .ggfc-mp__consensus-grid > div{ grid-template-columns:24px 38px minmax(0,1fr) auto!important; padding:6px!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__consensus-grid img{ width:38px!important; height:38px!important; } .ggfc-mp__community-detail-list[open] .ggfc-mp__vote-link em{ min-width:54px!important; font-size:10.5px!important; } } /* ===================================================================== * Alpha 168 - align collapsed mobile section tabs. * ===================================================================== */ @media (max-width:480px){ .ggfc-mp__potm, .ggfc-mp__consensus, .ggfc-mp__popular{ margin-left:8px!important; margin-right:8px!important; } .ggfc-mp__consensus, .ggfc-mp__popular{ padding-top:0!important; } .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary, .ggfc-mp__potm{ width:100%!important; box-sizing:border-box!important; } .ggfc-mp__community-pop, .ggfc-mp__popular-pop{ display:block!important; width:100%!important; } .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary{ min-height:54px!important; padding:12px 13px!important; } } @media (max-width:360px){ .ggfc-mp__potm, .ggfc-mp__consensus, .ggfc-mp__popular{ margin-left:6px!important; margin-right:6px!important; } } /* ===================================================================== * Alpha 169 - remove redundant Community XI vote-list tab. * ===================================================================== */ @media (max-width:480px){ .ggfc-mp__community-popover .ggfc-mp__pitch--community{ margin-bottom:2px!important; } } /* ===================================================================== * Alpha 171 - mobile Community XI centering and tap stability. * ===================================================================== */ @media (max-width:480px){ .ggfc-mp__community-popover .ggfc-mp__section-head{ grid-template-columns:1fr!important; justify-items:center!important; text-align:center!important; } .ggfc-mp__community-popover .ggfc-mp__section-head > div{ width:100%!important; } .ggfc-mp__community-popover .ggfc-mp__section-head h3, .ggfc-mp__community-popover .ggfc-mp__section-head p{ text-align:center!important; justify-content:center!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community{ flex:0 0 auto!important; inline-size:100%!important; min-inline-size:100%!important; max-inline-size:none!important; contain:layout paint!important; } .ggfc-mp__pitch--community a.ggfc-mp__pitch-spot{ -webkit-tap-highlight-color:transparent!important; touch-action:manipulation!important; outline:0!important; } .ggfc-mp__pitch--community a.ggfc-mp__pitch-spot:active .ggfc-mp__pitch-token, .ggfc-mp__pitch--community a.ggfc-mp__pitch-spot:focus .ggfc-mp__pitch-token{ transform:none!important; } } /* ===================================================================== * Alpha 173 - mobile cleanup. * * Supersedes the Alpha 160-172 attempts at the Community XI pitch width. * Those used a 100vw breakout (margin-left:50% + translateX(-50%)) which * made the green pitch render WIDER than its own white popover card, so the * card appeared to "under-stretch" the pitch and the pitch bled past the * rounded corners on phones. * * Fix: the Community XI pitch now fills its container exactly like the * Your XI pitch (no viewport breakout, no negative margins), so the card * always contains it and both pitches read as the same component. * ===================================================================== */ @media (max-width:480px){ /* Re-clip the card so the pitch can never spill past the rounded corners. */ .ggfc-mp__community-popover{ overflow:hidden!important; margin-left:0!important; margin-right:0!important; padding-left:6px!important; padding-right:6px!important; } /* Pitch fills the card; centered, contained, same treatment as Your XI. */ .ggfc-mp__community-popover .ggfc-mp__pitch--community{ width:100%!important; min-width:0!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; transform:none!important; } } /* ===================================================================== * Alpha 174 - unify the three collapsed mobile section headers. * * Across earlier alphas the POTM / Community XI / Most picked players header * titles drifted to different sizes (POTM h3 15px, Community XI 15.5px, Most * picked 15px) and their right-hand pills differed too (POTM status 10.5px vs * the community/popular pills 11px). This forces one shared title size/weight * and one shared pill size so the three section tabs read as a matching set * on phones. Scoped to <=560px, where the POTM header is already its short * "POTM" label, so nothing here shrinks the full desktop title. * ===================================================================== */ @media (max-width:560px){ .ggfc-mp__potm-summary .ggfc-mp__section-head--potm h3, .ggfc-mp__community-pop summary b, .ggfc-mp__popular-pop summary b{ font-size:15px!important; line-height:1.2!important; font-weight:850!important; font-family:var(--mp-font-display)!important; letter-spacing:-.01em!important; } .ggfc-mp__community-pop summary small, .ggfc-mp__popular-pop summary small{ font-size:12px!important; line-height:1.25!important; } .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em, .ggfc-mp__potm-summary .ggfc-mp__section-head--potm .ggfc-mp__status{ font-size:11px!important; padding:5px 9px!important; letter-spacing:.02em!important; } } /* ===================================================================== * Alpha 175 - remove the duplicate section title inside open popovers. * * Each collapsed tab already names its section ("Community XI", * "Most picked players"), but the expanded panel then repeated the exact same * title as a big

immediately underneath — a visible stutter on phones * (e.g. "Community XI" shown twice, one above the other). On mobile the tab is * the single header, so hide the repeated heading. Also drop the "N picks" * status pill, which just restates the "N members submitted" line beside it. * Desktop is untouched (it keeps the fuller "Green & Gold FC Community XI"). * ===================================================================== */ @media (max-width:560px){ .ggfc-mp__community-popover .ggfc-mp__section-head h3, .ggfc-mp__popular-popover .ggfc-mp__section-head h3{ display:none!important; } .ggfc-mp__community-popover .ggfc-mp__section-head .ggfc-mp__status{ display:none!important; } } /* ===================================================================== * Alpha 176 - full-bleed mobile width + one-line pitch names. * * 1) Full width: earlier alphas only cancelled an 8px inset * (width:calc(100% + 16px); margin:-8px), so on phones the widget still * floated inside the thread content padding. This uses the full-bleed * breakout (width:100vw + margin:calc(50% - 50vw)), which reaches the * screen edge regardless of how much padding the surrounding XF content * column actually has. Border radius is dropped at the edge so it reads as * an intentional full-width band, while the inner sections keep their own * padding for breathing room. * * 2) Pitch names: at <=480px the spot is pinned to 60px wide, which clamped * the name pill and broke long names mid-word ("Irankund" / "a"). Let the * label overflow the token and stay on one line (the wider full-bleed pitch * gives the room), with ellipsis only as a last resort on the narrowest * phones. * ===================================================================== */ @media (max-width:480px){ .ggfc-mp{ width:100vw!important; max-width:100vw!important; margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important; } .ggfc-mp.block .block-container,.ggfc-mp .block-container{ border-radius:0!important; } .ggfc-mp__pitch-spot, .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ overflow:visible!important; } .ggfc-mp__pitch-name, .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; max-width:86px!important; } } @media (max-width:360px){ .ggfc-mp__pitch-name, .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:72px!important; font-size:8.6px!important; } } /* ===================================================================== * Alpha 177 - mobile compatibility baseline. * * The three collapsed match sections were still using different effective * widths once XenForo post padding and historical MatchPulse overrides stacked * together. This final mobile/tablet layer makes POTM, Community XI and Most * picked share the same row geometry, then keeps the expanded panels simple * enough for narrow screens. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp{ --mp-mobile-gutter:16px; overflow-x:clip!important; } .ggfc-mp__potm, .ggfc-mp__consensus, .ggfc-mp__popular{ width:auto!important; max-width:none!important; margin:14px var(--mp-mobile-gutter)!important; padding:0!important; } .ggfc-mp__potm{ padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } .ggfc-mp__potm-details, .ggfc-mp__community-pop, .ggfc-mp__popular-pop{ display:block!important; width:100%!important; max-width:100%!important; } .ggfc-mp__potm-summary, .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; width:100%!important; min-height:64px!important; padding:13px 14px!important; border:1px solid var(--mp-border-soft)!important; border-radius:14px!important; background:var(--mp-surface-tint)!important; box-shadow:0 2px 8px rgba(37,32,27,.04)!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto!important; align-items:center!important; gap:10px!important; width:100%!important; margin:0!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm > div, .ggfc-mp__community-pop summary > span, .ggfc-mp__popular-pop summary > span{ min-width:0!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm h3, .ggfc-mp__community-pop summary b, .ggfc-mp__popular-pop summary b{ margin:0!important; font-size:16px!important; line-height:1.15!important; letter-spacing:0!important; white-space:normal!important; } .ggfc-mp__community-pop summary small, .ggfc-mp__popular-pop summary small{ margin-top:3px!important; font-size:12px!important; line-height:1.25!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm .ggfc-mp__status, .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em{ min-height:30px!important; max-width:118px!important; padding:6px 10px!important; font-size:11px!important; line-height:1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm:after{ flex:0 0 28px!important; width:28px!important; height:28px!important; margin-left:0!important; } .ggfc-mp__popular-pop[open] summary, .ggfc-mp__community-pop[open] summary, .ggfc-mp__potm-details[open] .ggfc-mp__potm-summary{ border-bottom-left-radius:10px!important; border-bottom-right-radius:10px!important; } .ggfc-mp__popular-popover, .ggfc-mp__community-popover, .ggfc-mp__potm-details > .ggfc-mp__potm-extra{ width:100%!important; margin:8px 0 0!important; padding:12px!important; border-radius:14px!important; box-shadow:0 4px 14px rgba(37,32,27,.06)!important; } .ggfc-mp__community-popover .ggfc-mp__section-head, .ggfc-mp__popular-popover .ggfc-mp__section-head{ margin-bottom:8px!important; text-align:center!important; justify-content:center!important; } .ggfc-mp__community-popover .ggfc-mp__section-head p, .ggfc-mp__popular-popover .ggfc-mp__section-head p{ font-size:12.5px!important; line-height:1.32!important; } .ggfc-mp__pitch, .ggfc-mp__pitch--community{ width:100%!important; max-width:430px!important; min-width:0!important; margin:6px auto 2px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community{ contain:layout paint!important; transform:none!important; } .ggfc-mp__popular-grid{ grid-template-columns:1fr!important; gap:8px!important; margin-top:8px!important; } .ggfc-mp__popular-card{ grid-template-columns:46px minmax(0,1fr)!important; min-width:0!important; padding:9px!important; } .ggfc-mp__popular-card img{ width:46px!important; height:46px!important; } .ggfc-mp__popular-card b, .ggfc-mp__popular-card span, .ggfc-mp__popular-card .ggfc-mp__voter-names{ overflow-wrap:break-word!important; } } @media (max-width:480px){ .ggfc-mp{ --mp-mobile-gutter:14px; } .ggfc-mp__hero{ padding-left:14px!important; padding-right:14px!important; } } @media (max-width:360px){ .ggfc-mp{ --mp-mobile-gutter:12px; } .ggfc-mp__potm-summary, .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary{ min-height:60px!important; padding:12px!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm h3, .ggfc-mp__community-pop summary b, .ggfc-mp__popular-pop summary b{ font-size:15px!important; } .ggfc-mp__potm-summary .ggfc-mp__section-head--potm .ggfc-mp__status, .ggfc-mp__community-pop summary em, .ggfc-mp__popular-pop summary em{ max-width:96px!important; padding-left:8px!important; padding-right:8px!important; font-size:10.5px!important; } } /* ===================================================================== * Alpha 178 - remove mobile horizontal page scroll. * * Alpha 176 made the whole widget `100vw` to claw back XenForo post padding, * but production mobile still exposes that as document overflow in some * browser/device combinations. Keep the Alpha 177 aligned rows, but contain * the widget inside the post column so the page never gets a sideways scrollbar. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp{ width:100%!important; max-width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; } .ggfc-mp.block, .ggfc-mp .block-container, .ggfc-mp__panel, .ggfc-mp__potm, .ggfc-mp__consensus, .ggfc-mp__popular, .ggfc-mp__potm-summary, .ggfc-mp__community-pop summary, .ggfc-mp__popular-pop summary, .ggfc-mp__popular-popover, .ggfc-mp__community-popover, .ggfc-mp__potm-details > .ggfc-mp__potm-extra, .ggfc-mp__pitch, .ggfc-mp__pitch--community{ max-width:100%!important; min-width:0!important; } .ggfc-mp.block .block-container, .ggfc-mp .block-container{ border-radius:0!important; } .ggfc-mp__potm, .ggfc-mp__consensus, .ggfc-mp__popular{ margin-left:var(--mp-mobile-gutter)!important; margin-right:var(--mp-mobile-gutter)!important; } } @media (max-width:360px){ .ggfc-mp{ --mp-mobile-gutter:10px; } } /* ===================================================================== * Alpha 179 - restore XenMaterial-friendly mobile curves. * * Alpha 178 correctly removed horizontal page overflow, but left the mobile * widget shell square. The XenMaterial theme uses soft rounded cards, so this * keeps the contained 100% width fix while restoring a rounded outer shell and * matching hero radius. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp{ margin-top:10px!important; margin-bottom:18px!important; padding-left:0!important; padding-right:0!important; } .ggfc-mp.block .block-container, .ggfc-mp .block-container{ border-radius:16px!important; overflow:hidden!important; box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 22px rgba(50,35,20,.05)!important; } .ggfc-mp__hero{ border-radius:16px 16px 0 0!important; } .ggfc-mp.is-collapsed .ggfc-mp__hero{ border-radius:16px!important; } .ggfc-mp__panel{ border-radius:0 0 16px 16px!important; } } @media (max-width:360px){ .ggfc-mp.block .block-container, .ggfc-mp .block-container{ border-radius:14px!important; } .ggfc-mp__hero{ border-radius:14px 14px 0 0!important; } .ggfc-mp.is-collapsed .ggfc-mp__hero{ border-radius:14px!important; } } /* ===================================================================== * Alpha 180 - mobile Community XI pitch spacing. * * Once the widget was correctly contained inside the XenForo post column, the * Community XI pitch had less horizontal room. Keep the no-scroll container, * but give the pitch more vertical breathing room and make the read-only * Community XI tokens slightly more compact on phones. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp__community-popover .ggfc-mp__pitch--community{ aspect-ratio:3 / 4.35!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:calc(var(--mp-x,50%) - 28px)!important; bottom:calc(var(--mp-y,50%) - 27px)!important; width:56px!important; gap:3px!important; max-width:none!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:36px!important; height:36px!important; border-width:1.5px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:66px!important; padding:2px 5px!important; font-size:8.9px!important; line-height:1.15!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="ST"]{ --mp-y:92%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM1"], .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM2"]{ --mp-y:72%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM1"], .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM2"]{ --mp-y:53%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="LWB"], .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="RWB"]{ --mp-y:41%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="LWB"]{ --mp-x:16%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="RWB"]{ --mp-x:84%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB1"], .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB2"], .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB3"]{ --mp-y:26%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="GK"]{ --mp-y:10%!important; } } @media (max-width:360px){ .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:calc(var(--mp-x,50%) - 26px)!important; bottom:calc(var(--mp-y,50%) - 25px)!important; width:52px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:34px!important; height:34px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:60px!important; font-size:8.4px!important; padding-left:4px!important; padding-right:4px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="LWB"]{ --mp-x:18%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="RWB"]{ --mp-x:82%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="GK"]{ --mp-y:11%!important; } } /* ===================================================================== * Alpha 182 - proper mobile Community XI formation map. * * The desktop pitch coordinates do not survive being compressed into a narrow * phone card. This replaces the accumulated nudges with a deliberate mobile * formation map for Community XI only: every player has a safe lane, no token * is allowed to live on the frame edge, and paired central players are spread * far enough apart for their name pills. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp__community-popover{ padding-left:8px!important; padding-right:8px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community{ aspect-ratio:3 / 4.75!important; max-width:290px!important; border-radius:15px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-lines{ inset:7px!important; border-radius:9px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:calc(var(--mp-x,50%) - 25px)!important; bottom:calc(var(--mp-y,50%) - 24px)!important; width:50px!important; gap:3px!important; max-width:none!important; overflow:visible!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:32px!important; height:32px!important; border-width:1.5px!important; box-shadow:0 2px 5px rgba(0,0,0,.25)!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:58px!important; min-height:14px!important; padding:2px 4px!important; font-size:8.2px!important; line-height:1.12!important; letter-spacing:0!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="ST"]{ --mp-x:50%!important; --mp-y:86%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM1"]{ --mp-x:34%!important; --mp-y:70%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM2"]{ --mp-x:66%!important; --mp-y:70%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM1"]{ --mp-x:34%!important; --mp-y:53%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM2"]{ --mp-x:66%!important; --mp-y:53%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="LWB"]{ --mp-x:19%!important; --mp-y:39%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="RWB"]{ --mp-x:81%!important; --mp-y:39%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB1"]{ --mp-x:26%!important; --mp-y:25%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB2"]{ --mp-x:50%!important; --mp-y:25%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB3"]{ --mp-x:74%!important; --mp-y:25%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="GK"]{ --mp-x:50%!important; --mp-y:10%!important; } } @media (max-width:360px){ .ggfc-mp__community-popover{ padding-left:6px!important; padding-right:6px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community{ max-width:270px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:calc(var(--mp-x,50%) - 24px)!important; bottom:calc(var(--mp-y,50%) - 23px)!important; width:48px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:30px!important; height:30px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:54px!important; font-size:7.9px!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM1"], .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM1"]{ --mp-x:33%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM2"], .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM2"]{ --mp-x:67%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="LWB"]{ --mp-x:21%!important; } .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="RWB"]{ --mp-x:79%!important; } } /* ===================================================================== * Alpha 183 - wide contained Community XI pitch. * * Alpha 182 created a safer mobile formation map, but the opened Community XI * popover was still inheriting the collapsed-row gutter, leaving the pitch too * narrow. Keep the summary row aligned with POTM/Most picked, but let the * opened pitch area expand back toward the widget edges while staying clipped * inside the rounded XenMaterial shell. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover{ width:calc(100% + (var(--mp-mobile-gutter) * 2) - 8px)!important; max-width:calc(100% + (var(--mp-mobile-gutter) * 2) - 8px)!important; margin-left:calc((var(--mp-mobile-gutter) * -1) + 4px)!important; margin-right:calc((var(--mp-mobile-gutter) * -1) + 4px)!important; padding-left:8px!important; padding-right:8px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community{ width:100%!important; max-width:310px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:calc(var(--mp-x,50%) - 26px)!important; bottom:calc(var(--mp-y,50%) - 24px)!important; width:52px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:34px!important; height:34px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:62px!important; font-size:8.4px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM1"], .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM1"]{ --mp-x:32%!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM2"], .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM2"]{ --mp-x:68%!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="LWB"]{ --mp-x:18%!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="RWB"]{ --mp-x:82%!important; } } @media (max-width:360px){ .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover{ width:calc(100% + 20px)!important; max-width:calc(100% + 20px)!important; margin-left:-10px!important; margin-right:-10px!important; padding-left:6px!important; padding-right:6px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community{ max-width:292px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:32px!important; height:32px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:58px!important; font-size:8.1px!important; } } /* ===================================================================== * Alpha 184 - independent mobile pitch coordinates. * * Do not override the desktop inline `--mp-x` / `--mp-y` values anymore. * Mobile now uses its own `--mp-mx` / `--mp-my` variables, so the phone * Community XI layout is independent from the desktop pitch map and from the * older alpha nudges above. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover{ width:auto!important; max-width:none!important; margin-left:-10px!important; margin-right:-10px!important; padding-left:6px!important; padding-right:6px!important; overflow:visible!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community{ width:min(100%, 318px)!important; max-width:none!important; aspect-ratio:3 / 4.55!important; margin-left:auto!important; margin-right:auto!important; overflow:hidden!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:calc(var(--mp-mx, var(--mp-x, 50%)) - 27px)!important; bottom:calc(var(--mp-my, var(--mp-y, 50%)) - 25px)!important; width:54px!important; gap:3px!important; max-width:none!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:35px!important; height:35px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:64px!important; min-height:15px!important; padding:2px 5px!important; font-size:8.5px!important; line-height:1.12!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="ST"]{ --mp-mx:50%; --mp-my:87%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM1"]{ --mp-mx:31%; --mp-my:70%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="AM2"]{ --mp-mx:69%; --mp-my:70%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM1"]{ --mp-mx:31%; --mp-my:54%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="DM2"]{ --mp-mx:69%; --mp-my:54%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="LWB"]{ --mp-mx:18%; --mp-my:40%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="RWB"]{ --mp-mx:82%; --mp-my:40%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB1"]{ --mp-mx:25%; --mp-my:25%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB2"]{ --mp-mx:50%; --mp-my:25%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="CB3"]{ --mp-mx:75%; --mp-my:25%; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot[data-slot="GK"]{ --mp-mx:50%; --mp-my:10%; } } @media (max-width:360px){ .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover{ margin-left:-8px!important; margin-right:-8px!important; padding-left:5px!important; padding-right:5px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community{ width:min(100%, 304px)!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ left:calc(var(--mp-mx, var(--mp-x, 50%)) - 25px)!important; bottom:calc(var(--mp-my, var(--mp-y, 50%)) - 24px)!important; width:50px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-token{ width:33px!important; height:33px!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-name{ max-width:59px!important; font-size:8.1px!important; } } /* ===================================================================== * Alpha 190 - centre the mobile Community XI formation + widen the pitch. * * MAIN FIX (the Alpha 184 regression): on phones the whole formation sat * ~25px to the LEFT - the GK/CB2/ST spine landed left of the centre spot and * the left wing-back clipped the frame while a gap opened on the right. Cause: * the half-token centring offset was applied twice (the ≤480px transform AND * the Community spots' own `left:calc(... - halfWidth)` subtraction). The rule * at the bottom of this block cancels the transform for Community XI so the * `left` subtraction is the single source of centring. Verified centred and * symmetric at 320 / 400 / 500px (spine offset 0, equal wing-back gutters). * * Also: the pitch was choked by the consensus block-row padding (12px) + * popover padding, rendering ~268px inside a ~318px card. The popover/pitch * breakout below pulls the OPEN popover past that padding (the collapsed tab * keeps its alignment with the POTM / Most picked tabs) so the pitch fills the * card and the wide players get real room. Last block in the file, so it wins * over the Alpha 173/184 popover rules. * ===================================================================== */ @media (max-width:650px){ .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover{ margin-left:-12px!important; margin-right:-12px!important; padding-left:6px!important; padding-right:6px!important; overflow:visible!important; } .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community{ width:auto!important; max-width:none!important; margin-left:-6px!important; margin-right:-6px!important; aspect-ratio:3 / 4.25!important; } /* THE Alpha 184 mobile regression: the ≤480px block applies * transform:translateX(-50%) to every pitch spot, but the Community spots * ALSO centre themselves through their own `left:calc( - halfTokenWidth)` * subtraction (Alpha 182/184). With both active the half-token offset was * applied twice, sliding the whole formation ~25px LEFT - GK/CB2/ST landed * left of the centre spot and the left wing-back clipped the frame while a * gap opened on the right. Cancel the transform for Community XI so the * `left` subtraction is the single source of horizontal centring, matching * how the tablet (481-650px) and desktop community pitch already behave. */ .ggfc-mp__community-pop[open] > .ggfc-mp__community-popover .ggfc-mp__pitch--community .ggfc-mp__pitch-spot{ transform:none!important; } }