/* =====================================================================
   LC&G 365 — ARCADE MODE
   Tutto è sotto html.lcg-arcade: senza la classe il sito resta identico.
   Le classi .lcg-* sono aggiunte a runtime da js/lcg-arcade.js
   ===================================================================== */

/* Press Start 2P (SIL Open Font License) — file locali in ../fonts/ */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/press-start-2p-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/press-start-2p-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--lcg-red:#E2121E;--lcg-green:#39ff14;--lcg-bg:#141414;--lcg-scan:.15;
  --lcg-px1:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  --lcg-px3:polygon(24px 0,calc(100% - 24px) 0,calc(100% - 24px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 16px,calc(100% - 8px) 16px,calc(100% - 8px) 24px,100% 24px,100% calc(100% - 24px),calc(100% - 8px) calc(100% - 24px),calc(100% - 8px) calc(100% - 16px),calc(100% - 16px) calc(100% - 16px),calc(100% - 16px) calc(100% - 8px),calc(100% - 24px) calc(100% - 8px),calc(100% - 24px) 100%,24px 100%,24px calc(100% - 8px),16px calc(100% - 8px),16px calc(100% - 16px),8px calc(100% - 16px),8px calc(100% - 24px),0 calc(100% - 24px),0 24px,8px 24px,8px 16px,16px 16px,16px 8px,24px 8px)}

@keyframes lcgScan{0%{transform:translateY(0)}100%{transform:translateY(4px)}}
@keyframes lcgBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes lcgCoin{0%{transform:translateY(-6px) scaleX(1)}30%{transform:translateY(0) scaleX(1)}45%{transform:translateY(2px) scaleX(.35)}60%{transform:translateY(0) scaleX(1)}100%{transform:translateY(-6px) scaleX(1)}}

/* ---------- elementi iniettati: nascosti di default ---------- */
.lcg-hud,.lcg-rule,.lcg-logo-px{display:none}

/* ---------- bottone switch (visibile in entrambe le viste) ---------- */
.lcg-coinbtn{position:relative;z-index:5;display:inline-flex;align-items:center;gap:10px;margin-left:16px;cursor:pointer;
  background:var(--lcg-red);color:#fff;border:0;border-radius:0;padding:12px 16px;overflow:hidden;
  font:400 10px/1.6 'Press Start 2P',monospace;letter-spacing:0;text-transform:none;white-space:nowrap;clip-path:var(--lcg-px1)}
.lcg-coinbtn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 4px);animation:lcgScan .2s steps(2) infinite}
.lcg-coin{display:block;width:16px;height:22px;overflow:hidden;flex:none}
.lcg-coin svg{display:block;width:16px;height:16px;animation:lcgCoin 1.4s steps(1) infinite}
html:not(.lcg-arcade) .lcg-coinbtn--arcade-only{display:none!important}
html.lcg-arcade .lcg-coinbtn .lcg-coin{display:none}
html.lcg-arcade .lcg-coinbtn::after{display:none}

/* =====================================================================
   ARCADE ON
   ===================================================================== */
html.lcg-arcade,html.lcg-arcade body,html.lcg-arcade #page,html.lcg-arcade .site,
html.lcg-arcade #content,html.lcg-arcade main,html.lcg-arcade .wrapper{background:var(--lcg-bg)!important;color:#fff}

html.lcg-arcade img{image-rendering:pixelated}

/* font pixel */
html.lcg-arcade :is(h1,h2,h3,h4,h5,h6,.preheader,.preheader a,.navbar a,.nav-link,.dropdown-item,.wp-block-button__link,.btn,.lcg-hud,.lcg-logo-px,.lcg-teaser,.lcg-teaser *),
html.lcg-arcade .lcg-scope :is(p,li,time,.date,small,div){font-family:'Press Start 2P',monospace!important;letter-spacing:0!important;text-transform:none}
html.lcg-arcade h1{font-size:26px!important;line-height:1.6!important}
html.lcg-arcade h2{font-size:20px!important;line-height:1.6!important}
html.lcg-arcade h3{font-size:13px!important;line-height:1.7!important}
html.lcg-arcade :is(h4,h5,h6){font-size:12px!important;line-height:1.7!important}
html.lcg-arcade .lcg-scope :is(p,li,div){font-size:10px!important;line-height:1.9!important}
html.lcg-arcade .lcg-scope p.has-text-align-center{font-size:12px!important}
html.lcg-arcade .lcg-scope :is(p,li,div) :is(strong,b,em){font-family:inherit!important}

/* colori testo (classi messe dal JS leggendo i colori reali):
   testi neutri scuri/grigi fuori dalle card → bianchi; testi chiari dentro le card → scuri.
   Rossi e colori brand non vengono toccati. */
html.lcg-arcade .lcg-ink{color:#fff!important}
html.lcg-arcade .lcg-ink-dark{color:#1A1A1A!important}
html.lcg-arcade .lcg-ink  .bglightgrey {color:#1A1A1A!important}
/* blocchi Gutenberg con sfondo bianco: restano bianchi e i figli restano scuri */
html.lcg-arcade :is(.has-white-background-color,.bg-white):is(.lcg-band,.lcg-card){background:#fff!important}
/* blocchi arrotondati del tema (.rounded-5): angoli a 3 gradini al posto del border-radius */
html.lcg-arcade body .rounded-5.rounded-5,
html.lcg-arcade :is(#wrapper-prefooter,#wrapper-static-content,#content,#page) .rounded-5{border-radius:0!important;-webkit-clip-path:var(--lcg-px3)!important;clip-path:var(--lcg-px3)!important}
html.lcg-arcade :is(.has-white-background-color,.bg-white) :is(.lcg-ink,h1,h2,h3,h4,h5,h6,p,li,span,strong,em,small,div,a:not(.btn):not(.wp-block-button__link)){color:#1A1A1A!important}

/* preheader: resta rosso */
html.lcg-arcade .preheader{background:var(--lcg-red)!important}
html.lcg-arcade .preheader :is(a,p),html.lcg-arcade .lcg-scope .preheader :is(a,p){font-size:8px!important;line-height:1.8!important;color:#fff!important}

/* barra dentellata + HUD (iniettati dopo il preheader) */
html.lcg-arcade .lcg-rule{display:block;background:#000}
.lcg-rule i{display:block;height:8px;background:repeating-linear-gradient(90deg,var(--lcg-red) 0 8px,transparent 8px 16px)}
.lcg-rule i+i{background:repeating-linear-gradient(90deg,transparent 0 8px,var(--lcg-red) 8px 16px);opacity:.55}
html.lcg-arcade .lcg-hud{display:flex;position:relative;overflow:hidden;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:#000;color:#fff;font-size:9px;line-height:1.6;padding:9px 18px;border-bottom:3px solid var(--lcg-red)}
.lcg-hud::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,var(--lcg-scan)) 0 2px,transparent 2px 4px);animation:lcgScan .2s steps(2) infinite}
.lcg-hud .r{color:var(--lcg-red)}
.lcg-hud .g{color:var(--lcg-green);display:inline-flex;align-items:center;gap:8px}
.lcg-hud .blink{animation:lcgBlink 1s steps(1) infinite}
.lcg-hud .lcg-coin{width:14px;height:20px}
.lcg-hud .lcg-coin svg{width:14px;height:14px}

/* navbar */
html.lcg-arcade :is(#wrapper-navbar,header.header,.navbar){background:#000!important;border-color:#000!important}
html.lcg-arcade :is(.navbar a,.nav-link){color:#fff!important;font-size:10px!important}
/* "Sito di edizione 2026": in arcade la voce non entra nella riga del menu (il link è ripetuto più sotto) */
html.lcg-arcade #menu-item-7248{display:none!important}
/* header: "Follow us" e icone social grigie → bianche, newsletter resta rossa */
html.lcg-arcade :is(#wrapper-navbar,header) :is(.grey,.grey > span,#header-menu a,#header-menu i){color:#fff!important}
html.lcg-arcade :is(#wrapper-navbar,header) #header-menu li.red :is(a,i){color:var(--lcg-red)!important}
html.lcg-arcade :is(#wrapper-navbar,header) .grey > span{font-family:'Press Start 2P',monospace!important;font-size:9px!important}
html.lcg-arcade .dropdown-menu{background:#000!important;border:3px solid var(--lcg-red)!important;border-radius:0!important}
html.lcg-arcade .navbar-toggler{border-color:#fff!important;filter:invert(1)}
/* logo: SVG nascosto, lockup pixel al suo posto */
html.lcg-arcade .navbar-brand img{display:none!important}
html.lcg-arcade .lcg-logo-px{display:inline-block;font-size:18px;line-height:1.5;color:#fff}
.lcg-logo-px b{font-weight:400;color:var(--lcg-red)}

/* card bianche e fasce */
html.lcg-arcade .lcg-band{background:transparent!important;box-shadow:none!important}
html.lcg-arcade .lcg-card{background:#fff!important;border:0!important;border-radius:0!important;clip-path:var(--lcg-px3)}

/* immagini: angoli a 3 gradini + disturbo CRT leggero */
html.lcg-arcade .lcg-px{border-radius:0!important;clip-path:var(--lcg-px3)}
html.lcg-arcade .lcg-crt-rel{position:relative}
html.lcg-arcade .lcg-crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,var(--lcg-scan)) 0 2px,transparent 2px 4px);
  animation:lcgScan .2s steps(2) infinite}
/* le etichette rosse restano pulite, sopra il disturbo */
html.lcg-arcade .lcg-crt :is(.wp-block-cover__inner-container,.wp-block-button,.wp-block-button__link,.btn,figcaption,a:not(:has(img))){position:relative;z-index:2}

/* bottoni ed etichette: gradino singolo */
html.lcg-arcade :is(.wp-block-button__link,.btn,a.btn){font-size:10px!important;line-height:1.6!important;border-radius:0!important;border:0!important;
  background:var(--lcg-red)!important;color:#fff!important;box-shadow:none!important;clip-path:var(--lcg-px1)}
html.lcg-arcade :is(.is-style-outline .wp-block-button__link,.btn-outline-dark,.btn-outline-secondary,.btn-light,.btn-white){
  background:transparent!important;color:#fff!important;border:3px solid var(--lcg-red)!important}

/* tab Awards / Talent scouting: contenitore trasparente, solo l'attivo pieno */
html.lcg-arcade :is([role="tablist"],.lcg-scope .nav-tabs,.lcg-scope .nav-pills){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;gap:14px}
html.lcg-arcade :is([role="tablist"],.lcg-scope .nav-tabs,.lcg-scope .nav-pills) li{background:transparent!important}
html.lcg-arcade :is([role="tab"],.lcg-scope .nav-tabs .nav-link,.lcg-scope .nav-pills .nav-link){background:transparent!important;color:#fff!important;
  border:3px solid var(--lcg-red)!important;border-radius:0!important;clip-path:var(--lcg-px1);font-size:12px!important;white-space:nowrap}
html.lcg-arcade :is([role="tab"][aria-selected="true"],[role="tab"].active,.lcg-scope .nav-tabs .nav-link.active,.lcg-scope .nav-pills .nav-link.active){background:var(--lcg-red)!important;color:#fff!important}

/* riga "LUKE & CLEA COMING SOON…" */
html.lcg-arcade .lcg-teaser,html.lcg-arcade .lcg-teaser *{color:var(--lcg-green)!important;font-size:10px!important;line-height:1.8!important}

/* footer */
html.lcg-arcade :is(#wrapper-footer,.site-footer,.lcg-foot),html.lcg-arcade .lcg-foot{background:#000!important}
html.lcg-arcade footer #menu-social-menu a {font-size: 18px!important}
/* un solo nero: tutti i sotto-blocchi del footer (e la barra copyright) diventano trasparenti */
html.lcg-arcade .lcg-foot *:not(img):not(svg):not(.btn):not(.wp-block-button__link):not(.lcg-coinbtn){background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}
html.lcg-arcade :is(#wrapper-footer,.site-footer,.lcg-foot) :is(p,a,li,span){font-family:'Press Start 2P',monospace!important;font-size:9px!important;line-height:1.9!important;color:#fff!important}

/* =====================================================================
   STATI HOVER / FOCUS
   - il focus usa un anello interno (inset): gli outline verrebbero tagliati dal clip-path a gradini
   - il focus arancione di Bootstrap Italia viene sostituito solo sugli elementi arcade
   ===================================================================== */
html.lcg-arcade :is(.lcg-coinbtn,.wp-block-button__link,.btn,[role="tab"],.nav-tabs .nav-link,.nav-pills .nav-link):focus{outline:0!important;box-shadow:none!important}

/* bottone switch (vista standard e arcade) */
html .lcg-coinbtn,html .lcg-coinbtn span{color:#fff!important}
html .lcg-coinbtn{background:var(--lcg-red)!important}
html .lcg-coinbtn:hover,html .lcg-coinbtn:hover span{background:#fff!important;color:var(--lcg-red)!important}
html .lcg-coinbtn:focus-visible{background:#fff!important;box-shadow:inset 0 0 0 3px var(--lcg-red)!important;outline:0!important}
html .lcg-coinbtn:focus-visible span{color:var(--lcg-red)!important}
html .lcg-coinbtn:active{transform:translateY(1px)}

/* bottoni pieni rossi */
html.lcg-arcade :is(.wp-block-button__link,.btn,a.btn):is(:hover,:focus-visible){background:#fff!important;color:var(--lcg-red)!important}
html.lcg-arcade :is(.wp-block-button__link,.btn,a.btn):focus-visible{box-shadow:inset 0 0 0 3px var(--lcg-red)!important}

/* bottoni outline (bordo rosso, fondo trasparente) */
html.lcg-arcade :is(.is-style-outline .wp-block-button__link,.btn-outline-dark,.btn-outline-secondary,.btn-light,.btn-white):is(:hover,:focus-visible){background:var(--lcg-red)!important;color:#fff!important}
html.lcg-arcade :is(.is-style-outline .wp-block-button__link,.btn-outline-dark,.btn-outline-secondary,.btn-light,.btn-white):focus-visible{box-shadow:inset 0 0 0 3px #fff!important}

/* tab: l'inattivo in hover si riempie di bianco, l'attivo resta rosso */
html.lcg-arcade :is([role="tab"],.lcg-scope .nav-tabs .nav-link,.lcg-scope .nav-pills .nav-link):not(.active):not([aria-selected="true"]):hover{background:#fff!important;color:var(--lcg-red)!important}
html.lcg-arcade :is([role="tab"],.lcg-scope .nav-tabs .nav-link,.lcg-scope .nav-pills .nav-link):focus-visible{box-shadow:inset 0 0 0 3px #fff!important}

/* menu e dropdown */
html.lcg-arcade :is(.navbar a,.nav-link):is(:hover,:focus-visible){color:var(--lcg-red)!important}
html.lcg-arcade :is(.navbar a,.nav-link):focus-visible{outline:2px dashed var(--lcg-red)!important;outline-offset:4px;box-shadow:none!important}
/* voci dei dropdown: fondo rosso e testo bianco (batte la regola rossa dei link navbar) */
html.lcg-arcade .dropdown-menu :is(a,.dropdown-item):is(:hover,:focus-visible),
html.lcg-arcade .dropdown-menu :is(a,.dropdown-item):is(:hover,:focus-visible) *{background:var(--lcg-red)!important;color:#fff!important;outline:0!important;box-shadow:none!important}
/* freccia del dropdown (la "gemma" bianca di Bootstrap Italia) → triangolino rosso a pixel */
html.lcg-arcade .dropdown-menu::before{background:var(--lcg-red)!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  transform:none!important;width:16px!important;height:8px!important;top:-11px!important;
  clip-path:polygon(6px 0,10px 0,10px 4px,14px 4px,14px 8px,2px 8px,2px 4px,6px 4px)}
html.lcg-arcade :is(#wrapper-navbar,header) #header-menu a:is(:hover,:focus-visible),
html.lcg-arcade :is(#wrapper-navbar,header) #header-menu a:is(:hover,:focus-visible) i{color:var(--lcg-red)!important}
html.lcg-arcade :is(#wrapper-navbar,header) #header-menu li.red a:is(:hover,:focus-visible) i{color:#fff!important}

/* link di testo resi bianchi o scuri dal JS */
html.lcg-arcade a.lcg-ink:is(:hover,:focus-visible),html.lcg-arcade a:is(:hover,:focus-visible) .lcg-ink,
html.lcg-arcade a.lcg-ink-dark:is(:hover,:focus-visible),html.lcg-arcade a:is(:hover,:focus-visible) .lcg-ink-dark{color:var(--lcg-red)!important}
html.lcg-arcade .lcg-scope a:not(.btn):not(.wp-block-button__link):not([role="tab"]):focus-visible{outline:2px dashed var(--lcg-red)!important;outline-offset:3px;box-shadow:none!important}

/* etichette .btnlink .linktxt (tile con immagine): in hover fondo rosso e testo bianco.
   Serve perché .lcg-ink / .lcg-ink-dark forzano il colore e il testo finiva nero su nero */
html.lcg-arcade .btnlink:is(:hover,:focus,:focus-visible) .linktxt,
html.lcg-arcade .btnlink:is(:hover,:focus,:focus-visible) .linktxt *{background:var(--lcg-red)!important;color:#fff!important}

/* footer */
html.lcg-arcade :is(#wrapper-footer,.site-footer,.lcg-foot) a:is(:hover,:focus-visible),
html.lcg-arcade :is(#wrapper-footer,.site-footer,.lcg-foot) a:is(:hover,:focus-visible) :is(i,span){color:var(--lcg-red)!important}
html.lcg-arcade :is(#wrapper-footer,.site-footer,.lcg-foot) a:focus-visible{outline:2px dashed var(--lcg-red)!important;outline-offset:3px;box-shadow:none!important}

/* =====================================================================
   PIOGGIA DI SPRITE (livello fisso dietro ai contenuti)
   ===================================================================== */
.lcg-rain{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
html:not(.lcg-rain-on) .lcg-rain{display:none}
.lcg-drop{position:absolute;top:0;display:block;image-rendering:pixelated;will-change:transform}
/* lo sfondo pagina resta solo su <html>, così le sprite si vedono sopra lo sfondo e sotto testi e immagini */
html.lcg-arcade.lcg-rain-on{background:var(--lcg-bg)!important}
html.lcg-arcade.lcg-rain-on :is(body,#page,.site,#content,main,.wrapper:not(#wrapper-navbar):not(.lcg-foot)){background:transparent!important}
html.lcg-rain-on:not(.lcg-arcade){background:var(--lcg-page-bg)!important}
html.lcg-rain-on:not(.lcg-arcade) .lcg-see{background-color:transparent!important}

/* accessibilità: niente animazioni se l'utente le ha disattivate */
@media (prefers-reduced-motion:reduce){
  .lcg-coinbtn::after,.lcg-coin svg,.lcg-hud::after,.lcg-hud .blink,html.lcg-arcade .lcg-crt::after{animation:none!important}
  .lcg-rain{display:none!important}
}