/* Draft Serie A — mobile-first */ /* NIENTE ZOOM: tap ripetuti veloci (aumenta stipendi, avanza settimane/stagione) NON devono zoomare la pagina. touch-action: manipulation su html disabilita il double-tap-zoom in tutto il documento; il pinch è bloccato via viewport (user-scalable=no) + gesturestart preventDefault in index.html (per iOS Safari che ignora il viewport). */ html { touch-action: manipulation; -ms-touch-action: manipulation; } * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } :root { --bg:#0a0a0c; --bg2:#151519; --card:#1c1c21; --card2:#28282f; --gold:#f5c542; --green:#22c55e; --red:#ef4444; --blue:#cdb079; --text:#f1ece1; --muted:#98918a; --line:#33333c; } html,body { height:100%; } /* 🖤 la safe-area / overscroll / barre di Safari continuano col NERO del sito (Mario: "niente barra grigia in basso col dominio"). Lo sfondo su dipinge SOTTO le barre traslucide del browser → sembra un tutt'uno con l'app, stesso colore del theme-color. */ html { background:#08080a; } body { background:radial-gradient(1200px 600px at 50% -100px,#17110a 0%,var(--bg) 60%) #08080a; color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; overflow-x:hidden; min-height:100dvh; } #app { max-width:520px; margin:0 auto; padding:16px; min-height:100dvh; } .screen { display:none; } .screen.active { display:block; animation:screenIn .38s cubic-bezier(.2,.9,.28,1) both; } .hidden { display:none !important; } @keyframes fadein { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} } /* 🎬 transizione fra schermate più cinematografica (site-wide): fade + salita + micro-zoom con easing morbido */ @keyframes screenIn { from{opacity:0; transform:translateY(14px) scale(.985);} 60%{opacity:1;} to{opacity:1; transform:none;} } @media (prefers-reduced-motion: reduce){ .screen.active { animation:none; } } h1,h2,h3 { font-weight:800; letter-spacing:-.02em; } .hint { color:var(--muted); font-size:.85rem; margin:8px 0; } /* HOME */ .home-hero { text-align:center; padding:48px 0 24px; } .logo-ball { font-size:3.5rem; filter:drop-shadow(0 6px 18px rgba(245,197,66,.35)); } .home-logo { display:block; width:min(210px,56vw); height:auto; margin:2px auto; border-radius:26px; filter:drop-shadow(0 10px 26px rgba(245,197,66,.28)); } .home-hero h1 { font-size:3rem; line-height:.95; margin:12px 0; } .home-hero h1 span { color:var(--gold); } .tagline { color:var(--muted); font-size:.9rem; line-height:1.5; } /* Hub: 3 bottoni GRANDI in verticale (Mario) */ .mode-switch { display:flex; flex-direction:column; gap:9px; margin-top:14px; } .mode-tab { text-align:left; background:rgba(30,30,36,.6); border:1px solid var(--line); color:var(--text); font-weight:800; font-size:1.18rem; padding:17px 20px; border-radius:15px; cursor:pointer; transition:all .15s; } .mode-tab.active { background:linear-gradient(135deg,#f5c542,#e8a020); color:#1a1200; border-color:transparent; box-shadow:0 4px 16px rgba(245,197,66,.32); } .mode-panel { display:flex; flex-direction:column; gap:12px; } .mini-row { display:flex; gap:8px; } .mini-row .btn { flex:1; padding:11px 6px; font-size:.92rem; white-space:nowrap; } .mode-panel.hidden { display:none; } .mode-desc { color:var(--muted); font-size:.85rem; line-height:1.5; text-align:center; margin:2px 0 4px; } /* separatore "oppure online" nel pannello Draft (solo-first, v209) */ .or-sep { text-align:center; color:var(--muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin:8px 0 2px; } /* v230: le opzioni ONLINE del Draft raccolte in UN blocco (meno bottoni sparsi → meno confusione) */ .draft-online { display:flex; flex-direction:column; gap:10px; background:rgba(30,30,36,.4); border:1px solid var(--line); border-radius:14px; padding:12px 12px 14px; } .draft-online .or-sep { margin:0 0 2px; } /* v231: nome amico cliccabile → apre il profilo (palmarès + statistiche base) */ .fr-view { background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:0; display:flex; align-items:center; gap:.4em; flex:1; min-width:0; } .fr-view:hover, .fr-view:active { color:var(--gold); } .fr-view .fr-go { color:var(--gold); opacity:.75; margin-left:6px; font-weight:700; } /* v233: Hall of Fame leggende per epoca (righe giocatore) */ .lg-teams { font-size:.82rem; color:var(--muted); margin:0 0 8px; line-height:1.5; } .lg-teams .lg-yr { color:var(--gold); font-weight:700; } .lg-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); } .lg-row:last-child { border-bottom:0; } .lg-rank { width:1.5em; text-align:center; color:var(--muted); font-size:.8rem; flex:none; } .lg-name { flex:1; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lg-club { color:var(--muted); font-size:.76rem; flex:none; max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lg-ovr { flex:none; min-width:2.2em; text-align:center; font-weight:800; color:#0c0c0f; background:linear-gradient(90deg,var(--gold),#ffe9a8); border-radius:7px; padding:2px 6px; font-size:.82rem; } /* v232: card REPUTAZIONE allenatore (titolo + barra livello) */ .rep-card { background:rgba(30,30,36,.5); border:1px solid var(--line); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:9px; } .rep-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .rep-title { font-size:1.06rem; } .rep-title b { color:var(--gold); } .rep-pts { color:var(--gold); font-weight:700; white-space:nowrap; } .rep-pts small { color:var(--muted); font-weight:400; font-size:.72rem; } .rep-bar { height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; } .rep-bar span { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--gold),#ffe9a8); } .rep-next { font-size:.8rem; color:var(--muted); } .rep-next b { color:var(--txt); } .home-buttons { display:flex; flex-direction:column; gap:12px; margin-top:16px; } .join-row { display:flex; gap:8px; } .join-row input { flex:1; text-transform:uppercase; letter-spacing:.3em; text-align:center; } .online-note { text-align:center; color:var(--muted); font-size:.75rem; margin-top:16px; } input[type=text] { background:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--text); font-size:1rem; padding:14px 16px; width:100%; outline:none; } input[type=text]:focus { border-color:var(--gold); } .btn { border:none; border-radius:14px; padding:15px 18px; font-size:1rem; font-weight:700; cursor:pointer; transition:transform .08s ease, filter .15s; color:var(--text); } .btn:active { transform:scale(.97); } .btn:disabled { opacity:.4; pointer-events:none; } /* 🖱️ rifinitura desktop (hover): i bottoni si sollevano/illuminano — su mobile resta solo il press (scale) */ @media (hover:hover){ .btn{ transition:transform .13s cubic-bezier(.2,.8,.3,1), filter .15s, box-shadow .15s; } .btn:hover{ transform:translateY(-1.5px); filter:brightness(1.07); } .btn:active{ transform:scale(.96); } .btn-primary:hover{ box-shadow:0 10px 28px rgba(245,197,66,.42); } .mode-tab:hover{ transform:translateY(-1px); border-color:var(--gold); } } .btn-primary { background:linear-gradient(135deg,#f5c542,#e8a020); color:#1a1200; box-shadow:0 6px 20px rgba(245,197,66,.25); } .btn-secondary { background:var(--card2); border:1px solid var(--line); } .btn-ghost { background:transparent; border:1px dashed var(--line); color:var(--muted); font-weight:600; } .btn-mini { padding:9px 14px; font-size:.85rem; border-radius:10px; background:var(--card2); border:1px solid var(--line); } .btn-roll { width:100%; font-size:1.3rem; padding:22px; animation:pulse 1.8s infinite; } @keyframes pulse { 0%,100%{box-shadow:0 6px 20px rgba(245,197,66,.25);} 50%{box-shadow:0 6px 34px rgba(245,197,66,.55);} } /* LOBBY */ #screen-lobby h2 { margin:24px 0 4px; } .room-code { color:var(--gold); letter-spacing:.15em; } .room-pill { flex:0 0 auto; margin-right:6px; background:rgba(30,30,36,.7); border:1px solid var(--line); border-radius:9px; color:var(--gold); font-weight:800; font-size:.66rem; letter-spacing:.03em; padding:5px 7px; line-height:1; cursor:pointer; white-space:nowrap; } .room-pill:active { transform:scale(.95); } .car-profile { margin-bottom:12px; } .prof-row { display:flex; justify-content:space-between; align-items:center; gap:8px; background:rgba(30,30,36,.6); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:.92rem; } .prof-row .btn-mini { padding:6px 10px; font-size:.78rem; } /* 👤 nome cliccabile → hub profilo */ .prof-open{ display:flex; align-items:center; gap:7px; width:100%; background:transparent; border:none; color:var(--text); font-size:.92rem; cursor:pointer; padding:2px 0; text-align:left; } .prof-open:hover{ opacity:.9; } .prof-open .prof-open-cta{ margin-left:auto; font-size:.74rem; color:var(--gold); background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.35); border-radius:999px; padding:3px 10px; white-space:nowrap; } /* 👤 HUB profilo */ .ph-panel{ max-width:440px; padding:18px 16px 16px; } .ph-head{ display:flex; align-items:center; gap:12px; padding:2px 2px 14px; border-bottom:1px solid var(--line); margin-bottom:14px; } .ph-id{ min-width:0; } .ph-name{ font-size:1.12rem; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .ph-user{ font-size:.8rem; color:var(--muted); margin-top:1px; } .ph-pt{ font-size:.78rem; color:var(--gold); margin-top:5px; } .ph-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .ph-tile{ display:flex; align-items:center; gap:10px; text-align:left; background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:12px; padding:11px 12px; cursor:pointer; color:var(--text); transition:transform .08s ease, background .12s ease, border-color .12s ease; } .ph-tile:hover{ background:rgba(245,197,66,.1); border-color:rgba(245,197,66,.4); transform:translateY(-1px); } .ph-tile:active{ transform:translateY(0); } .ph-ic{ font-size:1.5rem; line-height:1; flex:none; } .ph-tt{ display:flex; flex-direction:column; min-width:0; } .ph-t{ font-weight:700; font-size:.9rem; } .ph-s{ font-size:.72rem; color:var(--muted); line-height:1.15; } .ph-logout{ width:100%; margin-top:14px; } @media (max-width:380px){ .ph-grid{ grid-template-columns:1fr; } } .invite-banner { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:8px; background:rgba(245,197,66,.12); border:1px solid var(--gold); border-radius:12px; padding:9px 12px; font-size:.86rem; color:var(--text); } .invite-banner .inv-actions { display:flex; gap:6px; flex:0 0 auto; } .invite-banner .btn-mini { padding:6px 10px; font-size:.78rem; } .lobby-players { display:flex; flex-direction:column; gap:10px; margin:18px 0; } .lobby-player { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; } .lobby-player .ok { color:var(--green); font-weight:700; } .lobby-player .lob-right { display:inline-flex; align-items:center; gap:10px; } /* 🚪 tasto host per espellere dalla pre-lobby */ .lob-kick { width:26px; height:26px; flex:0 0 26px; border-radius:50%; border:1px solid rgba(229,57,53,.5); background:rgba(229,57,53,.14); color:#ff6b66; font-weight:900; font-size:.82rem; line-height:1; cursor:pointer; padding:0; transition:all .15s; -webkit-tap-highlight-color:transparent; } .lob-kick:hover { background:#e53935; color:#fff; border-color:#e53935; } .setup-block { margin:16px 0; } .setup-block h4 { margin-bottom:8px; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; } .chip-grid { display:flex; flex-wrap:wrap; gap:8px; } .chip { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:600; cursor:pointer; color:var(--text); } .chip.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); } .chip.taken { opacity:.3; pointer-events:none; text-decoration:line-through; } #btn-ready { width:100%; margin-top:12px; } #btn-copylink { width:100%; margin:6px 0 2px; } /* DRAFT */ .draft-header { position:sticky; top:0; background:rgba(9,9,11,.92); backdrop-filter:blur(8px); padding:10px 0; z-index:10; border-bottom:1px solid var(--line); } .draft-counts { display:flex; justify-content:space-between; font-weight:700; font-size:.9rem; } #draft-rerolls { color:var(--gold); } .draft-feed { font-size:.75rem; color:var(--muted); min-height:1.1em; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* nome squadra rollata: nell'header STICKY → sempre visibile mentre scorri la lista giocatori */ .draft-squad-bar { margin-top:6px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #draft-squad { font-size:1.15rem; font-weight:900; color:var(--gold); } #draft-squad-coach { font-size:.8rem; color:var(--muted); font-weight:700; } #roll-stage { margin:18px 0; } .reroll-row { display:flex; gap:8px; justify-content:center; margin:8px 0 14px; } .rolled-players { display:flex; flex-direction:column; gap:6px; } .pcard { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; transition:border-color .15s; } .pcard:not(.dim):hover { border-color:var(--gold); } .pcard.dim { opacity:.32; pointer-events:none; filter:grayscale(.8); } .pcard .roles { font-size:.7rem; font-weight:800; color:var(--blue); width:58px; } .pcard .pname { flex:1; font-weight:600; font-size:.92rem; } .pcard .ovr { font-weight:900; font-size:1.05rem; width:34px; text-align:right; } .ovr.o90 { color:#f5c542; } .ovr.o85 { color:#4ade80; } .ovr.o80 { color:#7dd3fc; } .ovr.o75 { color:#cbd5e1; } .ovr.o0 { color:#8b94ab; } .pcard .why { font-size:.65rem; color:var(--red); } #slot-picker { background:var(--card2); border:1px solid var(--gold); border-radius:16px; padding:16px; margin:14px 0; } #slot-picker h3 { color:var(--gold); } #slot-picker-player { margin:6px 0 10px; font-weight:600; } #slot-options { display:flex; flex-wrap:wrap; gap:8px; } /* PITCH */ .my-team { margin-top:22px; } .my-team h3 { margin-bottom:8px; } #team-avg { color:var(--gold); } .pitch { position:relative; width:100%; aspect-ratio:3/3.4; background:linear-gradient(180deg,#14532d,#166534 45%,#14532d); border:2px solid #2f7d4f; border-radius:16px; overflow:hidden; } .pitch::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg,transparent 0 12%,rgba(255,255,255,.04) 12% 24%); } .pitch::after { content:""; position:absolute; left:50%; top:-60px; width:180px; height:120px; pointer-events:none; transform:translateX(-50%); border:2px solid rgba(255,255,255,.15); border-radius:0 0 90px 90px; } .pslot { position:absolute; transform:translate(-50%,-50%); width:64px; text-align:center; cursor:pointer; } .pslot .dot { width:44px; height:44px; margin:0 auto; border-radius:50%; background:rgba(255,255,255,.10); border:2px dashed rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.75rem; color:rgba(255,255,255,.6); } .pslot.filled .dot { background:#0f172a; border:2px solid var(--gold); color:var(--gold); font-size:.85rem; } .pslot .nm { font-size:.62rem; font-weight:700; margin-top:3px; color:#fff; text-shadow:0 1px 3px #000; line-height:1.1; } /* 🎯 riga età+potenziale sotto il nome sul campo (Mario: a portata di mano, niente click) */ .pslot .pl-ap { font-size:.58rem; line-height:1; margin-top:2px; text-align:center; color:#cfcfd8; white-space:nowrap; text-shadow:0 1px 3px #000; } .pslot .pl-ap small { opacity:.65; } .pslot .pl-ap .pot { margin-left:2px; padding:0 4px; font-size:.58rem; border-radius:6px; } .pslot.hl .dot { border-color:var(--gold); background:rgba(245,197,66,.28); box-shadow:0 0 0 4px rgba(245,197,66,.18), 0 0 22px rgba(245,197,66,.6); animation:glowpulse 1s infinite; } .pslot.clickable, .bslot.clickable { cursor:pointer; } .pslot.clickable .dot { color:var(--gold); font-weight:900; } /* MONDIALE INTERATTIVO (v211): pitch compatto + area scrollabile così titolo/tattiche non vengono mai tagliati nel bottom-sheet */ .nat-pitch { max-width:210px; margin:6px auto; } .nat-scroll { max-height:72vh; overflow-y:auto; overflow-x:hidden; margin:0 -2px 8px; padding:0 2px; } .pslot.hl .nm { color:var(--gold); } @keyframes glowpulse { 0%,100%{ box-shadow:0 0 0 3px rgba(245,197,66,.15), 0 0 14px rgba(245,197,66,.45);} 50%{ box-shadow:0 0 0 6px rgba(245,197,66,.28), 0 0 30px rgba(245,197,66,.85);} } .pcard.sel { border-color:var(--gold); background:linear-gradient(90deg,rgba(245,197,66,.18),var(--card)); box-shadow:0 0 0 1px var(--gold); } .place-hint { background:linear-gradient(90deg,rgba(245,197,66,.16),var(--card2)); border:1px solid var(--gold); border-radius:12px; padding:11px 14px; font-size:.9rem; margin-bottom:10px; animation:fadein .25s; } .place-hint .pos-list { display:inline-block; margin-top:3px; color:var(--gold); font-weight:800; letter-spacing:.02em; } /* barra fissa in basso per schierare (mobile) */ .place-bar { position:fixed; left:0; right:0; bottom:0; z-index:60; background:linear-gradient(180deg, rgba(12,12,15,.9), rgba(7,7,9,.98)); backdrop-filter:blur(14px); border-top:2px solid var(--gold); box-shadow:0 -12px 34px rgba(0,0,0,.55); padding:12px 14px calc(14px + env(safe-area-inset-bottom)); animation:slideup .22s ease; } .place-bar.hidden { display:none; } .place-bar > * { max-width:520px; margin:0 auto; } /* F (Mario): mentre scegli dove piazzare, spazio extra in fondo così la barra fissa NON copre la panchina e puoi scorrere a vederla */ #screen-draft.placing { padding-bottom:170px; } @keyframes slideup { from{ transform:translateY(100%);} to{ transform:none;} } .pb-title { font-size:.85rem; color:var(--muted); margin-bottom:9px; text-align:center; } .pb-title b { color:var(--gold); } .pb-opts { display:flex; gap:8px; flex-wrap:wrap; } .pb-opt { flex:1 1 22%; min-width:66px; padding:16px 8px; border-radius:13px; font-weight:900; font-size:1rem; background:rgba(245,197,66,.16); border:1.5px solid var(--gold); color:var(--gold); cursor:pointer; animation:glowpulse 1.1s infinite; } .pb-opt:active { transform:scale(.95); } .bench { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .bslot { flex:1 1 60px; min-width:60px; background:var(--card); border:1px dashed var(--line); border-radius:10px; padding:7px 4px; text-align:center; font-size:.62rem; color:var(--muted); cursor:pointer; } .bslot.filled { border-style:solid; border-color:var(--line); color:var(--text); } .bslot.hl { border-color:var(--gold); color:var(--gold); animation:pulse 1.2s infinite; } .bslot b { display:block; font-size:.8rem; } #draft-waiting { text-align:center; padding:30px; color:var(--muted); } .spinner { width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--gold); border-radius:50%; margin:14px auto; animation:spin 1s linear infinite; } .dw-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; text-align:left; } .dw-row { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; } .dw-name { font-weight:700; color:var(--text); } .dw-prog { color:var(--muted); font-variant-numeric:tabular-nums; font-weight:700; } .dw-prog.ok { color:var(--green); } @keyframes spin { to{transform:rotate(360deg);} } /* SEASON */ .season-header { display:flex; justify-content:space-between; align-items:center; margin:14px 0; position:sticky; top:0; background:rgba(9,9,11,.92); backdrop-filter:blur(8px); padding:10px 0; z-index:10; } .season-controls { display:flex; gap:8px; } .season-wait { text-align:center; color:var(--gold); font-weight:700; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:14px; } /* 🥀 CONFRONTO ROSE (Cenerentola) */ .cmp-title { text-align:center; margin:14px 0 4px; } .cmp-sub { text-align:center; margin-bottom:6px; } .cmp-row { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; } .cmp-row.mine { border:1px solid var(--gold); border-left:4px solid var(--gold); background:linear-gradient(90deg,rgba(245,197,66,.14),var(--card)); } .cmp-row.cin-weak { border:1px solid #c084fc; border-left:4px solid #c084fc; background:linear-gradient(90deg,rgba(192,132,252,.16),var(--card)); box-shadow:0 0 14px rgba(192,132,252,.16); } .cmp-team { font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; flex-direction:column; gap:1px; min-width:0; } .cmp-team .owner-tag { font-weight:700; } .cmp-best { display:flex; align-items:center; gap:6px; justify-content:flex-end; color:#8b94ab; } .cmp-best .ovr { width:auto; font-size:1rem; } .cmp-ov { display:flex; flex-direction:column; align-items:center; min-width:42px; } .cmp-ov b { font-size:1.25rem; font-weight:900; color:var(--gold); line-height:1; } .cmp-ov small { font-size:.6rem; color:#8b94ab; letter-spacing:.05em; } .round-results { display:flex; flex-direction:column; gap:5px; margin-bottom:18px; } .res-row { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; background:var(--card); border-radius:10px; padding:8px 12px; font-size:.85rem; } .res-row.mine { border:1px solid var(--gold); border-left:4px solid var(--gold); background:linear-gradient(90deg,rgba(245,197,66,.16),var(--card)); box-shadow:0 0 14px rgba(245,197,66,.15); } .res-row.h2h { border:1px solid var(--red); border-left:4px solid var(--red); background:linear-gradient(90deg,rgba(239,68,68,.2),var(--card)); box-shadow:0 0 16px rgba(239,68,68,.22); } /* H3 (Mario): nomi squadra IN RISALTO e leggibili nel salta-stagioni (prima si confondevano) */ .res-row .h, .res-row .a { font-weight:800; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .res-row .h { text-align:right; } .res-row .a { text-align:left; } .res-row .s { font-weight:900; color:var(--gold); white-space:nowrap; } .res-row .own { color:var(--gold); font-weight:900; } .res-row.h2h .own { color:#fff; } .res-tag { grid-column:1/-1; font-size:.66rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; } .res-row.h2h .res-tag { color:#ffb4b4; } /* nome squadra nel lobby (draft) */ .team-input { width:100%; box-sizing:border-box; background:var(--card); border:1px solid var(--line); border-radius:10px; color:#fff; font-size:16px; font-weight:700; padding:12px 14px; } .team-input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,197,66,.18); } /* 🔐 (Mario) login a due sezioni: Accedi / Crea account */ .prof-tabs { display:flex; gap:8px; margin:6px 0 12px; } .prof-tab { flex:1; padding:11px 8px; border-radius:12px; border:1px solid var(--line); background:var(--card2); color:var(--muted); font-weight:800; font-size:.95rem; cursor:pointer; transition:all .15s; } .prof-tab.active { background:linear-gradient(135deg,#ffe89a,var(--gold) 60%,var(--gold-deep)); color:#1a1200; border-color:var(--gold); box-shadow:0 6px 16px -8px rgba(245,197,66,.5); } .prof-tab:active { transform:scale(.97); } .standings table { width:100%; border-collapse:collapse; font-size:.82rem; } .standings th { color:var(--muted); font-size:.68rem; text-transform:uppercase; padding:6px 4px; text-align:left; } .standings td { padding:7px 4px; border-top:1px solid var(--line); } .standings tr.mine td { background:rgba(245,197,66,.16); font-weight:800; } .standings tr.mine td:first-child { box-shadow:inset 3px 0 0 var(--gold); } .standings tr.mine td.pos { color:var(--gold); } .standings td.pos { color:var(--muted); width:22px; } .standings tr.z-ucl td.pos { color:#3d9be0; font-weight:900; box-shadow:inset 3px 0 0 #3d9be0; } .standings tr.z-rel td.pos { color:var(--red); box-shadow:inset 3px 0 0 var(--red); } .standings tr.z-barrage td.pos { color:#f5a623; font-weight:800; box-shadow:inset 3px 0 0 #f5a623; } .standings td.pts { font-weight:900; text-align:right; } .owner-tag { font-size:.65rem; color:var(--gold); } /* MATCH H2H */ .match-arena { text-align:center; padding-top:28px; } .btn-skip { position:absolute; top:6px; right:6px; z-index:5; background:rgba(30,30,36,.85); border:1px solid var(--line); color:var(--muted); font-weight:800; font-size:.78rem; padding:6px 11px; border-radius:999px; cursor:pointer; } .btn-skip:active { transform:scale(.96); } .btn-2x { left:6px; right:auto; } .btn-2x.on { background:var(--gold); color:#1a1200; border-color:var(--gold); } .match-badge { display:inline-block; background:var(--red); color:#fff; font-weight:900; font-size:.75rem; letter-spacing:.15em; padding:6px 14px; border-radius:999px; margin-bottom:22px; } .match-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; } .match-team { font-weight:800; font-size:1rem; } .match-team small { display:block; color:var(--gold); font-size:.7rem; font-weight:600; } .match-result { font-size:2.6rem; font-weight:900; font-variant-numeric:tabular-nums; } .match-minute { color:var(--muted); font-weight:700; margin:10px 0 16px; font-variant-numeric:tabular-nums; } .match-events { display:flex; flex-direction:column-reverse; gap:7px; max-height:44dvh; overflow-y:auto; text-align:left; } .mev { background:var(--card); border-radius:10px; padding:9px 12px; font-size:.85rem; animation:fadein .3s; } .mev.goal { border:1px solid var(--gold); background:linear-gradient(90deg,rgba(245,197,66,.16),var(--card)); font-weight:700; } .mev.red { border-left:3px solid var(--red); } .mev.yellow { border-left:3px solid #eab308; } #screen-cup h2 { text-align:center; } .cup-stage-title { text-align:center; font-size:1.05rem; font-weight:800; color:var(--gold); margin:8px 0 14px; } #btn-cup-start { margin-bottom:8px; } .mev .min { color:var(--muted); font-weight:800; margin-right:8px; } .mev-fab { color:var(--muted); font-weight:500; font-style:italic; opacity:.9; } /* cronaca Fable: la battuta ironica appesa al gol */ #btn-match-done { margin-top:16px; width:100%; } /* 🧾 RECAP fine partita (statistiche) — sostituisce la telecronaca a fine 90' (Mario) */ .mrecap { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 12px 14px; animation:fadein .35s; } .mrec-head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:800; font-size:.92rem; } .mrec-head .mrec-t { display:flex; align-items:center; gap:5px; flex:1; min-width:0; } .mrec-head .mrec-t-r { justify-content:flex-end; text-align:right; } .mrec-head .mrec-t img { width:20px; height:20px; object-fit:contain; } .mrec-sc { font-size:1.2rem; color:var(--gold); white-space:nowrap; padding:0 6px; } .mrec-ttl { text-align:center; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.04em; margin:10px 0 6px; } .mrec-stats { display:flex; flex-direction:column; gap:6px; } .mrec-row { display:flex; align-items:center; gap:10px; } .mrec-row .mrec-v { flex:0 0 46px; text-align:center; font-weight:800; font-size:.92rem; color:var(--muted); } .mrec-row .mrec-v.w { color:var(--text); } .mrec-row .mrec-lab { flex:1; text-align:center; color:var(--muted); font-size:.72rem; } .mrec-bar { height:5px; border-radius:3px; background:rgba(255,255,255,.12); margin-top:4px; overflow:hidden; } .mrec-bar i { display:block; height:100%; background:var(--gold); } /* TABELLA RIGORI (si tira / si para / esito) */ .pen-tb { background:var(--card); border:1px solid var(--gold); border-radius:12px; padding:10px 12px; animation:fadein .3s; } /* tabella rigori LIVE (Draft): card sticky sopra il feed, sempre visibile mentre la telecronaca scorre */ .pen-live { position:sticky; top:6px; z-index:4; max-width:520px; margin:0 auto 8px; box-shadow:0 3px 16px rgba(0,0,0,.4); } .pen-live .pen-tb-hd::after { content:" · in diretta"; color:var(--red); font-size:.66em; font-weight:800; letter-spacing:.08em; } .pen-tb-hd { text-align:center; font-weight:900; letter-spacing:.06em; color:var(--gold); margin-bottom:8px; } .pen-tb-cols { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .pen-tb-col { background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:7px 8px; min-width:0; } .pen-tb-team { font-size:.78rem; font-weight:800; color:var(--text); text-align:center; padding-bottom:6px; border-bottom:1px solid var(--line); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pen-tb-team b { color:var(--gold); } .pen-tb-kicks { display:flex; flex-direction:column; gap:4px; } .pen-kick { display:flex; align-items:center; gap:6px; font-size:.8rem; padding:3px 5px; border-radius:7px; background:var(--card); } .pen-kick .pk-ic { flex:0 0 auto; font-size:.95rem; } .pen-kick .pk-tk { flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pen-kick.ok { background:linear-gradient(90deg,rgba(245,197,66,.14),var(--card)); } .pen-kick.no { opacity:.7; } .pen-recap-win { text-align:center; margin-top:10px; padding-top:8px; border-top:1px solid var(--line); color:var(--gold); font-weight:800; } .pen-recap-win .min { margin-right:4px; } .pen-kick.pending { opacity:.6; } .pen-kick.ok { border-left:3px solid var(--green); } .pen-kick.no { border-left:3px solid var(--red); opacity:.85; } .pen-tb-verdict { text-align:center; font-size:.9rem; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); } .pen-tb-verdict.win { color:var(--gold); font-weight:800; } /* ============ CARRIERA ============ */ .car-h4 { margin:18px 0 8px; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; } .car-clubs { display:grid; grid-template-columns:1fr 1fr; gap:7px; } .car-club { text-align:left; background:rgba(30,30,36,.62); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; padding:9px 11px; cursor:pointer; color:var(--text); } .car-club.sel { border-color:var(--gold); background:rgba(245,197,66,.16); } .car-club.taken { opacity:.35; pointer-events:none; } .car-club.taken .cc-name { text-decoration:line-through; } .car-club .cc-name { display:block; font-weight:800; font-size:.95rem; } .car-club .cc-meta { display:block; color:var(--muted); font-size:.68rem; margin-top:2px; } #btn-car-ready { width:100%; margin-top:14px; } .dash-header { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(180deg,rgba(7,7,9,.96),rgba(7,7,9,.85)); backdrop-filter:blur(10px); padding:12px 4px; border-bottom:1px solid var(--line); } .dash-home { flex:0 0 auto; background:rgba(30,30,36,.7); border:1px solid var(--line); border-radius:10px; font-size:1.05rem; line-height:1; padding:7px 9px; margin-right:8px; cursor:pointer; } .dash-home:active { transform:scale(.95); } .setup-home { display:inline-block; margin-bottom:10px; } /* tasto EMERGENZA host (online): flottante, sempre raggiungibile → sblocca/ricarica la partita per tutti */ .host-reload { position:fixed; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:150; width:46px; height:46px; border-radius:50%; background:rgba(30,30,36,.92); border:1px solid var(--gold); color:var(--gold); font-size:1.25rem; line-height:1; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.5); } .host-reload.hidden { display:none; } .host-reload:active { transform:scale(.94); } /* 💾 tasto SALVA sempre a portata (Mario): piccolo, non invadente, angolo in basso a destra, cliccabile in ogni schermata di carriera */ #btn-quick-save { position:fixed; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:150; padding:6px 11px; border-radius:11px; border:1px solid var(--gold); background:rgba(14,14,18,.82); color:var(--gold); font:700 .72rem system-ui,sans-serif; line-height:1; cursor:pointer; opacity:.72; box-shadow:0 4px 14px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:opacity .15s, transform .1s; } #btn-quick-save:hover { opacity:1; } #btn-quick-save:active { transform:scale(.93); opacity:1; } #btn-quick-save.hidden { display:none; } /* 🐞 tasto SEGNALA BUG: piccolissimo, in basso a sinistra, su OGNI schermata (Mario) */ #btn-bug { position:fixed; left:6px; bottom:calc(6px + env(safe-area-inset-bottom)); z-index:150; padding:5px 9px; border-radius:10px; border:1px solid #5a3a3a; background:rgba(20,13,13,.78); color:#f0b6b6; font:600 .68rem system-ui,sans-serif; line-height:1; cursor:pointer; opacity:.66; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:opacity .15s, transform .1s; } #btn-bug:hover, #btn-bug:active { opacity:1; transform:scale(1.06); } #btn-bug.hidden { display:none; } /* 🐞 bollicina-invito periodica accanto alla coccinella: minuscola, non-invasiva, con codina che punta al tastino */ #bug-nudge { position:fixed; left:42px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:150; max-width:52vw; padding:5px 10px; border-radius:11px; border:1px solid #6a3e3e; background:linear-gradient(180deg,#2a1414,#1c0f0f); color:#ffdada; font:700 .68rem system-ui,sans-serif; line-height:1; white-space:nowrap; cursor:pointer; box-shadow:0 5px 16px rgba(0,0,0,.55); opacity:0; transform:translateX(-8px) scale(.96); transform-origin:left center; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.28,1); pointer-events:none; } #bug-nudge.show { opacity:.97; transform:none; pointer-events:auto; } #bug-nudge.hidden { display:none; } #bug-nudge::before { content:''; position:absolute; left:-5px; bottom:8px; width:9px; height:9px; background:#2a1414; border-left:1px solid #6a3e3e; border-bottom:1px solid #6a3e3e; transform:rotate(45deg); } /* 🐞 form + lista segnalazioni (sezione admin) */ #bug-text { font:inherit; font-size:.95rem; padding:8px; border-radius:9px; border:1px solid var(--card2); background:rgba(0,0,0,.25); color:var(--text); margin:6px 0; } .bug-list { max-height:60vh; overflow-y:auto; text-align:left; margin-top:8px; } .bug-row { border:1px solid var(--card2); border-radius:9px; padding:8px 10px; margin-bottom:8px; background:rgba(255,255,255,.02); } .bug-meta { font-size:.72rem; color:#9a9aa2; margin-bottom:4px; } .bug-txt { font-size:.9rem; white-space:pre-wrap; word-break:break-word; } .bug-tabs { display:flex; gap:8px; margin:8px 0 4px; } .bug-acts { display:flex; gap:6px; margin-top:8px; } .bug-acts .btn-mini { padding:3px 9px; font-size:.72rem; } .bug-done { border-color:#3a6a3a !important; color:#a6e6a6 !important; } .bug-del { border-color:#6a3a3a !important; } .bug-row.done { opacity:.55; } .bug-row.done .bug-txt { text-decoration:line-through; } .dash-club { flex:1 1 auto; min-width:0; overflow:hidden; } .dash-club span { font-weight:900; font-size:1.15rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* 🔧 il nome club fa ELLISSI invece di accavallarsi al budget (Mario) */ .dash-club small { line-height:1.15; } /* la STAGIONE/anno può andare a capo → sempre LEGGIBILE (Mario: "non si legge a che anno sei") */ .dash-date-yr { color:var(--gold); font-weight:800; } /* l'ANNO in evidenza */ .btn-continue { border:1px solid var(--gold); } .dash-club small, .dash-budget small { display:block; color:var(--muted); font-size:.68rem; } /* 📱 telefoni stretti: header compatto ma tutto leggibile (anno + club + budget) */ @media (max-width: 420px) { .dash-header { padding:10px 3px; } .dash-home, .dash-info { padding:6px 7px; font-size:.98rem; margin-right:5px; } .dash-club { flex:1 1 auto; min-width:96px; } /* 🔧 (Mario) garantisce spazio a NOME SQUADRA + ANNO (non più tagliati a "I..."/"2...") */ .dash-club span { font-size:1.0rem; } .dash-club small { font-size:.62rem; } .dash-budget small { display:none; } /* 🔧 su telefoni stretti nascondo "trasf./ingaggi" (le icone 💰/💵 bastano) → libera spazio al club */ .dash-budget { min-width:0; padding:4px 6px; gap:1px; } .dash-budget span#dash-budget, .dash-budget span#dash-wage { font-size:.82rem; } .dash-budget .bud-ic { font-size:.62rem; } .room-pill { font-size:.6rem; padding:5px 6px; margin-right:5px; } } .dash-budget { text-align:right; display:flex; flex-direction:column; gap:2px; flex:0 0 auto; white-space:nowrap; background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:5px 9px; min-width:114px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .dash-budget .bud-row { display:flex; gap:5px; align-items:center; justify-content:flex-end; line-height:1.1; } .dash-budget .bud-ic { font-size:.72rem; opacity:.9; margin-right:auto; } /* icona a sinistra, numero a destra */ .dash-budget span#dash-budget, .dash-budget span#dash-wage { font-weight:900; font-size:1.02rem; letter-spacing:.2px; } .dash-budget span#dash-budget { color:var(--green); } .dash-budget span.wage { color:var(--gold); } .dash-budget .bud-row small { display:inline; color:var(--muted); font-size:.56rem; text-transform:uppercase; letter-spacing:.4px; min-width:44px; text-align:left; } .wage-gauge { height:4px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:3px; } .wage-gauge-fill { display:block; height:100%; width:0; border-radius:3px; background:var(--green); transition:width .55s cubic-bezier(.4,0,.2,1), background-color .3s; } .wage-gauge-fill.warn { background:var(--gold); } .wage-gauge-fill.over { background:#e0564b; } @keyframes budPulse { 0%{transform:scale(1);} 30%{transform:scale(1.16); filter:brightness(1.4);} 100%{transform:scale(1);} } .bud-pulse { animation:budPulse .5s ease; display:inline-block; } /* (Mario) TUTTI i tab visibili senza scorrimento: griglia che si adatta (4 per riga su telefono → 2 righe, una sola riga su schermi larghi) */ .dash-tabs { position:sticky; top:52px; z-index:19; display:grid; grid-template-columns:repeat(auto-fit, minmax(74px, 1fr)); gap:5px; background:rgba(7,7,9,.92); backdrop-filter:blur(8px); padding:8px 0; } .dash-tab { white-space:nowrap; border:none; background:var(--card2); color:var(--muted); font-weight:700; font-size:.72rem; padding:9px 4px; border-radius:10px; cursor:pointer; text-align:center; overflow:hidden; text-overflow:ellipsis; min-width:0; } .dash-tab.active { background:var(--gold); color:#1a1200; } #dash-body { padding-top:12px; padding-bottom:40px; } /* ===== MANUALE della carriera (tasto 📖 nell'header → modale accordion) ===== */ .dash-info { flex:0 0 auto; background:rgba(30,30,36,.7); border:1px solid var(--line); border-radius:10px; font-size:1.05rem; line-height:1; padding:7px 9px; margin-right:8px; cursor:pointer; } .dash-info:active { transform:scale(.95); } /* 🎯 tasto Sfide in header carriera + badge "quante te ne mancano" */ /* 📩 messaggio admin mirato */ .adminmsg-panel { max-width:420px; } .adminmsg-text { font-size:1.05rem; font-weight:700; line-height:1.5; color:var(--text); margin:12px 4px 0; white-space:pre-wrap; word-break:break-word; } .dash-sfide, .pc-sfide-btn, .pcf-sfide-btn { position:relative; } .dash-sfide-n, .pc-sfide-n, .pcf-sfide-n { position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--gold); color:#1a1400; font-size:.62rem; font-weight:900; line-height:16px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.5); } .man-scroll { max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch; margin-top:4px; } .man-intro { font-size:.88rem; color:var(--text); background:linear-gradient(120deg,rgba(245,197,66,.13),rgba(245,197,66,.11)); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:0 0 12px; } .man-intro b { color:var(--gold); } .man-sec { background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; overflow:hidden; flex-shrink:0; } /* non schiacciare le sezioni del manuale in un .cl-body corto (stesso fix delle righe hub) */ .man-sec > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 12px; border-left:3px solid var(--gold); font-weight:800; } .man-sec > summary::-webkit-details-marker { display:none; } .man-sec > summary:active { background:rgba(255,255,255,.03); } .man-sec[open] > summary { background:rgba(255,255,255,.02); } .man-ico { flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; background:rgba(245,197,66,.16); } .man-tt { flex:1 1 auto; font-size:.95rem; } .man-arrow { flex:0 0 auto; color:var(--muted); transition:transform .18s ease; font-size:.8rem; } .man-sec[open] > summary .man-arrow { transform:rotate(90deg); } .man-body { padding:2px 13px 13px 15px; font-size:.85rem; color:var(--text); line-height:1.5; } .man-body p { margin:8px 0; } .man-body ul { margin:6px 0; padding-left:17px; } .man-body li { margin:5px 0; } .man-body .g{color:var(--gold);font-weight:700} .man-body .gr{color:var(--green);font-weight:700} .man-body .bl{color:#cdb079;font-weight:700} .man-body .rd{color:var(--red);font-weight:700} .man-body .pu{color:#a78bfa;font-weight:700} .man-body .pill { display:inline-block; background:var(--card2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.78rem; font-weight:700; white-space:nowrap; } .man-tip { margin-top:10px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.3); border-radius:9px; padding:7px 10px; font-size:.81rem; } .man-tip b { color:var(--green); } .man-sec.a-blue>summary{border-left-color:#3b82f6}.man-sec.a-blue .man-ico{background:rgba(245,197,66,.16)} .man-sec.a-green>summary{border-left-color:#22c55e}.man-sec.a-green .man-ico{background:rgba(34,197,94,.16)} .man-sec.a-cyan>summary{border-left-color:#22d3ee}.man-sec.a-cyan .man-ico{background:rgba(34,211,238,.16)} .man-sec.a-purple>summary{border-left-color:#a78bfa}.man-sec.a-purple .man-ico{background:rgba(167,139,250,.18)} .man-sec.a-orange>summary{border-left-color:#fb923c}.man-sec.a-orange .man-ico{background:rgba(251,146,60,.16)} .man-sec.a-red>summary{border-left-color:#ef4444}.man-sec.a-red .man-ico{background:rgba(239,68,68,.16)} .man-sec.a-teal>summary{border-left-color:#2dd4bf}.man-sec.a-teal .man-ico{background:rgba(45,212,191,.16)} /* ===== Lista "Le mie carriere": azioni Riprendi + Elimina ===== */ .mycar-actions { flex:0 0 auto; display:flex; align-items:center; gap:5px; } .mycar-del { padding:6px 8px; border:1px solid rgba(239,68,68,.45); color:var(--red); background:rgba(239,68,68,.08); } .mycar-del:active { transform:scale(.94); background:rgba(239,68,68,.18); } .rosa-top { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; margin-bottom:12px; font-size:.9rem; } .rosa-role { color:var(--gold); font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; } /* H3 — intestazione risultati ANCORATA: resta visibile mentre scorri i risultati (multi-lega/stagione) → capisci sempre "chi è chi" */ .rosa-role.res-head { position:sticky; top:96px; z-index:14; background:rgba(7,7,9,.95); backdrop-filter:blur(8px); font-size:.82rem; color:var(--gold); margin:12px 0 4px; padding:7px 2px 6px; border-bottom:1px solid rgba(245,197,66,.35); box-shadow:0 6px 10px -8px rgba(0,0,0,.6); } /* filtro/ordine panchina (overall / ruolo) */ .bench-sort { float:right; display:inline-flex; gap:4px; text-transform:none; letter-spacing:0; } .bs-btn { background:var(--card2); border:1px solid var(--line); color:var(--muted); font-weight:700; font-size:.64rem; padding:3px 7px; border-radius:8px; cursor:pointer; } .bs-btn.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); } .pl-row { display:flex; align-items:center; gap:7px; background:rgba(30,30,36,.55); border:1px solid var(--line); border-radius:11px; padding:9px 10px; margin-bottom:5px; } .pl-row[data-buy] { cursor:pointer; } .pl-row[data-buy]:active { transform:scale(.99); } .pl-row .roles { flex:0 0 42px; width:42px; font-size:.58rem; font-weight:800; color:var(--blue); line-height:1.15; letter-spacing:-.02em; } .pl-name { flex:1 1 0; min-width:0; font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pl-name small { display:block; color:var(--muted); font-size:.66rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 🏷️ (Mario) tag del clan accanto al nome (classifiche, lobby) */ .cb-clan-tag { font-size:.72rem; font-weight:800; color:var(--gold); opacity:.92; letter-spacing:.02em; } .pl-row .ovr { flex:0 0 auto; width:24px; text-align:right; font-weight:900; font-size:1rem; } .pl-val { flex:0 0 auto; font-weight:800; color:#9fe6b0; font-size:.78rem; min-width:44px; text-align:right; } .pl-buy { flex:0 0 auto; color:var(--gold); font-weight:800; font-size:.72rem; white-space:nowrap; } .pl-row.mine { border-color:var(--gold); background:rgba(245,197,66,.1); } .pl-row.pl-human { border-color:rgba(120,170,255,.5); background:rgba(90,140,240,.1); } /* giocatore di un ALTRO allenatore umano (offerta = trattativa) */ .pl-row.injured { border-color:rgba(239,120,120,.55); background:rgba(239,120,120,.08); } .pslot.injured .dot { border-color:#ef7878; box-shadow:0 0 0 3px rgba(239,120,120,.25); } .pl-sell { background:none; border:1px solid var(--line); color:var(--gold); border-radius:8px; padding:5px 8px; font-size:.9rem; cursor:pointer; touch-action:none; flex:0 0 auto; } .final-stats { margin:16px 0 8px; text-align:left; } .fs-title { color:var(--gold); font-size:.95rem; font-weight:800; margin:16px 0 8px; } .mkt-bar { position:sticky; top:96px; background:rgba(7,7,9,.9); backdrop-filter:blur(8px); padding:8px 0; z-index:15; } #mkt-q { width:100%; margin-bottom:7px; } .mkt-filters { display:flex; gap:6px; flex-wrap:wrap; } .mkt-filters select { flex:1 1 70px; min-width:70px; background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:9px 6px; font-size:.82rem; } .mkt-closed, .mkt-more { text-align:center; color:var(--muted); padding:14px; font-size:.85rem; } .mkt-more-btn { display:block; width:100%; margin:10px 0 4px; } /* editor formazione */ .form-bar { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:10px; } .form-chip { flex:0 0 auto; background:var(--card2); border:1px solid var(--line); color:var(--muted); font-weight:800; font-size:.82rem; padding:9px 12px; border-radius:10px; cursor:pointer; } .form-chip.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); } .form-auto { flex:0 0 auto; background:var(--card2); border:1px dashed var(--gold); color:var(--gold); font-weight:800; font-size:.82rem; padding:9px 12px; border-radius:10px; cursor:pointer; } .drag-hint { color:var(--muted); font-size:.72rem; } .ment-bar { display:flex; gap:6px; margin-bottom:10px; } .ment-chip { flex:1; background:var(--card2); border:1px solid var(--line); color:var(--muted); font-weight:700; font-size:.8rem; padding:10px 4px; border-radius:10px; cursor:pointer; } .ment-chip.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); } /* barra degli 8 STILI: va a capo su più righe (niente sfondamento orizzontale della pagina su mobile stretti) */ .style-bar { flex-wrap:wrap; } .style-bar .ment-chip { flex:1 1 22%; min-width:0; } /* stile INCOMPATIBILE con la mentalità scelta (es. catenaccio con Offensivo): non selezionabile, spento */ .ment-chip.locked { opacity:.32; cursor:not-allowed; text-decoration:line-through; } .st-pos { color:var(--muted); font-weight:800; width:22px; text-align:center; } .st-num { font-weight:900; color:var(--gold); min-width:48px; text-align:right; } .mine-txt { color:var(--gold); } /* 👥 I tuoi giocatori (Statistiche): riga gol/inviolate · presenze · crescita */ .msq-nums { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:118px; flex:0 0 auto; white-space:nowrap; } .msq-b { font-weight:800; color:var(--txt); font-size:.78rem; } .msq-g { font-weight:800; font-size:.76rem; } /* etichetta divisione nel confronto allenatori dello Storico */ .hist-div { font-weight:700; color:var(--muted); font-size:.86em; } /* verde del campo = SCORRI la pagina (pan-y); solo i giocatori (.pslot) catturano il tocco per trascinarli. Durante un drag attivo il preventDefault sul pointermove blocca comunque lo scroll → il trascinamento non si rompe. */ #screen-car-dash .pitch { touch-action:pan-y; margin-bottom:6px; } #screen-car-dash .pslot { cursor:grab; touch-action:none; } #screen-car-dash .pslot .nm { max-width:78px; } .pslot .dot.off { border-color:#fca5a5 !important; color:#fca5a5 !important; } .pslot.drag-over .dot { border-color:var(--green); background:rgba(34,197,94,.3); box-shadow:0 0 18px rgba(34,197,94,.7); transform:scale(1.12); } /* 🎯 slot fuori-ruolo (Carriera): rosso = non puoi schierarlo lì */ .pslot.drag-over-bad .dot { border-color:#ef4444; background:rgba(239,68,68,.28); box-shadow:0 0 16px rgba(239,68,68,.6); transform:scale(1.06); } #reserves .pl-row { touch-action:pan-y; } /* swipe = scorri la lista; TIENI PREMUTO ~170ms = afferra (kanban) */ /* niente selezione testo / callout "copia-incolla" mentre trascini (iOS) */ #reserves .pl-row, .drag-grip, #screen-car-dash .pitch, #screen-car-dash .pslot, #screen-car-dash .pslot .nm { -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; } .pl-row.drag-src { opacity:.35; } /* la card afferrata "si solleva" */ .drag-grip { color:var(--gold); font-size:1.4rem; cursor:grab; touch-action:none; padding:8px 14px 8px 6px; margin:-6px 0; align-self:stretch; display:flex; align-items:center; } .drag-grip:active { cursor:grabbing; } #reserves.drag-over { outline:2px dashed var(--green); outline-offset:2px; border-radius:12px; background:rgba(34,197,94,.06); } .drag-ghost { position:fixed; z-index:200; transform:translate(-50%,-140%); background:var(--gold); color:#1a1200; font-weight:900; font-size:.82rem; padding:8px 12px; border-radius:10px; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.5); white-space:nowrap; } /* tasto vendi / etichetta prestito sul campo */ .pslot-sell { position:absolute; top:-9px; right:-9px; background:#0f172a; border:1px solid var(--gold); color:var(--gold); border-radius:50%; width:25px; height:25px; font-size:.72rem; line-height:1; cursor:pointer; touch-action:none; padding:0; z-index:5; } .pslot-loan { position:absolute; top:-8px; right:-8px; font-size:.8rem; z-index:3; } .pl-loan { color:var(--muted); font-size:.72rem; font-weight:700; flex:0 0 auto; padding:5px 6px; white-space:nowrap; } /* tasto info giocatore (ℹ️) */ .pl-info { background:none; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:5px 7px; font-size:.82rem; cursor:pointer; touch-action:none; flex:0 0 auto; } .pslot-info { position:absolute; top:-9px; left:-9px; background:#0f172a; border:1px solid var(--line); border-radius:50%; width:25px; height:25px; font-size:.7rem; line-height:1; cursor:pointer; touch-action:none; padding:0; z-index:5; } /* 👆 TOCCHI PRECISI (Mario): area cliccabile generosa senza ingrandire il pulsante (vale per ℹ️ e 💰 sul campo) */ .pslot-info::after, .pslot-sell::after { content:""; position:absolute; inset:-8px; border-radius:14px; } /* il PORTIERE è in fondo al campo: sollevo il suo slot così ℹ️/💰 non finiscono SOTTO le etichette-nome dei difensori (prima erano difficili da toccare) */ .pslot.gk { z-index:4; } .pslot.gk .pslot-info, .pslot.gk .pslot-sell, .pslot.gk .pslot-loan { z-index:6; } /* modale info giocatore */ .pinfo-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; } .pinfo-cell { background:rgba(17,17,21,.55); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:.86rem; } .pinfo-cell span { display:block; color:var(--muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px; } /* SIMMETRIA: la cella Potenziale è sempre l'ultima. Se resta ORFANA (numero celle dispari, es. quando c'è la Nazione) occupa l'intera riga invece di restare storta a sinistra; contenuto centrato e bottone Osservatore a tutta larghezza. */ .pinfo-grid .pinfo-cell:last-child:nth-child(odd) { grid-column:1 / -1; } .pinfo-grid .pinfo-cell:last-child { text-align:center; } .pinfo-grid .pinfo-cell:last-child .btn-mini { display:block; width:100%; margin-top:6px; } .pinfo-warn { background:rgba(243,166,166,.1); border:1px solid rgba(243,166,166,.3); border-radius:10px; padding:8px 11px; font-size:.82rem; margin:6px 0; } .pinfo-renew { background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.3); border-radius:10px; padding:10px 12px; margin:8px 0; font-size:.84rem; } .pinfo-renew .btn { width:100%; margin-top:8px; } .loanout-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; } .loanout-row > span { color:var(--muted); font-size:.78rem; flex:1 1 100%; margin-bottom:2px; } .loy, .lop { flex:1 1 0; min-width:64px; } .loy.sel, .lop.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); font-weight:800; } .pl-row.loaned-out { opacity:.72; } .pl-row.loaned-out .drag-grip { visibility:hidden; } /* codice salvataggio carriera */ .save-code { font-family:ui-monospace,monospace; font-size:1.9rem; font-weight:900; letter-spacing:.28em; text-align:center; color:var(--gold); background:rgba(17,17,21,.6); border:1px dashed var(--gold); border-radius:12px; padding:14px 10px; margin:10px 0 14px; user-select:all; } /* mercato tra allenatori umani */ .deal-row { display:flex; align-items:center; gap:8px; background:rgba(17,17,21,.55); border:1px solid var(--line); border-radius:12px; padding:9px 11px; margin-bottom:6px; } .deal-txt { flex:1 1 0; min-width:0; font-size:.82rem; } .deal-btns { flex:0 0 auto; display:flex; gap:5px; } .hdeal-clubs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; } .hdeal-clubs .hdeal-club { flex:1 1 auto; } .hdeal-types { display:flex; gap:6px; margin:10px 0; } .hdeal-types .chip { flex:1 1 0; text-align:center; } .hswap-p, .hgive-p { background:rgba(17,17,21,.6); border:1px solid var(--line); border-radius:9px; padding:7px 9px; font-size:.8rem; cursor:pointer; color:var(--fg); } .hswap-p.sel, .hgive-p.sel { border-color:var(--gold); background:rgba(212,175,55,.14); } /* rigori interattivi: overlay a schermo intero */ .pen-ov { position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; background:rgba(4,6,12,.86); backdrop-filter:blur(6px); padding:16px; } .pen-card { width:100%; max-width:420px; text-align:center; } .pen-card-tb { background:var(--card); border:1px solid var(--gold); border-radius:14px; padding:12px; } .pen-card-tb .pen-tb-hd { margin-bottom:8px; } .pen-card-tb .pen-turn, .pen-card-tb .pen-goal, .pen-card-tb .pen-title, .pen-card-tb .pen-msg, .pen-card-tb .pen-last, .pen-card-tb .pen-duel, .pen-card-tb .pen-wait { margin-top:10px; } .pen-card-tb .pen-kick.pending { opacity:1; border-left:3px solid var(--gold); animation:pulse 1.1s infinite; } .pen-h { font-size:1.15rem; font-weight:800; margin-bottom:10px; line-height:1.3; } .pen-strip { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:24px; margin-bottom:8px; } .pen-strip .pk { font-size:1.1rem; } .pen-strip .pen-dim { color:var(--muted); } .pen-last { font-weight:800; font-size:1.05rem; margin:6px 0; } .pen-last.g { color:var(--green); } .pen-last.x { color:var(--red); } .pen-turn { margin:10px 0 6px; font-size:.95rem; } .pen-turn small { color:var(--muted); } /* vista SPETTATORE dei rigori interattivi: chi tira vs chi para (sola lettura, chiara) */ .pen-duel { display:flex; align-items:stretch; justify-content:center; gap:10px; margin:14px 0 6px; } .pen-side { flex:1; max-width:150px; background:rgba(17,17,21,.5); border:1px solid var(--line); border-radius:10px; padding:10px 8px; } .pen-side.pen-shoot { border-color:rgba(74,222,128,.5); } .pen-side.pen-keep { border-color:rgba(245,197,66,.45); } .pen-role { font-size:.72rem; letter-spacing:.06em; color:var(--muted); font-weight:700; } .pen-who { font-size:1.05rem; font-weight:800; margin-top:3px; line-height:1.2; } .pen-club { font-size:.78rem; color:var(--muted); margin-top:2px; } .pen-vs { align-self:center; font-size:.8rem; color:var(--muted); font-weight:700; } .pen-wait { margin:10px 0 2px; font-size:.85rem; color:var(--muted); } .pen-title { font-weight:800; color:var(--gold); margin:12px 0 8px; } .pen-goal { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:8px; aspect-ratio:3/1.4; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:3px solid rgba(255,255,255,.5); border-radius:8px; padding:8px; } .pen-pre { text-align:center; font-size:.84rem; color:var(--muted); margin:0 0 10px; line-height:1.45; } .pen-pre b { color:#fff; } .pen-z { font-size:1.7rem; background:rgba(17,17,21,.5); border:1px solid var(--line); border-radius:8px; color:#fff; cursor:pointer; touch-action:manipulation; transition:background .1s, transform .1s; } .pen-z:active { transform:scale(.94); } .pen-z:hover { background:rgba(212,175,55,.18); } .pen-z.sel { background:var(--gold); color:#1a1200; } .pen-z:disabled { opacity:.5; } .pen-msg { margin:14px 0; font-size:1rem; font-weight:700; } .pen-msg small { color:var(--muted); font-weight:500; } .pen-msg.win { color:var(--gold); font-size:1.3rem; } /* toggle formazione partita-per-partita (single player) */ .permatch-toggle { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.82rem; color:var(--muted); cursor:pointer; } .permatch-toggle input { width:18px; height:18px; accent-color:var(--gold); } /* durata prestito + spostamento budget */ .cm-years { margin:8px 0 12px; } .ws-ctrl { display:flex; gap:8px; margin-top:6px; } .ws-ctrl .btn { flex:1; } .ws-slider { width:100%; margin:8px 0 4px; accent-color:var(--gold); height:26px; } .ws-nudge { display:flex; gap:8px; margin:2px 0 4px; } .ws-nudge .btn { flex:1; } .ws-ends { display:flex; justify-content:space-between; opacity:.55; font-size:.72rem; } /* 🌱 Giovanili: card a 2 righe (nome pieno + azioni sotto) → leggibile su telefono */ .youth-card { background:rgba(30,30,36,.55); border:1px solid var(--line); border-radius:11px; padding:9px 11px; margin-bottom:6px; } .youth-card.sold { opacity:.65; } .yc-head { display:flex; align-items:center; gap:8px; } .yc-role { flex:0 0 auto; font-size:.62rem; font-weight:800; color:var(--blue); letter-spacing:-.02em; } .yc-name { flex:1 1 auto; min-width:0; font-weight:800; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .youth-card .ovr { flex:0 0 auto; font-weight:900; font-size:1.05rem; } .youth-card .pot { margin-left:0; } .yc-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; flex-wrap:wrap; } .yc-meta { font-size:.72rem; color:var(--muted); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .yc-actions { display:flex; gap:6px; flex:1 1 auto; justify-content:flex-end; flex-wrap:wrap; } .yc-actions .pl-info, .yc-actions .pl-sell, .yc-actions .pl-loan { font-size:.78rem; padding:6px 10px; white-space:nowrap; } .yc-actions .yc-promote { color:var(--green); border-color:rgba(74,222,128,.5); } .yc-actions .yc-release { color:#f3a6a6; } .youth-card.must-decide { border-color:var(--gold); background:rgba(245,197,66,.09); } /* OFFERTA di prestito in entrata per un tuo giovane: banner evidenziato con accetta/tratta/rifiuta */ .youth-card.has-offer { border-color:rgba(74,222,128,.55); background:rgba(74,222,128,.07); } .yc-loanoffer { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:.82rem; } .yc-loanoffer .yc-actions { margin-top:7px; } .yc-loanoffer .btn-mini { padding:7px 10px; font-size:.76rem; } .yc-loanoffer .yl-acc { background:var(--green); color:#08130a; border-color:var(--green); font-weight:800; } .yc-loanoffer .yl-rej { color:#f3a6a6; } /* notizie di mercato (stile breaking-news) */ .news-feed { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; } .news-row { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; line-height:1.3; background:rgba(30,30,36,.5); border:1px solid var(--line); border-left:3px solid var(--muted); border-radius:9px; padding:7px 10px; } .news-row.mine { border-left-color:var(--gold); background:rgba(245,197,66,.09); } .news-badge { flex:0 0 auto; font-size:.6rem; font-weight:900; letter-spacing:.03em; color:#7ee4a3; background:rgba(34,197,94,.14); border-radius:6px; padding:2px 5px; white-space:nowrap; } .news-badge.loan { color:#8fc7ff; background:rgba(96,165,250,.16); } .news-row.buy { border-left-color:var(--green,#22c55e); background:rgba(34,197,94,.1); } /* HAI COMPRATO tu */ .news-row.sell { border-left-color:var(--red,#ef4444); background:rgba(239,68,68,.1); } /* HAI VENDUTO tu */ .news-badge.buy { color:#7ee4a3; background:rgba(34,197,94,.2); } .news-badge.sell { color:#ff9d9d; background:rgba(239,68,68,.2); } .news-row.big { border-left-color:var(--gold); background:rgba(245,197,66,.12); } /* 💥 colpo grosso CPU */ .news-badge.big { color:#0d0d0f; background:linear-gradient(180deg,#ffe08a,var(--gold)); box-shadow:0 0 8px rgba(245,197,66,.35); } /* rose live degli allenatori */ .hsquad { background:rgba(30,30,36,.5); border:1px solid var(--line); border-radius:10px; padding:8px 11px; margin-bottom:5px; } .hsquad.mine { border-color:var(--gold); background:rgba(245,197,66,.08); } .hsquad summary { cursor:pointer; font-size:.86rem; list-style:none; } .hsquad summary::-webkit-details-marker { display:none; } .hsquad-xi { display:flex; flex-wrap:wrap; gap:5px 10px; margin-top:8px; } .hx { font-size:.74rem; color:var(--muted); white-space:nowrap; } .hx b { color:var(--gold); } /* SINGLE PLAYER: obiettivo + fiducia dirigenza */ .board-box { background:linear-gradient(180deg,rgba(30,30,36,.7),rgba(17,17,21,.5)); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:12px; } .board-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.84rem; margin-bottom:6px; } .board-pos { font-weight:900; color:var(--gold); } .conf-bar { height:8px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden; } .conf-fill { height:100%; border-radius:6px; transition:width .4s; } /* 🎲 imprevisti Allenatore (modale bivio + esito chiaro) */ .ce-opts { display:flex; flex-direction:column; gap:8px; margin-top:6px; } .ce-opts .ce-opt { text-align:left; } .ce-verdict { font-size:1.25rem; font-weight:900; margin:0 0 6px; } .ce-verdict.good { color:#8fe0a3; } .ce-verdict.bad { color:#e59aa0; } .ce-verdict.neu { color:var(--muted); } .ce-deltas { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; } .ce-delta { font-size:.82rem; font-weight:800; border-radius:999px; padding:3px 10px; } .ce-delta.up { color:#8fe0a3; background:rgba(34,197,94,.14); border:1px solid #3f7d4e; } .ce-delta.down { color:#e59aa0; background:rgba(220,60,72,.14); border:1px solid #7d3f47; } .ce-delta.neu { color:var(--muted); background:rgba(255,255,255,.06); border:1px solid var(--line); } .board-status { margin-top:6px; padding:7px 9px; border-radius:8px; font-size:.82rem; background:rgba(255,255,255,.04); display:flex; justify-content:space-between; align-items:center; gap:8px; } .board-status small { color:var(--muted); flex:0 0 auto; } .board-status.green { background:rgba(34,197,94,.12); color:#8ef0b0; } .board-status.gold { background:rgba(245,197,66,.12); color:var(--gold); } .board-status.red { background:rgba(239,68,68,.12); color:#f3a6a6; } /* anteprima prossimo avversario */ .next-opp { background:rgba(30,30,36,.5); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px; padding:10px 12px; margin-bottom:8px; } .no-head { font-size:.9rem; } .no-head small { color:var(--muted); } .no-note { font-size:.78rem; color:var(--muted); margin-top:4px; } /* bacheca trofei */ .trophy-grid { display:flex; gap:8px; margin-bottom:10px; } .trophy-cell { flex:1; text-align:center; background:rgba(30,30,36,.55); border:1px solid var(--line); border-radius:12px; padding:12px 6px; } .trophy-cell.empty { opacity:.4; } .tro-ico { font-size:1.5rem; } .tro-n { font-weight:900; font-size:1.2rem; color:var(--gold); } .tro-lab { font-size:.66rem; color:var(--muted); text-transform:uppercase; } /* icona-trofeo VERA (logo competizione trasparente) al posto dell'emoji — scala col testo del contenitore. I loghi ufficiali (Champions navy, LaLiga, ecc.) sono scuri e PENSATI per fondo CHIARO → su sfondo scuro spariscono (Mario: "non si vedono per colpa dello sfondo"). Dietro ci metto un CHIP chiaro tondeggiante → contrasto ovunque, site-wide. */ .trophy-ic { height:1.1em; width:auto; vertical-align:-.24em; object-fit:contain; background:#f4f1ea; border-radius:4px; padding:1px 3px; box-sizing:content-box; } .tro-ico .trophy-ic { height:1.5em; display:inline-block; border-radius:7px; padding:4px 6px; box-shadow:0 1px 3px rgba(0,0,0,.35); } /* toast traguardi */ #dsa-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(30px); background:var(--gold); color:#1a1200; font-weight:800; font-size:.86rem; padding:11px 18px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:300; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; max-width:88vw; text-align:center; } #dsa-toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* modale esonero */ #sack-list { display:flex; flex-direction:column; gap:8px; } .sack-club { text-align:left; } .sack-club small { color:var(--muted); margin-left:6px; } /* interruttore competizione (Serie A / Champions) nel draft */ /* flex-wrap → con tante voci (es. il selettore dei 17 campionati in Carriera Giocatore) le pill vanno a capo invece di uscire tagliate a destra (il genitore ha overflow-x:hidden): su telefono si potevano scegliere solo le prime leghe. */ .comp-toggle { display:flex; flex-wrap:wrap; gap:6px; background:rgba(30,30,36,.5); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:8px; } .comp-tab { flex:1; background:none; border:none; color:var(--muted); font-weight:800; font-size:.92rem; padding:10px 6px; border-radius:9px; cursor:pointer; } .comp-tab.active { background:var(--gold); color:#1a1200; } .comp-tab:disabled { opacity:.4; } .comp-ic{ width:19px; height:19px; object-fit:contain; vertical-align:-4px; margin-right:5px; } .comp-note { color:var(--muted); font-size:.78rem; margin:0 2px 12px; line-height:1.35; } /* gironi Champions */ #cl-body { padding-bottom:30px; } .cl-group { background:rgba(17,17,21,.5); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:6px; } .cl-group .res-row { border-radius:0; border:none; border-top:1px solid var(--line); margin:0; } .cl-group .res-row:first-child { border-top:none; } .cl-group .res-row.q { background:rgba(34,197,94,.10); } .cl-group .res-row.q.mine { background:rgba(245,197,66,.14); } .cl-group .res-row.po { background:rgba(245,197,66,.09); } .cl-group .res-row.po.mine { background:rgba(245,197,66,.14); } .cl-group .clp { color:var(--muted); width:18px; text-align:center; font-weight:700; } .cl-group .res-row .h { flex:1; text-align:left; } .cl-group .cls { color:var(--muted); font-size:.72rem; } .cl-group .clpt { font-weight:900; color:var(--gold); min-width:26px; text-align:right; } /* intro "formazioni a confronto" prima del fischio d'inizio */ .mt-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; text-align:left; } .mt-xi { flex:1; display:flex; flex-direction:column; gap:3px; font-size:.72rem; color:#dfe7f5; } .mt-xi-h { font-weight:900; color:var(--gold); font-size:.8rem; margin-bottom:3px; } .mt-xi-vs { align-self:center; font-weight:900; color:var(--muted); font-size:.9rem; padding:0 2px; } .mev.pen { color:var(--gold); font-weight:800; } .mev.pen-step { border-left:3px solid var(--gold); font-style:italic; opacity:.92; animation:penpulse .78s ease-in-out infinite; } @keyframes penpulse { 0%,100% { background:var(--card); } 50% { background:rgba(245,197,66,.12); } } /* INTRO scontro diretto: campo con le due formazioni a confronto (stile modulo, con overall) */ .mt-vs { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:2px 0 4px; font-size:.72rem; } .mt-vs-t { flex:1; font-weight:800; color:#dfe7f5; line-height:1.15; } .mt-vs-t.home { text-align:right; } .mt-vs-t i { font-style:normal; color:var(--muted); font-weight:700; } .mt-vs-t b { display:inline-block; min-width:24px; text-align:center; margin-left:4px; padding:1px 5px; border-radius:6px; background:#0f172a; font-size:.72rem; } .mt-vs-t.home b { color:var(--gold); border:1px solid var(--gold); } .mt-vs-t.away b { color:#7dd3fc; border:1px solid #7dd3fc; } .mt-vs-x { font-weight:900; color:var(--muted); font-size:1rem; } /* v393 — chip col colore sociale del club accanto al nome + riga stadio della casa */ .mt-col { display:inline-block; width:9px; height:9px; border-radius:2px; border:1px solid; vertical-align:middle; margin-right:4px; box-shadow:0 0 0 1px rgba(0,0,0,.35); } .mt-vs-t.home .mt-col { margin-right:0; margin-left:4px; } .mt-stadium { text-align:center; color:var(--muted); font-size:.72rem; margin:1px 0 4px; letter-spacing:.02em; } .mt-pitch { position:relative; width:100%; aspect-ratio:3/4.3; max-height:66vh; background: linear-gradient(180deg, rgba(125,211,252,.12) 0%, rgba(125,211,252,.04) 34%, transparent 46% 54%, rgba(245,197,66,.05) 66%, rgba(245,197,66,.13) 100%), linear-gradient(180deg,#0e3f24,#166534 50%,#0e3f24); border:2px solid #2f7d4f; border-radius:14px; overflow:hidden; } .mt-pitch::before { content:""; position:absolute; left:0; right:0; top:50%; height:0; border-top:2px dashed rgba(255,255,255,.32); } .mt-pitch::after { content:""; position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.22); border-radius:50%; } .mt-p { position:absolute; transform:translate(-50%,-50%); width:46px; text-align:center; z-index:1; display:flex; flex-direction:column; align-items:center; } .mt-p.away { flex-direction:column-reverse; } /* ospiti (in alto): nome SOPRA il pallino → non copre la riga sotto */ .mt-p .mt-dot { z-index:2; } .mt-dot { width:29px; height:29px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.7rem; background:#0f172a; box-shadow:0 2px 6px rgba(0,0,0,.45); } .mt-p.home .mt-dot { border:2px solid var(--gold); color:var(--gold); } .mt-p.away .mt-dot { border:2px solid #7dd3fc; color:#7dd3fc; } .mt-p.empty .mt-dot { border:2px dashed rgba(255,255,255,.35); color:rgba(255,255,255,.55); font-size:.6rem; } .mt-nm { font-size:.5rem; font-weight:700; color:#fff; text-shadow:0 1px 3px #000, 0 0 3px #000; line-height:1; margin:2px auto 0; max-width:52px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stag-box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; } .stag-box p { margin-bottom:12px; line-height:1.5; } .stag-box .btn { width:100%; } .ctab { width:100%; border-collapse:collapse; font-size:.84rem; } .ctab th { color:var(--muted); font-size:.62rem; text-transform:uppercase; padding:5px 4px; text-align:left; } .ctab td { padding:8px 4px; border-top:1px solid var(--line); } .ctab td.pos { color:var(--muted); width:22px; } .ctab td.pts { font-weight:900; text-align:right; } .ctab td.ex { color:var(--muted); text-align:right; font-size:.72rem; } .ctab tr.mine td { background:rgba(245,197,66,.1); font-weight:700; } .ctab tr.z-ucl td.pos { color:#3d9be0; font-weight:900; box-shadow:inset 3px 0 0 #3d9be0; } .ctab tr.z-uel td.pos { color:#f5a623; font-weight:800; box-shadow:inset 3px 0 0 #f5a623; } .ctab tr.z-conf td.pos { color:#22c55e; font-weight:800; box-shadow:inset 3px 0 0 #22c55e; } .ctab tr.z-rel td.pos { color:var(--red); box-shadow:inset 3px 0 0 var(--red); } .ctab tr.z-barrage td.pos { color:#f5a623; font-weight:800; box-shadow:inset 3px 0 0 #f5a623; } .standings tr.z-uel td.pos { color:#f5a623; font-weight:800; box-shadow:inset 3px 0 0 #f5a623; } .standings tr.z-conf td.pos { color:#22c55e; font-weight:800; box-shadow:inset 3px 0 0 #22c55e; } /* legenda zone Europa/retro (Mario #B): swatch colorati che spiegano dove va ogni posto */ .euro-legend { display:flex; flex-wrap:wrap; gap:5px 12px; margin:7px 3px 4px; font-size:.7rem; color:var(--muted); line-height:1.3; } .euro-legend .ez { display:inline-flex; align-items:center; gap:5px; } .euro-legend .ez::before { content:''; width:9px; height:9px; border-radius:3px; flex:none; } .euro-legend .lg-cl::before { background:#3d9be0; } .euro-legend .lg-el::before { background:#f5a623; } .euro-legend .lg-cf::before { background:#22c55e; } .euro-legend .lg-bar::before { background:#f5a623; } .euro-legend .lg-rel::before { background:var(--red); } /* classifica COMPLETA (V N P GF GS DR PT) — scrollabile in orizzontale se non ci sta */ .ctab-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .ctab .tc-own { color:var(--gold); font-weight:700; } /* nome del proprietario umano nella classifica Draft Champions */ .ctab-full { font-size:.72rem; min-width:340px; } .ctab-full th, .ctab-full td { padding:6px 4px; text-align:center; white-space:nowrap; } .ctab-full td.pos { width:16px; } .ctab-full th:nth-child(2), .ctab-full td.tc-club { text-align:left; } /* 🎩 allenatore sotto il nome del club nella classifica (Mario) */ .tc-club .tc-ci { display:inline-flex; flex-direction:column; line-height:1.15; vertical-align:middle; } .tc-club .tc-coach { color:var(--muted); font-size:.82em; font-weight:600; opacity:.9; margin-top:1px; } tr.mine .tc-club .tc-coach { color:var(--gold); opacity:1; } .ctab-full td.pts { text-align:center; } .lg-head { width:100%; text-align:left; background:rgba(30,30,36,.55); border:1px solid var(--line); border-radius:11px; color:var(--text); font-weight:800; font-size:.9rem; padding:12px 14px; margin:6px 0; cursor:pointer; } .lg-head small { color:var(--muted); font-weight:600; margin-left:4px; } .lg-body { padding:2px 6px 10px; animation:fadein .2s; } .car-modal { position:fixed; inset:0; z-index:100; background:rgba(4,6,12,.7); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; } .car-modal.hidden { display:none; } .car-modal-box { width:100%; max-width:520px; max-height:92vh; /* fallback */ max-height:calc(100dvh - env(safe-area-inset-top) - 12px); /* 📱 iOS: il bottom-sheet non sale sotto il notch → la ✕ in alto resta raggiungibile */ overflow-y:auto; overscroll-behavior:contain; background:var(--bg2); border:1px solid var(--gold); border-radius:20px 20px 0 0; padding:20px 18px calc(24px + env(safe-area-inset-bottom)); position:relative; animation:slideup .25s ease; } .cm-x { position:absolute; right:14px; top:14px; background:none; border:none; color:var(--muted); font-size:1.2rem; cursor:pointer; } .car-modal-box h3 { font-size:1.3rem; } .cm-sub { color:var(--muted); font-size:.82rem; margin:3px 0 10px; } /* 🏅 Palmarès dell'account (modale) */ .pm-headline{ text-align:center; background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.4); border-radius:12px; padding:9px 12px; margin:2px 0 12px; font-size:.95rem; } .pm-headline b{ color:var(--gold); font-size:1.1rem; } .pm-secttl{ font-weight:900; margin:14px 0 2px; font-size:1rem; } .pm-sub{ color:var(--muted); font-size:.78rem; margin-bottom:8px; } .pm-empty{ color:var(--muted); text-align:center; font-size:.9rem; line-height:1.5; padding:16px 8px; } .pm-headline small, .pm-secttl small{ color:var(--muted); font-weight:600; font-size:.72rem; } .pm-headline b{ color:var(--gold); } /* tier LEGGERO (modalità veloci): titolo e celle smorzate → si nota che "valgono meno" */ .pm-secttl.pm-light{ color:var(--muted); font-size:.95rem; margin-top:16px; border-top:1px solid var(--line); padding-top:12px; } .pm-lightgrid{ opacity:.72; } .pm-lightgrid .trophy-cell{ padding:9px 4px; } .pm-lightgrid .tro-ico{ font-size:1.05rem; } .pm-lightgrid .tro-n{ font-size:.95rem; color:var(--muted); } /* nel modale la bacheca ha 7-8 celle → vanno SEMPRE a capo (3 per riga), anche su schermi 431-520px dove la regola mobile globale non scatta (il modale può essere largo fino a 520px). Scoped al modale: la bacheca del tab Statistiche resta invariata. */ .car-modal-box .trophy-grid{ flex-wrap:wrap; } .car-modal-box .trophy-cell{ flex:1 1 26%; min-width:0; } .cm-val { font-size:.85rem; margin-bottom:12px; } .cm-type { display:flex; gap:8px; margin-bottom:14px; } .cm-tb { flex:1; padding:11px; border-radius:10px; background:var(--card2); border:1px solid var(--line); color:var(--text); font-weight:700; cursor:pointer; } .cm-tb.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); } .cm-lab { display:block; font-size:.85rem; margin-bottom:6px; } .cm-lab b { color:var(--gold); } .cm-bump { display:flex; gap:6px; margin:8px 0 12px; } /* 💶 rilanci rapidi offerta (Mario) */ .cm-bmp { flex:1; padding:9px 4px; border-radius:9px; background:var(--card2); border:1px solid var(--line); color:var(--text); font-weight:800; font-size:.82rem; cursor:pointer; } .cm-bmp:active { background:var(--gold); color:#1a1200; border-color:var(--gold); } #cm-range { width:100%; margin-bottom:14px; accent-color:var(--gold); } #cm-send { width:100%; } #cm-result { margin-top:12px; } .cm-good { color:var(--green); font-weight:700; padding:10px; background:rgba(34,197,94,.12); border-radius:10px; } .cm-bad { color:#fca5a5; padding:10px; background:rgba(239,68,68,.1); border-radius:10px; } .cm-tries { margin:8px 0 2px; font-size:.78rem; color:var(--muted); text-align:center; } .cm-tries b { color:var(--txt); } .cm-tries-low { color:var(--red); } .cm-tries-low b { color:var(--red); } .cm-counter { padding:10px; background:rgba(245,197,66,.12); border-radius:10px; } .cm-counter .btn-mini { margin-top:8px; width:100%; background:var(--gold); color:#1a1200; } /* scambio nel modale */ .cm-swaplist { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; max-height:180px; overflow-y:auto; } .cm-give { background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:8px 10px; font-weight:700; font-size:.82rem; cursor:pointer; } .cm-give.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); } .cm-give small { color:var(--muted); font-weight:600; } .cm-give.sel small { color:#4a3600; } #cm-cashr { width:100%; margin-bottom:14px; accent-color:var(--gold); } #cm-swap { width:100%; } /* offerte in arrivo (mercato) */ .mkt-offers.none { text-align:center; color:var(--muted); padding:14px; font-size:.82rem; background:rgba(30,30,36,.4); border:1px dashed var(--line); border-radius:11px; margin-bottom:10px; } .offer-row { display:flex; align-items:center; gap:9px; background:rgba(245,197,66,.08); border:1px solid var(--gold); border-radius:11px; padding:9px 11px; margin-bottom:6px; } .off-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; } .off-actions .btn-mini { padding:8px 10px; font-size:.78rem; } /* v388 — riga-offerta: nome LEGGIBILE (va a capo) con chip RUOLO + badge TITOLARE/PANCHINA sempre visibili */ .offer-row .pl-name { white-space:normal; overflow:visible; line-height:1.35; } .offer-row .pl-name small { white-space:normal; overflow:visible; } .off-role { display:inline-block; font-size:.6rem; font-weight:800; color:var(--blue); background:rgba(205,176,121,.14); border:1px solid rgba(205,176,121,.42); border-radius:5px; padding:0 4px; margin-left:3px; vertical-align:middle; letter-spacing:.02em; } .off-st { display:inline-block; font-size:.58rem; font-weight:800; border-radius:5px; padding:1px 5px; margin-left:3px; vertical-align:middle; } .off-st.off-tit { color:#0c0c0f; background:linear-gradient(90deg,var(--gold),#ffe9a8); } .off-st.off-pan { color:var(--muted); background:rgba(152,145,138,.16); border:1px solid var(--line); } /* v414 — OVR+età accanto al giocatore nelle offerte + sezioni a tendina */ .off-ov { display:inline-block; font-size:.62rem; font-weight:800; color:var(--gold); margin-left:4px; vertical-align:middle; } .off-ov small { font-size:.82em; font-weight:600; color:var(--muted); } .mkt-offdet { margin-bottom:6px; } .mkt-offdet > .off-sum { cursor:pointer; list-style:none; font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:4px 2px; user-select:none; } .mkt-offdet > .off-sum::-webkit-details-marker { display:none; } .mkt-offdet > .off-sum::before { content:'▸ '; color:var(--gold); } .mkt-offdet[open] > .off-sum::before { content:'▾ '; } .off-acc { background:var(--green) !important; color:#04220f !important; border-color:var(--green) !important; } /* osservatori (scout) */ .scout-role { color:var(--text); font-weight:800; font-size:.82rem; margin:9px 0 4px; border-left:3px solid var(--gold); padding-left:8px; } .scout-role small { color:var(--muted); font-weight:600; font-size:.7rem; } /* TAB Osservatori: tasti richiesta */ .scout-reqs { display:flex; flex-wrap:wrap; gap:7px; margin:4px 0 8px; } .scout-req { font-size:.8rem; } .scout-req.sel { background:var(--gold); color:#1a1200; border-color:var(--gold); font-weight:800; } .scout-hint { font-size:.8rem; color:var(--muted); background:rgba(30,30,36,.4); border:1px dashed var(--line); border-radius:10px; padding:8px 10px; margin-bottom:8px; } /* fine campionato: risultati prima di Coppa/Champions */ .endrev h3 { font-size:1.15rem; margin-bottom:10px; } .endrev-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; background:rgba(30,30,36,.5); border:1px solid var(--line); margin-bottom:5px; font-size:.9rem; } .endrev-row small { color:var(--muted); } .endrev-row.win { border-color:var(--gold); background:linear-gradient(90deg,rgba(245,197,66,.16),var(--card)); box-shadow:0 0 14px rgba(245,197,66,.15); } .endrev-pos { color:var(--gold); font-weight:800; white-space:nowrap; } .endrev-win { text-align:center; color:var(--gold); font-weight:800; font-size:1.05rem; margin:10px 0 12px; } /* ============ TEMA FOTOGRAFICO / PREMIUM ============ */ :root{ --img-stadium:url("https://images.unsplash.com/photo-1522778119026-d647f0596c20?auto=format&fit=crop&w=1200&q=70"); --img-night:url("https://images.unsplash.com/photo-1489944440615-453fc2b6a9a9?auto=format&fit=crop&w=1400&q=65"); --img-crowd:url("https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=1400&q=65"); --img-pitch:url("https://images.unsplash.com/photo-1459865264687-595d652de67e?auto=format&fit=crop&w=1400&q=65"); } /* sfondo globale: atmosfera stadio notturno. Su mobile/iOS 'background-attachment:fixed' è problematico → uso un layer ::before fisso. */ body{ background:var(--bg); overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(1100px 640px at 50% -120px, rgba(245,197,66,.07) 0%, rgba(245,197,66,.02) 34%, transparent 54%), #08080a; } #app{ position:relative; z-index:0; } /* 🎬 ForgeScenery: sfondi-scena a parallasse, il piano PIÙ profondo (dietro l'ambient) — site-wide dietro ogni schermata */ #forge-scenery{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; background:var(--bg); } #forge-scenery .scn{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; will-change:opacity; } #forge-scenery .scn.on{ opacity:1; } #forge-scenery .scn-svg{ position:absolute; inset:-5%; width:110%; height:110%; display:block; } #forge-scenery .pl{ will-change:transform; } /* scrim: vignetta + velo scuro → le scene restano SFONDO, il contenuto sopra è sempre leggibile */ #forge-scenery::after{ content:''; position:absolute; inset:0; background: radial-gradient(130% 100% at 50% 26%, transparent 34%, rgba(8,8,12,.6) 100%), linear-gradient(180deg, rgba(8,8,12,.26) 0%, rgba(8,8,12,.34) 46%, rgba(8,8,12,.62) 100%); } @media (prefers-reduced-motion: reduce){ #forge-scenery .scn{ transition:none; } } /* ⏳ mini-loader (Juice.busyRun) — copre il frame pesante dell'avvio carriera così non si vede il lag */ #forge-loader{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:rgba(8,8,12,.5); opacity:0; pointer-events:none; transition:opacity .16s ease; } #forge-loader.on{ opacity:1; } #forge-loader .fl-ring{ width:44px; height:44px; border-radius:50%; border:3px solid rgba(245,197,66,.22); border-top-color:var(--gold,#f5c542); animation:flspin .7s linear infinite; } @keyframes flspin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ #forge-loader .fl-ring{ animation:none; border-top-color:rgba(245,197,66,.6); } } /* 🎮 ForgeJuice: ambient globale (sopra lo sfondo #08080a, dietro il contenuto) + overlay effimero del juice (sopra tutto) */ #forge-ambient{ position:fixed; inset:0; width:100vw; height:100dvh; z-index:-1; pointer-events:none; } #forge-juice{ position:fixed; inset:0; z-index:9998; pointer-events:none; overflow:hidden; } #forge-juice .juice-canvas{ position:fixed; inset:0; width:100vw; height:100dvh; } .juice-flash{ position:fixed; inset:0; opacity:0; } .juice-flash.on{ animation:juiceFlash .6s ease-out forwards; } @keyframes juiceFlash{ 0%{opacity:.9} 100%{opacity:0} } .juice-xp{ position:fixed; transform:translate(-50%,0); font-weight:900; font-size:1.4rem; color:var(--gold); text-shadow:0 2px 12px rgba(245,197,66,.6); opacity:0; white-space:nowrap; } .juice-xp.go{ animation:juiceXp 1.2s ease-out forwards; } @keyframes juiceXp{ 0%{opacity:0; transform:translate(-50%,10px) scale(.7)} 20%{opacity:1; transform:translate(-50%,-6px) scale(1.1)} 100%{opacity:0; transform:translate(-50%,-90px) scale(1)} } .juice-shake{ animation:juiceShake .5s cubic-bezier(.36,.07,.19,.97) both; } @keyframes juiceShake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)} } @media (prefers-reduced-motion: reduce){ #forge-ambient, #forge-juice{ display:none; } } /* ---- ottimizzazioni MOBILE (gioco pensato per telefono) ---- */ @media (max-width:430px){ #app{ padding:12px; } .home-hero{ padding:44px 16px 28px; } .home-hero h1{ font-size:2.6rem; } .tagline{ font-size:.85rem; } .pcard{ padding:13px 12px; } /* tap target più comodo */ .pcard .pname{ font-size:.9rem; } .btn{ padding:16px 18px; } .btn-mini{ padding:11px 15px; font-size:.85rem; } .btn-roll{ padding:20px; font-size:1.2rem; } .standings th{ padding:6px 3px; font-size:.62rem; } .standings td{ padding:8px 3px; font-size:.82rem; } .res-row{ padding:9px 10px; font-size:.82rem; } .reroll-row .btn-mini{ flex:1; } /* pulsanti reroll a tutta larghezza */ .reroll-row{ gap:8px; } .match-result{ font-size:2.3rem; } /* STATISTICHE: la bacheca trofei ha 9 celle flex:1 in fila → sforavano a lato (pagina "desktop"/tagliata). Su mobile vanno A CAPO (≈3 per riga) così tutto sta nella larghezza dello schermo. */ .trophy-grid{ flex-wrap:wrap; } .trophy-cell{ flex:1 1 27%; min-width:0; padding:10px 4px; } .tro-ico{ font-size:1.25rem; } .tro-n{ font-size:1rem; } /* CLASSIFICA completa: colonne compatte così le 10 colonne stanno nello schermo del telefono. */ .ctab-full{ font-size:.68rem; min-width:0; } .ctab-full th, .ctab-full td{ padding:6px 3px; } } /* evita zoom automatico di iOS sugli input (font >=16px) e scroll fluido */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } input[type=text]{ font-size:16px; } /* HERO home: nero pieno + alone dorato → il logo (già nero) si fonde, niente "taglio" */ .home-hero{ position:relative; margin:6px 0 2px; padding:44px 20px 30px; border-radius:24px; overflow:hidden; background: radial-gradient(130% 100% at 50% -8%, rgba(245,197,66,.10), rgba(245,197,66,.03) 42%, transparent 64%), #060607; box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(245,197,66,.10); } .home-hero::before{ content:""; position:absolute; left:50%; top:-90px; width:420px; height:260px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(245,197,66,.22), transparent 70%); filter:blur(10px); pointer-events:none; } .home-hero h1{ text-shadow:0 6px 26px rgba(0,0,0,.6); } .logo-ball{ filter:drop-shadow(0 8px 22px rgba(245,197,66,.5)); } .tagline{ color:#e8e2d6; text-shadow:0 2px 10px rgba(0,0,0,.7); } .home-buttons{ margin-top:20px; } .btn-ghost{ background:rgba(30,30,36,.55); backdrop-filter:blur(8px); border-color:rgba(255,255,255,.14); color:#e2dccf; } input[type=text]{ background:rgba(30,30,36,.72); backdrop-filter:blur(8px); } /* CARD in vetro */ .lobby-player,.pcard,.res-row,.setup-block .chip,.season-wait,.place-hint{ backdrop-filter:blur(10px); } .lobby-player{ background:rgba(30,30,36,.62); } .standings table{ background:rgba(17,17,21,.5); border-radius:14px; overflow:hidden; backdrop-filter:blur(8px); } .standings{ border-radius:14px; } /* header sticky con foto sfumata */ .draft-header{ background:linear-gradient(180deg, rgba(7,7,9,.94), rgba(7,7,9,.82)); } .season-header::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background:linear-gradient(90deg, rgba(7,7,9,.96), rgba(7,7,9,.5)), var(--img-crowd) center/cover no-repeat; } /* header ANCORATO (Draft Stagione + Champions): resta in alto scorrendo risultati/classifica → sai sempre giornata/fase. sticky è comunque un elemento posizionato → il ::before (inset:0) resta agganciato. */ .season-header{ position:sticky; top:0; z-index:12; overflow:hidden; border-radius:0 0 14px 14px; padding-left:12px; padding-right:12px; margin-top:0; } .season-header h2{ text-shadow:0 2px 12px rgba(0,0,0,.7); } /* arena scontro diretto: riflettori */ .match-arena{ position:relative; } .match-arena::before{ content:""; position:absolute; left:50%; top:-40px; width:120%; height:260px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(245,197,66,.14), transparent 70%); pointer-events:none; } /* FINAL */ .final-verdict { text-align:center; padding:40px 20px 26px; position:relative; overflow:hidden; border-radius:22px; margin-bottom:16px; background:linear-gradient(180deg, rgba(7,7,9,.55), rgba(7,7,9,.92)), var(--img-crowd) center/cover no-repeat, #0a0a0c; box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); } .final-verdict h2 { text-shadow:0 4px 20px rgba(0,0,0,.7); } .final-verdict .trophy { font-size:4rem; } .final-verdict h2 { font-size:1.8rem; margin:10px 0 4px; } .final-verdict p { color:var(--muted); } /* battute ironiche nelle schermate di vittoria/verdetto */ .verdict-quip { margin-top:12px !important; color:#cdd6e8; font-size:.92rem; font-style:italic; line-height:1.4; opacity:.95; } .verdict-quip.quip-roast { color:#f3a6a6; opacity:.92; } #btn-rematch { width:100%; margin-top:18px; } /* ---- Osservatori: badge potenziale + riga scout nel modale ---- */ .pot { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:8px; font-size:.72rem; font-weight:800; vertical-align:middle; } .pot.pot-hi { background:rgba(245,197,66,.18); color:var(--gold); border:1px solid var(--gold); } .pot.pot-mid { background:rgba(74,222,128,.14); color:#4ade80; border:1px solid rgba(74,222,128,.5); } .pot.pot-flat { background:rgba(139,148,171,.14); color:var(--muted); border:1px solid var(--line); } .cm-scout { margin:8px 0 4px; font-size:.86rem; color:var(--muted); } .cm-scout .pot { font-size:.82rem; margin-left:0; } .cm-scout.scouted { color:var(--text); } /* ---- Popup "colpo di mercato" (90+) ---- */ .dsa-popup { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; background:rgba(5,8,16,.72); backdrop-filter:blur(4px); padding:24px; animation:fadein .2s; } .dsa-popup.show { display:flex; } .dsa-popup-card { background:linear-gradient(160deg,var(--card2),var(--card)); border:1px solid var(--gold); border-radius:20px; padding:26px 22px; max-width:360px; width:100%; text-align:center; box-shadow:0 0 0 1px var(--gold), 0 24px 60px rgba(0,0,0,.6); animation:popin .28s cubic-bezier(.2,1.3,.5,1); } @keyframes popin { from { transform:scale(.8); opacity:0; } to { transform:scale(1); opacity:1; } } .dsa-popup-badge { display:inline-block; background:var(--gold); color:#1a1200; font-weight:900; letter-spacing:.05em; font-size:.78rem; padding:4px 12px; border-radius:999px; margin-bottom:14px; } .dsa-popup-big { font-size:1.5rem; font-weight:900; color:var(--text); margin-bottom:6px; } .dsa-popup-big .ovr { margin-left:6px; } .dsa-popup-sub { color:var(--muted); margin-bottom:12px; } .dsa-popup-card .btn { margin-top:8px; } /* ---- Convinzione giocatore (willingness %) + toggle di ricerca ---- */ .cm-will { font-size:.85rem; margin:6px 0 10px; padding:8px 10px; border-radius:10px; } .cm-will b { font-size:1rem; } .will-hi { color:var(--green); background:rgba(34,197,94,.10); } .will-mid { color:var(--gold); background:rgba(245,197,66,.10); } .will-lo { color:#fca5a5; background:rgba(239,68,68,.10); } .will-chip { flex:0 0 auto; font-size:.66rem; font-weight:800; padding:2px 5px; border-radius:7px; margin-left:0; } .will-chip.will-hi { color:var(--green); } .will-chip.will-mid { color:var(--gold); } .will-chip.will-lo { color:#fca5a5; } .pl-row .pot { flex:0 0 auto; font-size:.62rem; padding:1px 4px; margin-left:2px; } /* badge potenziale compatto nelle righe */ .mkt-toggles { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .mkt-toggles .chip { flex:1 1 auto; font-size:.8rem; } /* selettore CAMPIONATO nel pre-lobby (Serie A / Premier / La Liga) */ .car-league { margin:4px 0 6px; } /* selettore campionato: GRID che VA A CAPO (prima scorreva fuori schermo con tante leghe) → tutte visibili */ .lg-pick { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:6px; } .lg-btn { text-align:center; background:rgba(30,30,36,.62); border:1px solid var(--line); border-radius:12px; padding:9px 6px; cursor:pointer; color:var(--text); font-weight:800; font-size:.82rem; } .lg-btn.sel { border-color:var(--gold); background:rgba(245,197,66,.18); color:var(--gold); } .lg-btn:disabled { cursor:default; opacity:.55; } .lg-btn:disabled.sel { opacity:1; } /* 🎛️ Selettore campionato COMPATTO (chip-bandiera in scroll orizzontale) — sostituisce il muro di tasti in setup carriera */ .lg-lab { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800; margin:2px 2px 7px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .lg-lab .lg-cur { color:var(--gold); text-transform:none; letter-spacing:0; font-size:.9rem; } .lg-scroll { display:flex; gap:7px; overflow-x:auto; overflow-y:hidden; padding:1px 2px 9px; margin:0 -2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .lg-scroll::-webkit-scrollbar { display:none; } .lg-chip { flex:0 0 auto; scroll-snap-align:center; display:inline-flex; align-items:center; gap:6px; background:rgba(30,30,36,.62); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; color:var(--text); font-weight:800; font-size:.85rem; white-space:nowrap; transition:border-color .12s, background .12s; } .lg-chip.sel { border-color:var(--gold); background:rgba(245,197,66,.18); color:var(--gold); } .lg-chip:active { transform:scale(.96); } .lg-flag { font-size:1.1rem; line-height:1; } /* ====== ⭐ LIVELLO & PRESTIGIO account (window.XP) ====== */ .xp-badge{ display:inline-flex; align-items:center; gap:.16em; vertical-align:middle; line-height:1; white-space:nowrap; padding:.14em .44em; margin:0 .18em; border-radius:999px; font-weight:900; font-size:.86em; background:rgba(40,40,48,.7); border:1px solid var(--line); color:var(--text); } .xp-badge b{ font-weight:900; letter-spacing:.02em; font-size:.92em; } .xp-badge.xp-p0{ color:var(--muted); } .xp-p1{ border-color:#3f7d4e; color:#8fe0a3; background:rgba(34,197,94,.12); } .xp-p2{ border-color:#3f8f83; color:#7fe0cf; background:rgba(34,197,150,.12); } .xp-p3{ border-color:#c0503f; color:#ffb0a3; background:rgba(239,68,68,.12); } .xp-p4{ border-color:#b07b3f; color:#e6c08a; background:rgba(200,140,60,.14); } .xp-p5{ border-color:var(--gold-deep,#e0a022); color:var(--gold); background:rgba(245,197,66,.14); } .xp-p6{ border-color:var(--gold); color:var(--gold-hi,#ffe9a8); background:rgba(245,197,66,.18); } .xp-p7{ border-color:#e0662b; color:#ffb787; background:rgba(255,106,43,.16); } .xp-p8{ border-color:#8f5fd6; color:#d3b6ff; background:rgba(150,90,220,.16); } .xp-p9{ border-color:#3fb6d6; color:#a7ecff; background:rgba(63,182,214,.16); } .xp-p10,.xp-maestro{ border-color:var(--gold-hi,#ffe9a8); color:#1a1200; background:linear-gradient(120deg,var(--gold-deep,#e0a022),var(--gold-hi,#ffe9a8),var(--gold,#f5c542)); box-shadow:0 0 8px rgba(245,197,66,.55); animation:xp-maestro-glow 2.4s ease-in-out infinite; } @keyframes xp-maestro-glow{ 0%,100%{ box-shadow:0 0 6px rgba(245,197,66,.45);} 50%{ box-shadow:0 0 13px rgba(255,233,168,.85);} } /* 🌟 nuovi prestigi oltre Maestro (11..15): colori sempre più rari, glow ereditato da .xp-maestro (Mario: più fama) */ .xp-p11{ border-color:#c9a24a; color:#fff2cf; background:linear-gradient(120deg,#6b5320,#b98f34,#e9c766); } .xp-p12{ border-color:#8f7bff; color:#efeaff; background:linear-gradient(120deg,#3a2b7a,#6d55d6,#a48cff); } .xp-p13{ border-color:#59c6ff; color:#eaf8ff; background:linear-gradient(120deg,#15406b,#2f7fd6,#7cc6ff); } .xp-p14{ border-color:#ff7ad1; color:#fff0fa; background:linear-gradient(120deg,#5a1f5c,#a23c9e,#ff8ad6); } .xp-p15{ border-color:#e9e9ff; color:#160f2e; background:linear-gradient(120deg,#7b6cff,#c9a24a,#59c6ff,#ff7ad1); background-size:200% 100%; animation:xp-maestro-glow 2.4s ease-in-out infinite, xp-eterno-shift 6s linear infinite; } @keyframes xp-eterno-shift{ 0%{ background-position:0% 50%;} 100%{ background-position:200% 50%;} } /* pannello Profilo "⭐ Livello" */ .xp-panel{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 15px; margin:12px 0; } .xp-panel .xp-head{ display:flex; align-items:center; gap:12px; } .xp-panel .xp-lvl{ font-size:2.1rem; font-weight:900; color:var(--gold); line-height:1; } .xp-panel .xp-lvl small{ display:block; font-size:.62rem; letter-spacing:.14em; color:var(--muted); font-weight:800; } .xp-panel .xp-pres{ flex:1; } .xp-panel .xp-pres b{ font-size:1rem; } .xp-panel .xp-pres .xp-sub{ font-size:.78rem; color:var(--muted); } .xp-bar{ height:12px; border-radius:999px; background:rgba(20,20,24,.9); border:1px solid var(--line); overflow:hidden; margin:11px 0 5px; } .xp-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-deep,#e0a022),var(--gold,#f5c542)); transition:width .6s ease; } .xp-nums{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--muted); } .xp-pick{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } .xp-pick .xp-opt{ cursor:pointer; border:1px solid var(--line); border-radius:10px; padding:6px 9px; background:rgba(30,30,36,.6); font-weight:800; font-size:.82rem; } .xp-pick .xp-opt.sel{ border-color:var(--gold); background:rgba(245,197,66,.16); color:var(--gold); } .xp-pick .xp-opt.locked{ opacity:.32; pointer-events:none; } .xp-pick-lbl{ font-size:.74rem; color:var(--muted); margin-top:12px; } /* ====== CARRIERA GIOCATORE (G1) ====== */ #screen-pc-setup .setup-wrap{max-width:520px;margin:0 auto;padding:16px} #screen-pc-setup h2{margin:8px 0} #screen-pc-setup input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);margin-bottom:8px} .pc-role{margin:3px}.pc-role.sel,.pc-club.sel{outline:2px solid var(--gold);color:var(--gold)} #pc-clubs{max-height:230px;overflow:auto;display:flex;flex-wrap:wrap;gap:6px} .pc-club{flex:1 1 45%;text-align:left} .pc-dash{max-width:560px;margin:0 auto;padding:12px} .pc-dash .sectionheader{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;background:var(--card);border-radius:12px;margin-bottom:10px;border:1px solid var(--line)} .pc-dash .sectionheader b{font-size:1.1em} .pc-actions{display:flex;gap:8px;margin:12px 0} .pc-actions .btn{flex:1} .pc-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px} .pc-trow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:.92em;border-top:1px solid var(--line)} /* niente overflow: il testo lungo a sinistra si taglia con "…", il numero a destra resta SEMPRE dentro il box (Mario) */ .pc-trow>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pc-trow>span:last-child{flex:0 0 auto;white-space:nowrap;text-align:right} .pc-trow:first-child{border-top:none} .pc-trow.mine{background:rgba(212,175,55,.16);font-weight:700;color:var(--gold)} .pc-trow small{color:var(--muted)} .pc-trow.z-ucl{box-shadow:inset 3px 0 0 #3d9be0} .pc-trow.z-uel{box-shadow:inset 3px 0 0 #f5a623} .pc-trow.z-conf{box-shadow:inset 3px 0 0 #22c55e} .pc-trow.z-rel{box-shadow:inset 3px 0 0 var(--red)} /* 🏋️ (Mario) picker "cosa alleni fino alla partita?" */ .pc-ffp-ov{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px} .pc-ffp-box{background:var(--card,#15161d);border:1px solid var(--line);border-radius:16px;padding:16px;max-width:420px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.5)} .pc-ffp-box h3{margin:0 0 4px;color:var(--gold)} .pc-ffp-best{width:100%;margin:8px 0 10px;padding:12px;background:var(--gold);color:#1a1200;font-weight:800;justify-content:center} .pc-ffp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px} .pc-ffp-b{border:none;border-radius:9px;background:var(--card2);color:var(--fg,#eaeaea);font-weight:700;font-size:.82rem;padding:10px 9px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px} .pc-ffp-b b{color:var(--gold)} .pc-ffp-b.rel{outline:1px solid rgba(212,175,55,.5)} .pc-ffp-cat{margin:12px 0 5px;font-weight:800;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px} .pc-ffp-rel{color:var(--gold)} .pc-ffp-cancel{width:100%;margin-top:12px;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:9px;cursor:pointer} .pc-money .st-num{color:var(--gold);font-size:1.05em} .pc-week{border-color:rgba(96,165,250,.4)} .pc-week b{color:var(--blue)} .pc-actions .btn:disabled{opacity:.45;filter:grayscale(.5)} .pc-pot{color:var(--blue);font-weight:800;margin-left:-2px} .pc-namerow{display:flex;gap:8px}.pc-namerow input{flex:1;min-width:0} #home-profile-wrap{margin:0 0 10px}#home-profile-wrap:empty{display:none} /* Barra a pagine/tab del cruscotto giocatore */ .pc-navbar{display:flex;gap:4px;margin:2px 0 12px;position:sticky;top:0;z-index:5;background:var(--bg);padding:4px 0} .pc-nav{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(30,30,36,.55);border:1px solid var(--line);border-radius:11px;padding:7px 2px;color:var(--muted);font-size:1.15rem;cursor:pointer;line-height:1} .pc-nav small{font-size:.6rem;font-weight:800} .pc-nav.sel{border-color:var(--gold);background:rgba(245,197,66,.12);color:var(--gold)} /* Formazione (campo) */ .pc-pitch{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:linear-gradient(160deg,rgba(34,197,94,.12),rgba(17,24,39,.4));border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:12px} .pc-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;background:rgba(30,30,36,.7);border:1px solid var(--line);border-radius:9px;font-size:.66rem;font-weight:800;color:var(--muted);padding:4px 2px} .pc-slot.me{border-color:var(--gold);background:rgba(245,197,66,.16);color:var(--gold)} .pc-slot b{font-size:.62rem;color:var(--text);text-align:center;line-height:1.05} .pc-slot.me b{color:var(--gold)} /* Campo formazione giocatore: campo verde vero (come la carriera) ma rimpicciolito */ .pc-fpitch{max-width:290px;margin:0 auto 12px;aspect-ratio:3/3.6} .pc-fpitch .pslot{width:52px} .pc-fpitch .pslot .dot{width:34px;height:34px;font-size:.62rem} .pc-fpitch .pslot .nm{font-size:.56rem} .pc-hint{font-size:.72rem;color:var(--muted);line-height:1.4;margin:2px 0 8px} /* Fiducia allenatore */ .pc-trust{background:rgba(30,30,36,.55);border:1px solid var(--line);border-radius:11px;padding:8px 10px;margin-bottom:6px} .pc-trust-head{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:5px} .pc-trust-head b{color:var(--gold)} .pc-bar{height:8px;background:rgba(255,255,255,.09);border-radius:6px;overflow:hidden} .pc-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--gold));transition:width .25s} /* Allenamento mirato: griglia attributi */ .pc-attrs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px} .pc-attr{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;background:rgba(30,30,36,.55);border:1px solid var(--line);border-radius:11px;padding:8px 9px;color:var(--text);cursor:pointer} .pc-attr:active{transform:scale(.98)} .pc-attr.rel{border-color:var(--gold);background:rgba(245,197,66,.09)} .pc-attr:disabled{opacity:.45;filter:grayscale(.5);cursor:default} .pc-attr .pa-lab{font-size:.74rem;font-weight:700} .pc-attr .pa-val{font-size:1.15rem;font-weight:900} .pc-attr.rel .pa-val{color:var(--gold)} .pc-attr .pa-bar{height:5px;background:rgba(255,255,255,.09);border-radius:4px;overflow:hidden} .pc-attr .pa-bar>i{display:block;height:100%;background:var(--blue);transition:width .55s cubic-bezier(.22,1,.36,1)} .pc-attr.rel .pa-bar>i{background:var(--gold)} /* feedback allenamento: la barra CRESCE (transition) + badge "+X.X" verde che pulsa (Mario) */ .pc-attr .pa-val{position:relative} .pc-attr.trained{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset;animation:pc-trained-pulse .7s ease} .pc-attr.trained .pa-bar>i{background:var(--green)} .pa-gain{position:absolute;top:-10px;right:-2px;font-size:.62rem;font-weight:900;color:var(--green);animation:pc-gain-float 1.1s ease forwards;pointer-events:none} @keyframes pc-gain-float{0%{opacity:0;transform:translateY(4px)}20%{opacity:1}100%{opacity:0;transform:translateY(-10px)}} /* BANNER "è avanzato il GIORNO" (Mario): pop animato con giorno + azione + guadagno + soldi */ .pc-dayflash{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px;padding:11px 14px;border-radius:14px; background:linear-gradient(100deg,rgba(46,204,113,.16),rgba(52,152,219,.14));border:1px solid rgba(46,204,113,.4); box-shadow:0 6px 22px rgba(0,0,0,.32);animation:pc-dayflash-in .55s cubic-bezier(.22,1,.36,1);will-change:transform,opacity} .pc-dayflash .pcf-day{font-weight:900;font-size:1.06rem;letter-spacing:.2px} .pc-dayflash .pcf-act{opacity:.95;font-weight:700;font-size:.94rem} .pc-dayflash .pcf-gain{color:var(--green);font-weight:900} .pc-dayflash .pcf-money{margin-left:auto;font-weight:900;font-size:1rem;padding:2px 9px;border-radius:9px} .pc-dayflash .pcf-money.pos{color:var(--green);background:rgba(46,204,113,.14)} .pc-dayflash .pcf-money.neg{color:var(--red,#e74c3c);background:rgba(231,76,60,.14)} @keyframes pc-dayflash-in{0%{transform:translateY(-16px) scale(.94);opacity:0}55%{transform:translateY(0) scale(1.025);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}} /* il portafoglio in header "sussulta" quando cambia (feedback soldi) */ .pc-money-hd{display:inline-block;transition:color .2s} .pc-money-hd.pc-money-bump{animation:pc-money-bump .6s ease} @keyframes pc-money-bump{0%{transform:scale(1)}30%{transform:scale(1.22);color:var(--gold)}100%{transform:scale(1)}} /* PARTITA INTERATTIVA (Mario): pannello scelte con % + cronaca */ .im-panel{margin:8px 0 2px;padding:10px;border-radius:12px;background:rgba(20,28,44,.62);border:1px solid var(--line);animation:pc-dayflash-in .3s ease} .im-scen{font-weight:900;font-size:1rem;margin-bottom:5px;text-align:center} .im-hint{font-size:.72rem;color:var(--muted);text-align:center;margin-bottom:8px;line-height:1.3} .im-hint b{color:var(--gold)} .im-opts{display:flex;flex-direction:column;gap:7px} .im-opt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;padding:10px 13px;border-radius:11px;background:linear-gradient(100deg,rgba(52,152,219,.18),rgba(46,204,113,.11));border:1px solid rgba(120,170,255,.32);color:var(--text);font-weight:800;font-size:.96rem;cursor:pointer;transition:transform .1s,filter .12s} .im-opt:active{transform:scale(.97)} .im-opt:hover{filter:brightness(1.13)} .im-opt .im-opt-l{flex:1} .im-opt .im-pct{font-weight:900;font-size:.9rem;padding:2px 8px;border-radius:8px;min-width:48px;text-align:center;background:rgba(0,0,0,.3)} .im-pct.hi{color:#2ecc71}.im-pct.mid{color:#f5c542}.im-pct.lo{color:#e77} .im-pbar{flex-basis:100%;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden} .im-pbar>i{display:block;height:100%;border-radius:3px;transition:width .35s ease} .im-pbar>i.hi{background:#2ecc71}.im-pbar>i.mid{background:#f5c542}.im-pbar>i.lo{background:#e77} .im-ev{display:flex;align-items:center;gap:8px;padding:4px;border-radius:7px;animation:slideup .2s ease;font-size:.92em} .im-ev-min{width:30px;text-align:right;font-weight:700;color:var(--muted)} .im-ev-sc{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums} .im-ev.mine{background:rgba(212,175,55,.16)} .im-ev.opp{color:var(--muted)} .im-ev.miss{opacity:.72} .im-final{text-align:center;padding:9px;border-radius:11px;font-size:1rem;line-height:1.5} .im-final.w{background:rgba(46,204,113,.15)} .im-final.l{background:rgba(231,76,60,.15)} .im-final.d{background:rgba(148,163,184,.15)} /* MINI-CAMPO ANIMATO (Mario): i 22 pallini-giocatori che si MUOVONO in base all'azione (TU dorato, compagni blu, avversari rossi) */ .pc-pl-layer{position:absolute;inset:0;pointer-events:none;z-index:2} .pc-pl{position:absolute;width:10px;height:10px;border-radius:50%;margin:-5px 0 0 -5px;box-shadow:0 2px 3px rgba(0,0,0,.5);transition:left .5s cubic-bezier(.4,.5,.3,1),top .5s cubic-bezier(.4,.5,.3,1);animation:pc-breathe 2.6s ease-in-out infinite} .pc-pl.team{background:radial-gradient(circle at 35% 30%,#8fd0ff,#2b6fd6);border:1px solid rgba(255,255,255,.55)} .pc-pl.opp{background:radial-gradient(circle at 35% 30%,#ffa1a1,#c0392b);border:1px solid rgba(255,255,255,.35)} .pc-pl.gk{filter:saturate(.55) brightness(1.15)} .pc-pl.opp.foe{width:12px;height:12px;margin:-6px 0 0 -6px;box-shadow:0 0 0 2px rgba(231,76,60,.4),0 2px 3px rgba(0,0,0,.5)} .pc-pl.team.hi{box-shadow:0 0 0 3px rgba(138,208,255,.6),0 2px 3px rgba(0,0,0,.5)} .pc-pl.you{width:15px;height:15px;margin:-8px 0 0 -8px;background:radial-gradient(circle at 35% 30%,#ffe89a,#d4af37);border:2px solid #fff;z-index:3;box-shadow:0 0 0 2px rgba(212,175,55,.4),0 2px 5px rgba(0,0,0,.6);animation:none} .pc-pl.you::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,224,138,.55);animation:pc-youpulse 1.5s ease-out infinite} /* 🧑 v192 — il pallino "TU" mostra il VOLTO creato in fase di creazione personaggio (prima solo in lobby): niente cerchio dorato dietro, l'avatar riempie il dot (un filo più grande) e viene ritagliato sul viso. Solo estetica. */ .pc-pl.you.av{width:26px;height:26px;margin:-13px 0 0 -13px;background:none;border:2px solid rgba(255,224,138,.92);box-shadow:0 0 0 2px rgba(212,175,55,.35),0 3px 6px rgba(0,0,0,.6)} /* il ritaglio va sull'SVG, NON sul dot: `overflow:hidden` sul dot taglierebbe anche l'anello ::after che ti fa trovare in campo */ .pc-pl.you.av svg{width:100%;height:100%;display:block;border-radius:50%;clip-path:circle(50% at 50% 50%);transform:scale(1.38) translateY(-7%);transform-origin:50% 42%} .pc-pl.you.av::after{inset:-4px} @keyframes pc-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}} @keyframes pc-youpulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.55);opacity:0}} @media (prefers-reduced-motion:reduce){.pc-pl{animation:none}.pc-pl.you::after{animation:none}} /* CAMPO ANIMATO anche in CARRIERA ALLENATORE (Mario batch 3): stessa vista a pallini, display-only sugli eventi già calcolati */ .mt-pitch{position:relative;width:100%;max-width:420px;margin:8px auto 4px;aspect-ratio:2/1.05;background:repeating-linear-gradient(90deg,#2f7d33 0 9%,#348a38 9% 18%);border-radius:12px;overflow:hidden;box-shadow:inset 0 0 26px rgba(0,0,0,.4);perspective:520px} .mt-line-mid{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.4)} .mt-circle{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.38);border-radius:50%} .mt-box{position:absolute;top:34%;bottom:34%;width:8%;border:2px solid rgba(255,255,255,.38)} .mt-box-l{left:-1px;border-left:none;border-radius:0 8px 8px 0} .mt-box-r{right:-1px;border-right:none;border-radius:8px 0 0 8px} .mt-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 52%,rgba(0,0,0,.30));pointer-events:none;z-index:4} /* transform in transizione = il pallone PULSA quando entra in rete (coachPitchBuild.ballPulse, v192): si vede che è dentro */ .mt-ball{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:left .5s cubic-bezier(.4,.5,.3,1),top .5s cubic-bezier(.4,.5,.3,1),transform .22s ease-out;font-size:1.2rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));z-index:6} .mt-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.5rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.9);opacity:0;transition:opacity .18s;pointer-events:none;z-index:7} /* SLOW-MO sull'azione (gol/tiro): la scena si "focalizza" — leggero dim + saturazione, come un replay al rallentatore. Solo estetica: le transizioni dei pallini/palla (durata) le imposta il JS (coachPitchBuild.setPace) → veloce nel gioco, lenta sull'azione. */ .mt-pitch{transition:filter .3s ease} .mt-pitch.slowmo{filter:brightness(.9) saturate(1.18) contrast(1.05)} /* 🥅 Livello 3 — quando il renderer PixiJS della partita è attivo (`.fx-pitch-on`), i pallini/pallone DOM diventano il "modello" invisibile che Pixi specchia (la scritta GOL z-7 e il canvas Pixi z-3 restano visibili). Fallback: senza la classe (Pixi non montato / reduced-motion / WebGL assente) i pallini 2D si vedono come sempre. */ .fx-pitch-on .pc-pl-layer{opacity:0} .fx-pitch-on [id$="-ball"]{opacity:0} /* RIGORI nei risultati KO (Mario "chi vince, no dcr"): il vincitore ai rigori in ORO col ✓, etichetta chiara */ .res-row .pen-w{color:var(--gold,#e8c86a);font-weight:900} .res-row .pen-w::after{content:' ✓'} .res-row .pen-tag{opacity:.72;font-weight:600;font-size:.8em} /* banner VINCITORE ai supplementari nella cronaca allenatore (Mario: "chi passa" chiaro) */ .mev.mt-winner{justify-content:center;font-weight:900;font-size:1.05rem;color:var(--gold,#e8c86a);background:rgba(212,175,55,.14);border-radius:9px;padding:7px;margin-top:3px;animation:pc-money-bump .5s ease} /* badge divisione (Serie A/B) nella scelta club online 2-divisioni (Mario) */ .cc-name .cc-div{font-size:.66rem;font-weight:800;padding:1px 5px;border-radius:6px;background:rgba(120,170,255,.22);color:#bcd3ff;vertical-align:middle} /* AZIONI DELLA GIORNATA compatte in ALTO (Mario): Riposa + Serate, mobile-first, allineate/simmetriche */ .pc-quick{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:2px 0 8px} .pc-q{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:9px 3px;border-radius:12px;background:rgba(30,30,36,.6);border:1px solid var(--line);color:var(--text);cursor:pointer;font-size:1.18rem;line-height:1.12;transition:transform .1s,filter .12s;text-align:center} .pc-q b{font-size:.70rem;font-weight:800;white-space:nowrap} .pc-q small{font-size:.63rem;color:var(--muted)} .pc-q:active{transform:scale(.95)} .pc-q:hover{filter:brightness(1.13)} .pc-q:disabled{opacity:.4;cursor:default} .pc-q-disco{background:linear-gradient(135deg,rgba(155,89,182,.28),rgba(52,152,219,.14));border-color:rgba(155,89,182,.5)} .pc-ff-top{width:100%;font-size:.85rem;padding:8px;margin-bottom:2px} .pc-cat-hint{font-size:.72rem;color:var(--muted);margin:5px 2px 4px;line-height:1.3} /* barra allenamento: cresce (transition) + GLOW più forte se il guadagno è grande (Mario: niente numeri, solo la barra) */ .pc-attr .pa-bar>i[data-big="1"]{box-shadow:0 0 9px 1px var(--green)} @keyframes pc-trained-pulse{0%{box-shadow:0 0 0 1px var(--green) inset,0 0 10px rgba(34,197,94,.5)}100%{box-shadow:0 0 0 1px var(--green) inset,0 0 0 rgba(34,197,94,0)}} /* Infortuni (F3) */ .pc-injury{border-color:rgba(239,68,68,.55)!important;background:rgba(239,68,68,.1)} .pc-injury b{color:var(--red)} .pc-care .btn{flex:1;line-height:1.15;font-size:.82rem} .pc-care .btn small{font-weight:600;opacity:.85} .pc-care .btn:disabled{opacity:.45;filter:grayscale(.5)} /* Serate + affinità + news */ .pc-disco-btn{border-color:rgba(192,132,252,.5)!important} .pc-disco-btn:not(:disabled){color:#e9d5ff} .pc-affinity .pc-bar.aff>i{background:linear-gradient(90deg,#34d399,#3b82f6)} .pc-nights{gap:6px} .pc-nights .btn{flex:1;line-height:1.12;font-size:.76rem;padding:8px 4px} .pc-nights .btn small{font-weight:600;opacity:.8;font-size:.6rem} .pc-news .pc-trow{font-size:.82rem} .pc-news .pc-trow small{color:var(--muted);white-space:nowrap} /* 📰 News Carriera Giocatore (Mario: "si legge solo una parte, il resto è tagliato"): testo a CAPO (niente ellipsis su una riga) + lista scrollabile → si leggono TUTTE le news, non solo le prime. */ .pc-news-full{max-height:42vh;overflow-y:auto} .pc-news .pc-trow{align-items:flex-start} .pc-news .pc-trow>span:first-child{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.32} .pc-news-good>span:first-child{color:var(--green)} .pc-news-bad>span:first-child{color:var(--red)} /* Attributi per categoria (20 attributi in 6 categorie) */ .pc-cats{display:flex;flex-direction:column;gap:10px;margin-bottom:10px} .pc-cat{border:1px solid var(--line);border-radius:12px;padding:8px 8px 6px;background:rgba(17,24,39,.35)} .pc-cat.rel{border-color:rgba(245,197,66,.4);background:rgba(245,197,66,.05)} .pc-cat-h{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:800;margin:1px 3px 6px;color:var(--muted)} .pc-cat.rel .pc-cat-h{color:var(--gold)} .pc-cat-h span{font-size:1rem;font-weight:900;color:var(--text)} .pc-cat.rel .pc-cat-h span{color:var(--gold)} .pc-cat .pc-attrs{margin-bottom:0} /* Livelli di allenamento */ .pc-tiers{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px;margin-bottom:10px} .pc-tier{display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(30,30,36,.55);border:1px solid var(--line);border-radius:10px;padding:7px 3px;color:var(--text);font-size:.72rem;font-weight:800;cursor:pointer;line-height:1.15} .pc-tier small{font-weight:600;color:var(--muted);font-size:.64rem} .pc-tier.sel{border-color:var(--gold);background:rgba(245,197,66,.12);color:var(--gold)} .pc-tier.sel small{color:var(--gold)} .pc-tier:disabled{opacity:.4;filter:grayscale(.5);cursor:default} /* Morale + Negozio di lusso */ .pc-morale .pc-bar.mor>i{background:linear-gradient(90deg,#f472b6,#facc15)} .pc-shop-btn{border-color:rgba(244,114,182,.4)!important} .pc-shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px} .pc-lux{display:flex;flex-direction:column;gap:2px;text-align:left;background:rgba(30,30,36,.55);border:1px solid var(--line);border-radius:11px;padding:8px 10px;color:var(--text);cursor:pointer} .pc-lux:active{transform:scale(.98)} .pc-lux.off{opacity:.4;filter:grayscale(.5);cursor:default} .pc-lux .lux-l{font-size:.76rem;font-weight:700;line-height:1.2} .pc-lux .lux-c{font-size:.9rem;font-weight:900;color:var(--gold)} .pc-lux .lux-m{font-size:.66rem;color:#f472b6;font-weight:800} /* Mercato / offerte (F5) */ .pc-offers{border-color:rgba(96,165,250,.45)!important} .pc-winter{border-color:rgba(125,211,252,.55)!important;background:linear-gradient(160deg,rgba(125,211,252,.1),rgba(96,165,250,.03))} .pc-offer{background:rgba(17,24,39,.4);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:8px} .po-head b{color:var(--blue)} .po-head small{color:var(--muted)} .po-body{font-size:.82rem;margin:3px 0} .po-msg{font-size:.74rem;color:var(--gold);margin:4px 0} .po-btns{display:flex;gap:6px;margin-top:5px} .po-btns .btn{flex:1} .pc-titles{border-color:var(--gold)!important;background:rgba(245,197,66,.12)} .pc-titles b{color:var(--gold)} .pc-cupdue{border-color:var(--gold)!important;background:linear-gradient(135deg,rgba(245,197,66,.16),rgba(245,197,66,.04));box-shadow:0 0 0 1px rgba(245,197,66,.25)} .pc-cupdue b{color:var(--gold)} .pc-cupdue .btn-mini{flex:0 0 auto!important;white-space:nowrap;width:auto!important;padding:8px 16px} /* Hall of Fame (F6) */ .hof-hero{text-align:center;padding:20px 14px;background:linear-gradient(160deg,rgba(245,197,66,.14),rgba(17,24,39,.4));border:1px solid var(--gold);border-radius:16px;margin-bottom:14px} .hof-badge{font-size:3.2rem;line-height:1} .hof-hero h2{margin:6px 0 2px;font-size:1.5rem} .hof-hero p{color:var(--muted);font-size:.82rem;margin:0} .hof-title{margin-top:8px;font-weight:900;color:var(--gold);font-size:1.05rem} /* Classifica online (F7) */ .pc-board-tabs{display:flex!important;flex-wrap:wrap;grid-template-columns:none!important;gap:5px;padding-bottom:3px} .pc-board-tabs .pc-tier{flex:0 0 auto;min-width:70px;flex-direction:row;gap:3px} .ovr.ovr-hi{color:var(--green)} .ovr.ovr-lo{color:var(--red)} /* ===== RELAZIONI / FAMIGLIA (pop-up in-pagina + card in tab Vita) ===== */ .pc-modal-ov{position:fixed;inset:0;z-index:120;background:rgba(4,6,12,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadein .18s ease} .pc-modal{width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--bg2);border:1px solid var(--gold);border-radius:18px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 18px 50px rgba(0,0,0,.6);animation:slideup .22s ease;text-align:center} .pc-modal-h{font-weight:900;font-size:1.05rem;color:var(--gold);margin-bottom:8px} .pc-modal-h.life-good{color:#8fe0a3}.pc-modal-h.life-bad{color:#e59aa0} .pc-modal-b{font-size:.92rem;line-height:1.45;color:var(--text)} .pc-modal-b b{color:#f9a8d4} .pc-voto-big{font-size:2.1rem;font-weight:900;color:var(--gold);line-height:1.1;margin:8px 0 2px} .pc-voto-big small{font-size:1rem;color:var(--muted);font-weight:700} .pc-modal-rel{font-size:.78rem;color:var(--muted);margin:6px 0 0} .pc-modal-btns{display:flex;flex-direction:column;gap:8px;margin-top:14px} .pc-modal-btns .btn{width:100%;line-height:1.2} .pc-modal-btns .btn small{font-weight:600;opacity:.85;margin-left:4px} .pc-voto{flex:0 0 auto;font-size:.72rem;font-weight:900;color:#1a1200;background:var(--gold);border-radius:999px;padding:2px 8px;white-space:nowrap} .pc-rel-card{display:flex;flex-direction:column;gap:2px;background:rgba(244,114,182,.08);border:1px solid rgba(244,114,182,.4);border-radius:12px;padding:10px 12px;margin-bottom:8px} .pc-rel-nm{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.98rem;min-width:0} .pc-rel-nm>span:not(.pc-voto){overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pc-rel-sub{font-size:.72rem;color:var(--muted)} .pc-rel-empty{background:rgba(30,30,36,.55);border:1px dashed var(--line);border-radius:12px;padding:12px;font-size:.86rem;color:var(--muted);text-align:center;margin-bottom:8px} .pc-rel-kids{margin-bottom:8px} .pc-rel-btns{flex-direction:column;gap:8px} .pc-rel-btns .btn{width:100%} /* Inviti come pop-up in-pagina (riusa .pc-modal-ov / .pc-modal) */ .inv-pop-row{background:rgba(30,30,36,.55);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;text-align:left} .inv-pop-row:last-child{margin-bottom:0} .inv-pop-txt{font-size:.9rem;line-height:1.35;margin-bottom:8px} .inv-pop-txt b{color:var(--gold)} .inv-pop-btns{display:flex;gap:8px} .inv-pop-btns .btn{flex:1} /* Casinò */ .pc-bet-amts{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap} .pc-bet-amt{flex:1;min-width:60px;background:rgba(30,30,36,.55);border:1px solid var(--line);border-radius:10px;padding:8px 4px;color:var(--text);font-size:.78rem;font-weight:800;cursor:pointer;white-space:nowrap} .pc-bet-amt.sel{border-color:var(--gold);background:rgba(245,197,66,.12);color:var(--gold)} .pc-bet-amt:disabled{opacity:.4;cursor:default} .pc-bet-result{text-align:center;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px;background:rgba(30,30,36,.55)} .pc-bet-result.win{border-color:var(--green);background:rgba(34,197,94,.1)} .pc-bet-result.lose{border-color:var(--red);background:rgba(239,68,68,.09)} .pc-bet-result.push{border-color:var(--gold)} .pc-bet-label{font-size:1.5rem;line-height:1.2;letter-spacing:2px} .pc-bet-sub{font-size:.82rem;color:var(--muted);margin-top:2px} .pc-bet-result.win .pc-bet-sub b{color:var(--green)} .pc-bet-result.lose .pc-bet-sub b{color:var(--red)} .pc-slot-btn{margin-top:2px} .pc-slot-btn small{font-weight:600;opacity:.8} /* Dirigenza: trattativa stipendio / cessione */ .pc-dirig .btn{flex:1;line-height:1.15;font-size:.84rem} .pc-dirig .btn small{font-weight:600;opacity:.8;font-size:.64rem} .pc-dirig .btn:disabled{opacity:.5} /* F8 carriera giocatore ONLINE */ .pc-online-box{border-color:rgba(96,165,250,.5)!important;background:rgba(96,165,250,.08)} .pc-online-box b{color:var(--blue)} .pc-mates{border-color:rgba(34,197,94,.45)!important;background:rgba(34,197,94,.08)} .pc-mates b{color:var(--green)} .pslot.mate .dot{background:#0f172a;border:2px solid var(--green);color:var(--green)} .pslot.mate .nm{color:var(--green);font-weight:800} /* ---- NOVITÀ / CHANGELOG ---- */ .cl-btn{ display:inline-flex; align-items:center; gap:6px; margin:10px auto 0; padding:7px 16px; border:none; border-radius:999px; background:linear-gradient(135deg,#f5c542,#e8a020); color:#1a1200; font-weight:800; font-size:.9rem; cursor:pointer; box-shadow:0 6px 18px rgba(245,197,66,.3); position:relative; } .cl-btn:active{ transform:scale(.96); } .cl-badge{ width:11px; height:11px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(239,68,68,.35); animation:clpulse 1.1s ease-in-out infinite; } .cl-badge.hidden{ display:none; } @keyframes clpulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.35); opacity:.7; } } .cl-overlay{ position:fixed; inset:0; z-index:120; background:rgba(4,6,12,.82); backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding:16px; /* 📱 iOS: parti SOTTO il notch e permetti lo scroll dell'overlay se il pannello è alto → l'header con la ✕ non finisce mai tagliato in alto */ padding-top:max(16px, calc(env(safe-area-inset-top) + 10px)); overflow-y:auto; -webkit-overflow-scrolling:touch; } .cl-overlay.hidden{ display:none; } .cl-panel{ width:100%; max-width:560px; display:flex; flex-direction:column; overflow:hidden; max-height:90vh; /* fallback */ max-height:calc(100dvh - env(safe-area-inset-top) - 28px); /* dvh = viewport REALE su mobile (barra browser inclusa) → il pannello ci sta e la ✕ resta visibile */ background:linear-gradient(180deg,#141b2e,#0d1322); border:1.5px solid var(--gold); border-radius:20px; padding:22px 18px calc(20px + env(safe-area-inset-bottom)); position:relative; animation:slideup .28s ease; box-shadow:0 20px 60px rgba(0,0,0,.6); } /* 🌍 matchmaking pubblico: picker formato + card vincitore */ .mm-fmt-row{ display:flex; flex-direction:column; gap:10px; margin-top:14px; } .mm-fmt{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px; } .mm-fmt small{ opacity:.75; font-weight:600; font-size:.78rem; } .pubend-champ{ text-align:center; margin:14px 0; padding:14px; border-radius:14px; background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,.05)); border:1px solid var(--gold); } .pubend-champ b{ color:var(--gold); font-size:1.25rem; display:block; } .pubend-champ small{ display:block; opacity:.85; margin-top:4px; } .mkt-timer{ text-align:center; margin:8px 0; padding:8px 10px; border-radius:10px; background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.4); font-weight:600; } .mkt-timer b{ color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:.5px; } .cl-x{ position:absolute; top:12px; right:14px; width:34px; height:34px; border:none; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text); font-size:1rem; cursor:pointer; } .cl-title-big{ font-size:1.5rem; font-weight:900; text-align:center; letter-spacing:-.5px; background:linear-gradient(135deg,#f5c542,#ffe9a8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .cl-sub{ text-align:center; color:var(--muted); font-size:.85rem; margin:4px 0 16px; } .cl-body{ display:flex; flex-direction:column; gap:14px; overflow-y:auto; flex:1; min-height:0; } .cl-entry{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:14px; padding:14px 14px 12px; } .cl-entry:first-child{ border-left-color:var(--green); box-shadow:0 0 0 1px rgba(34,197,94,.25); } /* --- 📲 Installa app + chiarezza "ultimi aggiornamenti" (richiesta Mario) --- */ .hero-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; } .hero-btns .cl-btn{ margin:10px 0 0; } .cl-btn-install{ background:transparent; color:var(--gold); border:1.5px solid var(--gold); box-shadow:none; font-weight:800; } .cl-btn-install.hidden{ display:none; } .cl-btn-install:active{ transform:scale(.96); } .cl-lead{ text-align:center; font-size:.9rem; color:var(--text); background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.32); border-radius:10px; padding:8px 10px; } .cl-tag{ display:inline-block; font-size:.62rem; font-weight:900; letter-spacing:.3px; padding:2px 7px; border-radius:999px; vertical-align:middle; margin-left:4px; white-space:nowrap; } .cl-tag-latest{ background:var(--green); color:#04210f; } .cl-tag-new{ background:var(--red); color:#fff; } .cl-entry-new{ box-shadow:0 0 0 2px rgba(34,197,94,.35); } .install-modal{ max-width:460px; } .install-h{ font-size:1.35rem; font-weight:900; text-align:center; color:var(--gold); margin:2px 0 12px; } .install-p{ font-size:.95rem; color:var(--text); margin:0 0 10px; } .install-steps{ margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:9px; } .install-steps li{ font-size:.95rem; line-height:1.4; color:#d6dcea; } .ihint{ display:inline-block; background:rgba(255,255,255,.1); border-radius:6px; padding:0 6px; font-weight:800; } .install-note{ font-size:.82rem; color:var(--muted); margin:4px 0 14px; } .install-ok{ width:100%; } .cl-ehead{ display:flex; align-items:center; gap:11px; margin-bottom:9px; } .cl-emoji{ font-size:1.9rem; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); } .cl-etitle-wrap{ flex:1; min-width:0; } .cl-etitle{ font-weight:800; font-size:1.02rem; color:var(--text); line-height:1.2; } .cl-edate{ font-size:.74rem; color:var(--gold); font-weight:700; margin-top:2px; } .cl-items{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; } .cl-items li{ position:relative; padding-left:20px; font-size:.9rem; line-height:1.4; color:#d6dcea; } .cl-items li::before{ content:'⚡'; position:absolute; left:0; top:0; font-size:.85rem; } .cl-items li b{ color:#fff; } .cl-close-btn{ margin-top:16px; width:100%; } /* ============================================================================ v172 — LOOK "VIDEOGIOCO MOBILE" (richiesta Mario): SOLO estetica, zero struttura/logica. Enfasi "forgia": metallo fuso, profondità, bagliore oro. Agisce sulle classi CONDIVISE → si propaga a TUTTE le schermate senza toccare l'HTML/JS. Nessuna sezione rimossa o rimpicciolita. Riduci-movimento in fondo. ============================================================================ */ :root{ --ember:#ff6a2b; --gold-hi:#ffe9a8; --gold-deep:#e0a022; } /* HERO: il LOGO vero, con aura di forgia dietro + galleggiamento leggero */ .home-hero{ position:relative; } .home-hero::before{ content:""; position:absolute; left:50%; top:6px; width:min(62vw,240px); aspect-ratio:1; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(255,150,50,.30), rgba(245,197,66,.10) 55%, transparent 72%); pointer-events:none; z-index:0; animation:forgeGlow 4.8s ease-in-out infinite; } .home-logo{ position:relative; z-index:1; filter:drop-shadow(0 10px 26px rgba(255,150,40,.42)) drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation:forgeFloat 5s ease-in-out infinite; } .home-hero .tagline, .home-hero .hero-btns, .home-hero h1{ position:relative; z-index:1; } /* BOTTONI — profondità "metallo" (stesse dimensioni, solo superficie) */ .btn{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px -12px rgba(0,0,0,.85); } .btn-secondary{ background:linear-gradient(150deg, var(--card2), #17171c); } .btn-ghost{ background:linear-gradient(150deg, rgba(40,40,48,.5), rgba(20,20,25,.55)); } .btn-primary{ background:linear-gradient(135deg, #ffe89a 0%, var(--gold) 42%, var(--gold-deep) 100%); box-shadow:0 10px 24px -10px rgba(245,170,40,.55), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 9px rgba(150,80,0,.28); } .btn-roll{ background:linear-gradient(135deg, #ffe89a 0%, var(--gold) 40%, var(--gold-deep) 100%); box-shadow:0 14px 30px -10px rgba(245,170,40,.6), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 10px rgba(150,80,0,.3); } .btn-mini{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } /* MODALITÀ — pannelli tattili; l'attivo è oro fuso con profondità */ .mode-tab{ background:linear-gradient(150deg, var(--card2), #141419); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px -14px rgba(0,0,0,.9); } .mode-tab.active{ background:linear-gradient(135deg, #ffe08a, var(--gold) 45%, var(--gold-deep)); box-shadow:0 10px 26px -10px rgba(245,170,40,.6), inset 0 1px 0 rgba(255,255,255,.5); } /* COMPETIZIONE / CHIP / PILL / CARD / PROFILO+AMICI+CARRIERE — profondità coerente */ .comp-tab.active{ background:linear-gradient(135deg,#ffe08a,var(--gold-deep)); color:#1a1200; box-shadow:0 6px 16px -8px rgba(245,170,40,.5), inset 0 1px 0 rgba(255,255,255,.4); } .chip.sel{ background:linear-gradient(135deg,#ffe08a,var(--gold-deep)); box-shadow:0 6px 16px -8px rgba(245,170,40,.5), inset 0 1px 0 rgba(255,255,255,.4); } .chip, .pill, .comp-tab, .prof-row{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .card, .pcard, .lobby-player{ background:linear-gradient(160deg, var(--card), #141419); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px -18px rgba(0,0,0,.9); } /* INPUT — incasso + focus oro */ input[type=text]{ box-shadow:inset 0 2px 6px rgba(0,0,0,.4); } input[type=text]:focus{ box-shadow:inset 0 2px 6px rgba(0,0,0,.4), 0 0 0 3px rgba(245,197,66,.22); } /* HEADER sticky — filo oro */ .draft-header{ box-shadow:0 2px 14px -6px rgba(0,0,0,.8); border-bottom-color:rgba(245,197,66,.18); } /* NOTA "1–20 giocatori" (nuova, richiesta Mario) */ .players-hint{ text-align:center; font-size:.78rem; color:var(--muted); margin:16px 8px 14px; line-height:1.45; } .players-hint b{ color:var(--gold); } @keyframes forgeGlow{ 0%,100%{opacity:.6} 50%{opacity:1} } @keyframes forgeFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @media (prefers-reduced-motion:reduce){ .home-logo, .home-hero::before{ animation:none } } /* CONTATORE "giocatori online ora" (Mario) — pill con pallino verde pulsante, sotto l'hero */ .online-live{ display:inline-flex; align-items:center; gap:7px; margin:9px 0 0; padding:6px 13px; border-radius:999px; background:linear-gradient(150deg,rgba(32,32,38,.92),rgba(18,18,22,.92)); border:1px solid var(--line); font-size:.82rem; font-weight:700; color:#d7cfc0; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .online-live b{ color:#57d977; font-weight:900; margin-right:1px; } .olive-dot{ width:8px; height:8px; border-radius:50%; background:#57d977; box-shadow:0 0 8px 1px rgba(87,217,119,.7); animation:olivepulse 1.8s ease-in-out infinite; } @keyframes olivepulse{ 0%,100%{opacity:.5; transform:scale(.82)} 50%{opacity:1; transform:scale(1)} } @media (prefers-reduced-motion:reduce){ .olive-dot{ animation:none } } /* v175 — MODALITÀ come nel mockup (Mario): icona in riquadro + titolo + sottotitolo + freccia › (attivo: badge GIOCA oro) */ .mode-tab{ display:flex; align-items:center; gap:13px; text-align:left; padding:13px 15px; } .mt-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.42rem; background:radial-gradient(70% 70% at 40% 30%,#2c2c34,#15151a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 10px -4px #000; } .mt-tx{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; } .mt-tx b{ font-size:1.12rem; font-weight:800; letter-spacing:.01em; } .mt-tx small{ font-size:.75rem; color:var(--muted); margin-top:2px; } .mt-go{ flex:0 0 auto; color:var(--muted); font-size:1.4rem; font-weight:800; opacity:.8; } .mt-badge{ display:none; } .mode-tab.active .mt-ic{ background:rgba(20,12,0,.20); box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); } .mode-tab.active .mt-tx b{ color:#231700; } .mode-tab.active .mt-tx small{ color:#6a4e12; } .mode-tab.active .mt-go{ display:none; } .mode-tab.active .mt-badge{ display:inline-block; margin-left:auto; font-size:.62rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; color:#3a2600; background:rgba(0,0,0,.16); border-radius:20px; padding:5px 11px; } /* v208 — HOME a DUE livelli: 💼 Allenatore / 🎮 Giocatore (gruppi grandi) → sotto-modalità rientrate (veloce/dettagliata). Il gruppo attivo è oro pieno con la freccia › ruotata (= aperto); le sotto-schede sono il livello 2. */ .mode-groups{ display:flex; flex-direction:column; gap:10px; margin-top:14px; } .mode-group{ display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer; color:var(--text); border:1px solid var(--line); border-radius:16px; padding:16px 17px; font-weight:800; transition:all .15s; background:linear-gradient(150deg, var(--card2), #141419); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px -14px rgba(0,0,0,.9); } .mode-group .mt-go{ transition:transform .2s ease; } .mode-group.active{ border-color:transparent; color:#1a1200; background:linear-gradient(135deg,#ffe08a,var(--gold) 45%,var(--gold-deep)); box-shadow:0 10px 26px -10px rgba(245,170,40,.6), inset 0 1px 0 rgba(255,255,255,.5); } .mode-group.active .mt-ic{ background:rgba(20,12,0,.20); box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); } .mode-group.active .mt-tx b{ color:#231700; } .mode-group.active .mt-tx small{ color:#6a4e12; } .mode-group.active .mt-go{ transform:rotate(90deg); color:#3a2600; opacity:1; } /* v299 — EMBLEMI ruolo: sulle due card Allenatore/Giocatore, al posto delle emoji, line-art oro "inciso" in un coin con bagliore dorato. Solo estetica; tutto il resto (logo, Novità/Classifiche, sotto-modalità) resta com'è. */ .mode-group .mt-ic{ width:52px; height:52px; background:radial-gradient(78% 78% at 42% 28%, rgba(245,197,66,.22), #0f0f14 72%); box-shadow:inset 0 0 0 1px rgba(245,197,66,.32), inset 0 -5px 12px rgba(0,0,0,.55); } .mode-group .mt-ic .emblem{ width:33px; height:33px; color:var(--gold); display:block; } .mode-group.active .mt-ic{ background:rgba(20,12,0,.16); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); } .mode-group.active .mt-ic .emblem{ color:#231700; } .mode-tab .mt-ic .emblem{ width:26px; height:26px; color:var(--gold); display:block; } .mode-tab.active .mt-ic .emblem{ color:#231700; } /* livello 2 — sotto-modalità: rientrate col filo oro a sinistra, un filo più compatte del gruppo */ /* v285: le sotto-schede sono ora DENTRO .mode-groups (flex gap:10px) e seguono il loro gruppo → il gap gestisce la spaziatura (niente più il margin-top:14px di .mode-switch che le staccava troppo dal bottone del gruppo). */ .mode-switch.submodes{ margin-top:-2px; margin-left:12px; padding-left:10px; border-left:2px solid rgba(245,197,66,.28); } .mode-switch.submodes .mode-tab{ padding:11px 14px; } .mode-switch.submodes .mt-ic{ width:40px; height:40px; font-size:1.24rem; } .mode-switch.submodes .mt-tx b{ font-size:1.04rem; } .mode-switch.submodes.hidden{ display:none; } /* v300 — "GIOCA" visibile su OGNI sotto-modalità (cliccando il bottone si apre il pannello sotto), non solo su quella attiva; niente chevron sulle sotto */ .mode-switch.submodes .mode-tab .mt-badge{ display:inline-block; margin-left:auto; font-size:.62rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; color:var(--gold); background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.32); border-radius:20px; padding:5px 11px; } .mode-switch.submodes .mode-tab .mt-go{ display:none; } .mode-switch.submodes .mode-tab.active .mt-badge{ color:#3a2600; background:rgba(0,0,0,.18); border-color:transparent; } /* 🏆 HUB CLASSIFICHE UNIFICATO — barra dei 4 MODI in cima (Allenatore/Giocatore/Veloce/Sfide) */ .hub-modes{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:2px; flex-shrink:0; } .hub-mode{ cursor:pointer; background:var(--card2); border:1px solid var(--line); color:var(--muted); border-radius:10px; padding:9px 4px; font-size:.8rem; font-weight:800; line-height:1.15; text-align:center; transition:transform .08s; } .hub-mode:active{ transform:scale(.95); } .hub-mode.active{ background:linear-gradient(180deg,#f5d67a,#cdb079); color:#231700; border-color:#cdb079; box-shadow:0 3px 12px -4px rgba(205,176,121,.6); } .hub-delegate{ text-align:center; padding:26px 10px; color:var(--muted); } .hub-delegate p{ margin:0 0 16px; font-size:.92rem; } @media (max-width:380px){ .hub-mode{ font-size:.72rem; padding:8px 2px; } } /* 🏆 CLASSIFICHE GLOBALI ALLENATORE (competizione tra account) — overlay riusa .cl-overlay/.cl-panel/.cl-body */ /* flex-shrink:0 → i controlli NON si schiacciano quando la lista è lunga (più account): senza, `overflow-x:auto` azzera la min-height flex e la colonna `.cl-body` comprime le pill fino a tagliarle (bug Android/telefoni con lista piena). */ /* (Mario) tutte le categorie della classifica su UNA pagina, a capo automatico: niente più scorrimento laterale per vederle */ .cb-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 2px 10px; margin-bottom:4px; flex-shrink:0; } .cb-tabs::-webkit-scrollbar{ display:none; } .cb-tab{ flex:0 0 auto; cursor:pointer; background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:20px; padding:7px 13px; font-size:.8rem; font-weight:800; white-space:nowrap; transition:all .12s; } .cb-tab:active{ transform:scale(.96); } .cb-tab.active{ background:linear-gradient(180deg,#f5d67a,#cdb079); color:#231700; border-color:#cdb079; box-shadow:0 3px 12px -4px rgba(205,176,121,.6); } .cb-rows{ display:flex; flex-direction:column; } .cb-row{ gap:10px; } .cb-rank{ flex:0 0 auto; width:30px; text-align:center; font-weight:900; font-size:1.02rem; color:var(--gold); } /* chip CHIARO dietro il crest: i loghi dei club sono disegnati per fondo bianco → sul nero sparirebbero (loghi scuri/sottili) */ .cb-crest{ flex:0 0 auto; width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); } .cb-crest-fb{ display:flex; align-items:center; justify-content:center; border-radius:50%; padding:0; font-size:.72rem; font-weight:900; color:#fff; letter-spacing:-.02em; filter:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } /* 🛡️ EMBLEMI PROFILO (stemmi inventati scelti dall'utente) */ .emb-ico{ display:inline-flex; vertical-align:middle; flex:0 0 auto; } .emb-ico .emb-svg{ display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); } .emb-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; } .emb-pick{ background:rgba(255,255,255,.04); border:2px solid transparent; border-radius:12px; padding:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; } .emb-pick:hover{ background:rgba(255,255,255,.08); } .emb-pick.sel{ border-color:var(--gold); background:rgba(212,175,55,.14); } .emb-panel{ max-width:380px; text-align:center; } /* ✨ emblemi SPECIALI (sbloccabili): alone dorato che pulsa lentamente (CSS-only, leggerissimo) */ .emb-svg.emb-special{ filter:drop-shadow(0 0 3px rgba(255,214,90,.9)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); animation:embGlow 2.6s ease-in-out infinite; } @keyframes embGlow{ 0%,100%{ filter:drop-shadow(0 0 2px rgba(255,214,90,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); } 50%{ filter:drop-shadow(0 0 6px rgba(255,214,90,1)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); } } .emb-svg.emb-store{ filter:drop-shadow(0 0 3px rgba(150,210,255,.85)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); animation:embShine 3.2s ease-in-out infinite; } @keyframes embShine{ 0%,100%{ filter:drop-shadow(0 0 2px rgba(150,210,255,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); } 50%{ filter:drop-shadow(0 0 7px rgba(190,230,255,.95)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); } } @media (prefers-reduced-motion: reduce){ .emb-svg.emb-store{ animation:none; } } .emb-pick{ position:relative; } .emb-pick.locked{ opacity:.5; } .emb-pick.locked .emb-svg{ filter:grayscale(.85) brightness(.7); animation:none; } .emb-lock{ position:absolute; right:5px; bottom:4px; font-size:.8rem; filter:drop-shadow(0 1px 1px #000); } .emb-hint{ font-size:.76rem; color:var(--muted); margin:6px 2px 0; line-height:1.3; } @media (prefers-reduced-motion: reduce){ .emb-svg.emb-special{ animation:none; } } .cb-row .pl-name{ flex:1; min-width:0; font-weight:800; overflow:hidden; } .cb-row .pl-name small{ display:block; font-size:.7rem; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cb-addfr{ flex:0 0 auto; margin:0 4px; border:1px solid rgba(96,165,250,.5); background:rgba(96,165,250,.12); color:#cfe3ff; border-radius:8px; font-size:.72rem; font-weight:800; padding:4px 7px; cursor:pointer; line-height:1; white-space:nowrap; transition:transform .1s, background-color .2s; } .cb-addfr:active{ transform:scale(.9); } .cb-addfr:disabled{ opacity:.75; cursor:default; } .cb-addfr.done{ border-color:#3a6a3a; background:rgba(58,106,58,.2); color:#a6e6a6; } .cb-val{ flex:0 0 auto; text-align:right; font-weight:900; font-size:1.05rem; color:var(--gold); } .cb-val small{ font-size:.62rem; color:var(--muted); font-weight:700; margin-left:2px; } .cb-you{ margin:12px 0 5px; text-align:center; font-size:.9rem; font-weight:800; color:var(--gold); } .cb-you-out{ margin-top:14px; padding:11px 12px; border:1px dashed var(--line); border-radius:12px; text-align:center; font-size:.85rem; font-weight:700; color:var(--muted); background:rgba(30,30,36,.4); } .cb-hint{ text-align:center; color:var(--muted); font-size:.9rem; padding:22px 8px; } /* 🛡️ STEMMA CLUB condiviso in tutto il gioco (chip chiaro: i crest sono per fondo bianco) */ /* SOLO il logo (niente riquadro bianco): trasparente + lieve ombra per lo stacco sul fondo scuro */ .club-crest{ display:inline-block; flex:0 0 auto; width:20px; height:20px; object-fit:contain; vertical-align:middle; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)); } .club-crest-fb{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-size:.62rem; font-weight:900; color:#fff; letter-spacing:-.03em; filter:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } .club-tag{ display:inline-flex; align-items:center; gap:6px; min-width:0; vertical-align:middle; } .club-tag .ct-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* nelle tabelle classifica: cella club con stemma */ .ctab .tc-club .club-crest{ margin-right:6px; } /* allineamento stemma+nome nelle liste club (setup, header) */ .cc-name{ display:flex; align-items:center; gap:7px; } #dash-club-name{ display:inline-flex; align-items:center; max-width:100%; overflow:hidden; } #dash-club-name .club-tag{ gap:8px; min-width:0; max-width:100%; } #dash-club-name .club-crest{ width:24px; height:24px; flex:0 0 auto; } /* 🎯 (Mario) il nome squadra TRONCA con "…" e non sale MAI sui soldi, qualunque sia la lunghezza (né header rotto/sovrapposto) */ #dash-club-name .ct-nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-club{ padding-right:10px; } .dash-club #dash-date{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .tc-club{ white-space:nowrap; } /* 🎴 CARD FINE CARRIERA / CONDIVIDI */ .cc-overlay{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.82); display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:20px 12px 40px; } .cc-overlay.hidden{ display:none; } .cc-panel{ width:100%; max-width:440px; position:relative; } .cc-x{ position:absolute; top:-4px; right:0; z-index:2; width:38px; height:38px; border-radius:50%; border:none; background:rgba(40,40,46,.9); color:#f1ece1; font-size:1.1rem; cursor:pointer; } .cc-card{ background:radial-gradient(120% 80% at 50% 12%, #1a1a20, #0a0a0c); border:1.5px solid rgba(205,176,121,.5); border-radius:22px; padding:26px 20px 0; box-shadow:0 10px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(205,176,121,.06); overflow:hidden; } .cc-top{ text-align:center; } .cc-avatar{ width:96px; margin:0 auto 10px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); } .cc-avatar svg{ width:100%; height:auto; display:block; } .cc-kicker{ color:var(--gold); font-weight:800; letter-spacing:.08em; font-size:.82rem; text-transform:uppercase; } .cc-name{ color:#f1ece1; font-weight:900; font-size:1.85rem; line-height:1.1; margin-top:8px; } .cc-sub{ color:var(--gold); font-weight:700; font-size:1rem; margin-top:6px; } .cc-badges{ display:flex; justify-content:center; gap:12px; margin:18px 0 4px; flex-wrap:wrap; } .cc-badge{ background:rgba(28,28,33,.9); border:1px solid var(--line); border-radius:14px; padding:10px 16px; text-align:center; min-width:78px; } .cc-bv{ color:#f5d67a; font-weight:900; font-size:1.5rem; } .cc-bl{ color:var(--muted); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; } .cc-stats{ display:flex; gap:8px; margin:16px 0 4px; background:rgba(28,28,33,.6); border:1px solid var(--line); border-radius:14px; padding:12px 4px; } .cc-stat{ flex:1; text-align:center; } .cc-sv{ color:#f1ece1; font-weight:900; font-size:1.25rem; } .cc-sl{ color:var(--muted); font-size:.66rem; font-weight:700; text-transform:uppercase; margin-top:2px; } .cc-sec{ color:var(--gold); font-weight:800; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin:20px 0 10px; } .cc-sec.cc-empty{ color:var(--muted); text-transform:none; font-weight:600; text-align:center; letter-spacing:0; } .cc-tros{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 6px; } .cc-tro{ text-align:center; } .cc-tro-ic{ font-size:1.7rem; display:block; } .cc-tro-ic .trophy-ic{ height:1.6rem; vertical-align:middle; } .cc-tro-n{ color:#f5d67a; font-weight:900; font-size:1rem; } .cc-tro-l{ color:var(--muted); font-size:.6rem; font-weight:700; display:block; text-transform:uppercase; } .cc-path{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .cc-step{ display:flex; flex-direction:column; align-items:center; gap:4px; } .cc-step .club-crest{ width:34px; height:34px; } .cc-step-l{ color:var(--muted); font-size:.6rem; font-weight:700; } .cc-crest-fb{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#333; color:#fff; font-weight:900; font-size:.7rem; } .cc-foot{ margin:22px -20px 0; padding:14px; text-align:center; color:var(--gold); font-size:.85rem; font-weight:700; background:rgba(205,176,121,.1); } .cc-actions{ display:flex; gap:8px; margin-top:14px; } .cc-actions .btn{ flex:1; } .cc-msg{ text-align:center; color:var(--gold); font-size:.85rem; font-weight:700; min-height:18px; margin-top:8px; } /* stemma nelle intestazioni partita (quando escono le squadre) */ .mt-vs-t .club-crest{ margin:0 5px; } #mt-home .club-crest, #mt-away .club-crest{ vertical-align:middle; margin-right:6px; } /* stemma nelle righe risultati/coppe */ .res-row .h .club-crest{ margin-right:5px; } .res-row .a .club-crest{ margin-left:5px; } /* 🎨 CREAZIONE PERSONAGGIO Carriera Giocatore: aspetto + MAGLIA (numero/cognome dietro) con anteprima live */ .pc-create-preview{ display:flex; gap:14px; align-items:flex-end; justify-content:center; margin:6px 0 14px; } .pc-prev-av{ width:86px; flex:0 0 auto; } .pc-prev-jr{ width:154px; flex:0 0 auto; } .pc-avatar, .pc-jersey{ width:100%; height:auto; display:block; } .pc-numrow{ display:flex; align-items:center; gap:10px; margin:4px 0 8px; } .pc-numrow span{ font-weight:800; color:var(--muted); } .pc-numrow input{ width:66px; text-align:center; font-weight:900; font-size:1.25rem; } .pc-swatches{ display:flex; flex-wrap:wrap; gap:9px; margin:5px 0 8px; } .pc-sw{ width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,.22); cursor:pointer; padding:0; transition:transform .1s, box-shadow .1s; } .pc-sw:active{ transform:scale(.9); } .pc-sw.sel{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), 0 0 12px rgba(245,197,66,.5); transform:scale(1.1); } .pc-look-lab{ font-size:.72rem; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-top:6px; margin-bottom:2px; } .pc-hair.sel, .pc-beard.sel, .pc-build.sel{ border-color:var(--gold); color:var(--gold); background:rgba(245,197,66,.14); } /* mini-maglia nell'intestazione della Carriera Giocatore (persiste l'aspetto scelto) */ .pc-hdr-jersey{ display:inline-block; width:34px; vertical-align:middle; margin:0 4px; } .pc-hdr-jersey svg{ width:100%; height:auto; display:block; } /* 🧑 avatar VIVO nell'intestazione: piccolo tondo, invecchia + cambia espressione col morale, esulta sui gol */ .pc-hdr-av{ display:inline-block; width:38px; height:38px; flex:0 0 auto; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 35%, rgba(245,197,66,.18), rgba(20,20,26,.9)); border:1.5px solid var(--line); box-shadow:0 2px 6px rgba(0,0,0,.4); } .pc-hdr-av .pc-avatar{ width:100%; height:auto; display:block; margin-top:2px; } /* 🎉 ESULTANZA avatar (window.Juice.avatarCelebrate su gol/vittoria/trofeo/level-up) — SITE-WIDE */ .pc-avatar{ transform-origin:50% 100%; } .pc-avatar.pc-cel{ animation:pcCel 1.3s cubic-bezier(.3,1.35,.5,1) both; } @keyframes pcCel{ 0%{ transform:none; filter:none; } 14%{ transform:translateY(-9%) scale(1.09) rotate(-6deg); filter:drop-shadow(0 0 7px rgba(245,197,66,.85)); } 34%{ transform:translateY(-2%) scale(1.05) rotate(5deg); filter:drop-shadow(0 0 5px rgba(245,197,66,.6)); } 54%{ transform:translateY(-6%) scale(1.06) rotate(-3deg); filter:drop-shadow(0 0 6px rgba(245,197,66,.7)); } 74%{ transform:translateY(-1%) scale(1.03) rotate(2deg); filter:drop-shadow(0 0 4px rgba(245,197,66,.45)); } 100%{ transform:none; filter:none; } } @media (prefers-reduced-motion: reduce){ .pc-avatar.pc-cel{ animation:none; } } /* LOBBY online: le MAGLIE di tutti + chi è pronto (✅/⏳) */ .pc-lobby-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:10px; margin:6px 0 14px; } .pc-lobby-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 8px 8px; text-align:center; transition:border-color .15s, box-shadow .15s, opacity .15s; opacity:.72; } .pc-lobby-card.rdy{ opacity:1; border-color:rgba(76,175,80,.55); box-shadow:0 0 0 1px rgba(76,175,80,.25); } .pc-lobby-card.mine{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(245,197,66,.35); } .pc-lobby-card.mine.rdy{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(245,197,66,.45), 0 0 12px rgba(76,175,80,.22); } .pc-lobby-jr{ width:64px; margin:0 auto 4px; } .pc-lobby-jr svg{ width:100%; height:auto; display:block; } .pc-lobby-nm{ font-weight:800; font-size:.86rem; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pc-lobby-nm small{ color:var(--gold); font-weight:700; } .pc-lobby-sub{ font-size:.72rem; color:var(--muted); margin:1px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pc-lobby-badge{ font-size:.74rem; font-weight:800; border-radius:20px; padding:2px 8px; display:inline-block; } .pc-lobby-badge.ok{ background:rgba(76,175,80,.18); color:#7bd17f; } .pc-lobby-badge.wait{ background:rgba(255,255,255,.06); color:var(--muted); } /* 🎯 SFIDE — overlay, card, banner, esito, festeggiamento */ .sf-progress{ text-align:center; color:var(--gold); font-weight:800; margin:2px 0 12px; } .sf-agg-btn{ width:100%; margin:0 0 14px; font-weight:800; } /* 🏅 "Re delle Sfide" — chi ne ha completate di più */ .sf-list{ display:flex; flex-direction:column; gap:12px; } .sf-card{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 10px; text-align:left; } .sf-card.done{ border-color:rgba(76,175,80,.5); box-shadow:0 0 0 1px rgba(76,175,80,.2); } .sf-card.soon{ opacity:.62; } .sf-ic{ font-size:1.55rem; flex:0 0 auto; line-height:1; } .sf-tx{ flex:1 1 0; min-width:0; } .sf-title{ font-weight:900; font-size:.96rem; color:var(--text); } .sf-badge{ font-size:.72rem; font-weight:800; color:#7bd17f; background:rgba(76,175,80,.16); border-radius:20px; padding:1px 8px; margin-left:6px; } .sf-goal{ font-size:.82rem; line-height:1.32; color:var(--text); margin-top:2px; } .sf-mode{ font-size:.74rem; color:var(--gold); font-weight:700; margin-top:5px; } .sf-how{ font-size:.76rem; color:var(--muted); margin-top:3px; } .sf-card .sf-play{ flex:1 1 100%; margin-top:2px; } /* 🏆 CLASSIFICHE GLOBALI PER SFIDA (v192): il tuo record nella card + vista classifica dentro la stessa overlay. Le righe riusano le classi .cb-* / .pl-row del board allenatore → nessuna duplicazione di stile. */ .sf-rec{ font-size:.78rem; color:var(--gold,#e8c86a); font-weight:800; margin-top:4px; } .sf-card .sf-board{ flex:1 1 100%; margin-top:2px; font-size:.82rem; padding:7px; } /* 🗂️ Sfide raggruppate per modo (v256) — scorrevoli e chiare */ .sf-sec{ margin-bottom:12px; } .sf-sec-hd{ display:flex; align-items:center; gap:8px; margin:2px 0 7px; padding-bottom:4px; border-bottom:1px solid var(--line); } .sf-sec-hd .sf-sec-ic{ font-size:1.1rem; } .sf-sec-hd b{ font-size:.95rem; letter-spacing:.02em; } .sf-sec-count{ margin-left:auto; font-size:.74rem; color:var(--muted); font-weight:800; background:rgba(30,30,36,.7); border:1px solid var(--line); border-radius:999px; padding:2px 9px; } .sf-sec .sf-card{ margin-bottom:6px; } /* 🔎 barra filtro-modo dell'hub (Mario: bottoni in alto per vedere le sfide che mancano) */ .sf-filter{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; } .sf-chip{ display:inline-flex; align-items:center; gap:5px; font-size:.78rem; font-weight:800; color:var(--muted); background:rgba(30,30,36,.6); border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer; transition:all .15s; -webkit-tap-highlight-color:transparent; } .sf-chip:hover{ color:var(--text); border-color:rgba(245,197,66,.4); } .sf-chip.on{ color:#0d0d0f; background:var(--gold); border-color:var(--gold); box-shadow:0 2px 10px rgba(245,197,66,.28); } .sf-chip-n{ font-size:.68rem; font-weight:900; opacity:.85; background:rgba(0,0,0,.16); border-radius:999px; padding:0 6px; } .sf-chip.on .sf-chip-n{ background:rgba(0,0,0,.16); color:#0d0d0f; } /* 🏟️ Modalità Squadra — sezione evidenziata (stesso club per tutti, si compete a un record) */ .sf-sec-sub{ font-size:.8rem; color:var(--muted); margin:-2px 0 8px; line-height:1.35; } .sf-sec-squad{ background:linear-gradient(180deg,rgba(245,197,66,.07),rgba(245,197,66,0)); border:1px solid rgba(245,197,66,.28); border-radius:14px; padding:11px 11px 5px; } .sf-sec-squad .sf-sec-hd{ border-bottom-color:rgba(245,197,66,.3); } .sf-sec-squad .sf-sec-hd b{ color:var(--gold); } .sf-xp{ font-size:.68rem; font-weight:900; color:var(--gold); background:rgba(245,197,66,.14); border:1px solid rgba(245,197,66,.4); border-radius:999px; padding:1px 8px; margin-left:8px; vertical-align:middle; white-space:nowrap; } .sf-how summary{ cursor:pointer; color:var(--gold); font-weight:700; list-style:none; outline:none; } .sf-how summary::-webkit-details-marker{ display:none; } .sf-how summary::before{ content:'▸ '; } .sf-how[open] summary::before{ content:'▾ '; } .sf-how > div{ margin-top:4px; } .sf-actions{ flex:1 1 100%; display:flex; gap:8px; margin-top:4px; } .sf-actions .sf-play{ flex:1 1 auto; margin-top:0; } .sf-actions .sf-board{ flex:0 0 auto; margin-top:0; font-size:.82rem; padding:7px 12px; } .sf-back{ align-self:flex-start; font-size:.82rem; padding:6px 10px; } .sf-bd-hd{ display:flex; align-items:center; gap:10px; margin:2px 0 4px; } .sf-bd-hd .sf-ic{ font-size:1.7rem; } .sf-msg{ text-align:center; color:var(--gold); font-size:.85rem; min-height:1.1em; margin-top:6px; } /* banner LIVE nella stagione Draft + esito nella schermata finale */ .sf-banner{ border-radius:10px; padding:7px 12px; font-size:.9rem; font-weight:700; margin-bottom:10px; text-align:center; } .sf-banner.alive{ background:rgba(245,197,66,.14); color:var(--gold); border:1px solid rgba(245,197,66,.35); } .sf-banner.dead{ background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--line); } .sf-result{ border-radius:12px; padding:10px 14px; font-weight:800; margin-top:12px; text-align:center; } .sf-result.ok{ background:rgba(76,175,80,.16); color:#8ee08f; border:1px solid rgba(76,175,80,.45); } .sf-result.ko{ background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--line); } /* festeggiamento a sfida completata */ .sf-cele-panel{ text-align:center; } .sf-cele-ic{ font-size:4rem; line-height:1; margin-bottom:6px; filter:drop-shadow(0 4px 14px rgba(245,197,66,.5)); } .sf-cele-title{ font-weight:900; font-size:1.4rem; color:var(--gold); margin:2px 0 6px; } .sf-cele-goal{ font-size:.9rem; color:var(--text); margin-bottom:14px; } /* ⚡ CARRIERA GIOCATORE VELOCE (playercareerfast.js) */ .pcf-wrap{ max-width:560px; margin:0 auto; padding:14px 14px 30px; } .pcf-wrap h2{ color:var(--gold); text-align:center; margin:6px 0 4px; } .pcf-hint{ color:var(--muted); text-align:center; font-size:.9rem; margin-bottom:12px; } .pcf-lbl{ font-weight:800; font-size:.82rem; color:var(--muted); margin:12px 0 6px; text-transform:uppercase; letter-spacing:.03em; } .pcf-chips{ display:flex; flex-wrap:wrap; gap:7px; } .pcf-nats{ max-height:168px; overflow-y:auto; padding:2px; } .pcf-chip{ background:var(--card2); border:1px solid var(--line); color:var(--text); font-weight:700; font-size:.85rem; padding:8px 11px; border-radius:10px; cursor:pointer; } .pcf-chip.sel{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; } .pcf-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px; } .pcf-you{ display:flex; align-items:center; gap:10px; } .pcf-you img,.pcf-you svg{ width:38px; height:38px; } .pcf-you small{ color:var(--muted); } .pcf-ovr{ text-align:center; } .pcf-ovr span{ display:block; font-size:2rem; font-weight:900; color:var(--gold); line-height:1; } .pcf-ovr small{ color:var(--muted); font-size:.72rem; } .pcf-season{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; } .pcf-syear{ text-align:center; font-weight:900; color:var(--gold); margin-bottom:10px; letter-spacing:.02em; } .pcf-stats,.pcf-fstats{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; } .pcf-st{ text-align:center; min-width:56px; } .pcf-st b{ display:block; font-size:1.5rem; font-weight:900; font-variant-numeric:tabular-nums; } .pcf-st small{ color:var(--muted); font-size:.72rem; } .pcf-honors{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px; } .pcf-hbadge{ background:rgba(245,197,66,.16); border:1px solid var(--gold); color:var(--gold); font-weight:800; font-size:.8rem; padding:4px 9px; border-radius:20px; } .pcf-event{ background:rgba(30,30,36,.55); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:12px 14px; margin-bottom:10px; } .pcf-etitle{ font-weight:900; margin-bottom:4px; } .pcf-event p{ color:var(--text); font-size:.92rem; margin:2px 0 10px; } .pcf-event p img,.pcf-event p svg{ width:20px; height:20px; vertical-align:middle; } .pcf-choices{ display:flex; gap:8px; flex-wrap:wrap; } .pcf-choices .btn{ flex:1 1 auto; } .pcf-career-mini{ text-align:center; color:var(--muted); font-size:.82rem; margin-top:8px; } .pcf-final .pcf-fhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 12px; } /* v236: azioni SUBITO in alto nella card finale (Rigioca/Home) → non serve scrollare la timeline né refreshare l'app */ .pcf-final-actions{ display:flex; gap:10px; margin:0 0 14px; } .pcf-final-actions .btn{ flex:1; margin:0; } .pcf-legend{ background:var(--gold); color:#1a1400; font-weight:900; font-size:.82rem; padding:6px 12px; border-radius:20px; text-align:center; } .pcf-honroll{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0; } .pcf-hon{ text-align:center; min-width:64px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 6px; } .pcf-hon span{ font-size:1.3rem; display:block; } .pcf-hon b{ display:block; font-size:1.2rem; color:var(--gold); } .pcf-hon small{ color:var(--muted); font-size:.68rem; } .pcf-best{ text-align:center; color:var(--text); font-size:.9rem; margin:6px 0 4px; } .pcf-clubs{ display:flex; flex-wrap:wrap; gap:8px; } .pcf-clubchip{ display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--line); border-radius:20px; padding:5px 11px 5px 6px; font-size:.85rem; font-weight:700; } .pcf-clubchip img,.pcf-clubchip svg{ width:22px; height:22px; } /* ===== Carriera Veloce v2 — card + anno-per-anno (stile Copero, mobile-first) ===== */ .pcf-you2{ text-align:center; color:var(--text); font-size:.92rem; margin:-2px 0 4px; } /* card giocatore */ .pcf-card{ display:flex; align-items:stretch; gap:12px; background:linear-gradient(180deg,rgba(40,40,47,.7),rgba(28,28,33,.7)); border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:10px; } .pcf-cardL{ display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(160deg,#f5c542,#c9922a); color:#1a1400; border-radius:12px; padding:8px 12px; min-width:74px; } .pcf-ovrbig{ font-size:2.3rem; font-weight:900; line-height:1; } .pcf-cardL small{ font-weight:900; font-size:.68rem; letter-spacing:1px; opacity:.85; } .pcf-cardR{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; } .pcf-cname{ font-size:1.15rem; font-weight:800; } .pcf-cname small{ color:var(--muted); font-weight:700; } .pcf-cmeta{ display:flex; align-items:center; gap:6px; color:var(--text); font-weight:700; font-size:.9rem; min-width:0; } .pcf-cmeta span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pcf-cmeta small{ color:var(--muted); font-weight:600; } .pcf-cmeta img,.pcf-cmeta svg{ width:22px; height:22px; flex:0 0 auto; } .pcf-cmeta2{ display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:.8rem; } .pcf-cmeta2 b{ color:var(--gold); } /* vetrina trofei */ .pcf-vitrina{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; } .pcf-vitrina.empty{ color:var(--muted); font-size:.82rem; text-align:center; } .pcf-vit{ background:rgba(245,197,66,.14); border:1px solid rgba(245,197,66,.4); border-radius:20px; padding:3px 9px; font-size:.9rem; } .pcf-vit b{ color:var(--gold); font-size:.82rem; margin-left:1px; } /* stagione appena giocata */ .pcf-hero{ background:rgba(30,30,36,.5); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:8px; } .pcf-hero .pcf-stats{ margin-top:8px; } .cu-hi{ color:var(--gold) !important; } .cu-pop{ animation:cupop .34s ease; } @keyframes cupop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.28); } 100%{ transform:scale(1); } } .pcf-ovrbig{ display:inline-block; } .pcf-totrow{ text-align:center; color:var(--muted); font-size:.82rem; margin-bottom:10px; } .pcf-totrow b{ color:var(--text); } /* decisione fine anno */ .pcf-decide{ background:rgba(30,30,36,.6); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:12px; margin-bottom:12px; } .pcf-dtitle{ font-weight:900; margin-bottom:8px; } .pcf-dnote{ color:var(--text); font-size:.86rem; margin-bottom:8px; } .pcf-doffers{ display:flex; flex-direction:column; gap:8px; } .pcf-offer{ display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; background:var(--card2); border:1px solid var(--line); } .pcf-offer .of-l{ display:inline-flex; align-items:center; gap:6px; min-width:0; overflow:hidden; } .pcf-offer .of-l b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pcf-offer img,.pcf-offer svg{ width:20px; height:20px; flex:0 0 auto; } .pcf-offer small{ color:var(--muted); flex:0 0 auto; font-size:.72rem; } .pcf-dhint{ color:var(--muted); font-size:.78rem; margin-top:8px; text-align:center; } /* 🎲 Eventi di carriera (scelte a esiti probabilistici, stile Copero) */ .pcf-event{ border-left-color:var(--ember,#ff6a2b); } .pcf-ev-h{ font-size:1.02rem; font-weight:800; margin:2px 0 4px; } .pcf-ev-d{ color:var(--muted); font-size:.84rem; margin-bottom:12px; } .pcf-evopts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:380px){ .pcf-evopts{ grid-template-columns:1fr; } } .pcf-evopt{ display:flex; flex-direction:column; gap:8px; align-items:stretch; text-align:center; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px 10px; cursor:pointer; color:var(--text); transition:border-color .12s, transform .06s; } .pcf-evopt:hover{ border-color:var(--gold); } .pcf-evopt:active{ transform:scale(.98); } .pcf-evopt-t{ font-weight:900; font-size:.92rem; } .pcf-evopt-chips{ display:flex; flex-direction:column; gap:5px; } .pcf-oc{ display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; padding:4px 9px; font-weight:800; font-size:.78rem; } .pcf-oc b{ font-weight:900; opacity:.85; } .pcf-oc-good{ background:rgba(34,197,94,.16); color:#8fe0a3; border:1px solid #3f7d4e; } .pcf-oc-bad{ background:rgba(239,68,68,.16); color:#ffb0a3; border:1px solid #c0503f; } .pcf-oc-neu{ background:rgba(120,120,130,.14); color:var(--muted); border:1px solid var(--line); } .pcf-ev-outcome{ font-size:1.02rem; font-weight:800; text-align:center; padding:10px 6px; } /* esito scelta: verdetto CHIARO (vinto/perso) + overall che SALE sotto gli occhi (Mario) */ .pcf-evres{ text-align:center; } .pcf-verdict{ font-size:1.12rem; font-weight:900; letter-spacing:.01em; text-align:center; padding:8px 10px; border-radius:12px; margin-bottom:10px; } .pcf-verdict.pcf-vg{ background:rgba(34,197,94,.16); color:#8fe0a3; border:1px solid #3f7d4e; } .pcf-verdict.pcf-vb{ background:rgba(239,68,68,.16); color:#ffb0a3; border:1px solid #c0503f; } .pcf-verdict.pcf-vn{ background:rgba(120,120,130,.14); color:var(--muted); border:1px solid var(--line); } .pcf-ovrmove{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:12px auto 2px; padding:12px; border-radius:14px; background:rgba(0,0,0,.28); border:1px solid var(--line); max-width:280px; } .pcf-ovrmove.up{ border-color:#3f7d4e; box-shadow:0 0 0 1px rgba(34,197,94,.25), 0 6px 20px rgba(34,197,94,.14); } .pcf-ovrmove.down{ border-color:#c0503f; box-shadow:0 0 0 1px rgba(239,68,68,.22); } .pcf-ovrlab{ font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .pcf-ovrnums{ display:flex; align-items:center; gap:12px; } .pcf-ovrfrom{ font-size:1.5rem; font-weight:800; color:var(--muted); opacity:.7; } .pcf-ovrarr{ font-size:1.1rem; } .pcf-ovrmove.up .pcf-ovrarr{ color:var(--green); } .pcf-ovrmove.down .pcf-ovrarr{ color:var(--red); } .pcf-ovrnew{ font-size:2.5rem; font-weight:900; line-height:1; color:var(--gold); } .pcf-ovrbadge{ font-weight:900; font-size:.9rem; border-radius:999px; padding:4px 12px; } .pcf-ovrbadge.up{ background:rgba(34,197,94,.2); color:#8fe0a3; border:1px solid #3f7d4e; } .pcf-ovrbadge.down{ background:rgba(239,68,68,.2); color:#ffb0a3; border:1px solid #c0503f; } .pcf-ovrbadge.neu{ background:rgba(120,120,130,.14); color:var(--muted); border:1px solid var(--line); } /* ═══ 📖 CARRIERA STORIA (El Ídolo) — narrativa a scelte ═══ */ .pcs-wrap{ max-width:560px; margin:0 auto; padding:12px 14px 24px; } .pcs-hd{ text-align:center; font-size:1.3rem; font-weight:900; color:var(--gold); margin:6px 0 14px; } .pcs-hd small{ display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin-top:3px; } .pcs-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; } .pcs-lbl{ display:block; font-size:.82rem; color:var(--muted); font-weight:700; margin:10px 0 6px; } .pcs-inp{ width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:10px; color:var(--text); padding:11px 12px; font-size:1rem; } .pcs-origin{ display:flex; flex-direction:column; gap:8px; } .pcs-ori{ text-align:left; background:rgba(30,30,36,.6); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:10px; color:var(--text); padding:10px 12px; cursor:pointer; transition:transform .06s, border-color .12s; } .pcs-ori:active{ transform:scale(.99); } .pcs-ori.sel{ border-color:var(--gold); border-left-color:var(--gold); background:rgba(245,197,66,.14); } .pcs-ori-t{ font-weight:900; font-size:.98rem; } .pcs-ori-d{ font-size:.82rem; color:var(--muted); margin:3px 0 7px; } .pcs-ori-fx{ display:flex; gap:6px; flex-wrap:wrap; } .pcs-ori-fx span{ font-size:.72rem; font-weight:800; border-radius:999px; padding:2px 8px; } .pcs-ori-fx span.up{ color:#8fe0a3; background:rgba(34,197,94,.14); border:1px solid #3f7d4e; } .pcs-ori-fx span.dn{ color:#e59aa0; background:rgba(220,60,72,.14); border:1px solid #7d3f47; } .pcs-destinies{ display:flex; flex-direction:column; gap:10px; } .pcs-dest{ text-align:left; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:12px 14px; cursor:pointer; color:var(--text); transition:transform .06s, border-color .12s; } .pcs-dest:hover{ border-color:var(--gold); } .pcs-dest:active{ transform:scale(.99); } .pcs-dest-t{ font-weight:900; font-size:1.05rem; } .pcs-dest-d{ font-size:.86rem; color:var(--muted); margin:4px 0 8px; } .pcs-dest-fx{ display:flex; gap:6px; flex-wrap:wrap; } .pcs-dest-fx span{ font-size:.72rem; font-weight:800; color:#8fe0a3; background:rgba(34,197,94,.14); border:1px solid #3f7d4e; border-radius:999px; padding:2px 8px; } /* barre stat + idolatria */ /* v301 — barra CARRIERA Storia: squadra reale + prestito + classifica + statistiche (sopra le stat) */ .pcs-club{ background:linear-gradient(150deg,var(--card2),#141419); border:1px solid var(--line); border-radius:14px; padding:11px 13px; margin-bottom:10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .pcs-club-hd{ display:flex; align-items:center; gap:11px; } .pcs-club-crest{ width:38px; height:38px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); } .pcs-club-ph{ display:flex; align-items:center; justify-content:center; font-size:1.4rem; } .pcs-club-tx{ flex:1; min-width:0; } .pcs-club-n{ font-weight:800; font-size:1.05rem; display:flex; align-items:center; gap:8px; } .pcs-club-n small, .pcs-club-tx small{ color:var(--muted); font-size:.74rem; font-weight:600; } .pcs-loan{ font-size:.58rem; font-weight:900; letter-spacing:.08em; color:#ffd9a0; background:rgba(245,197,66,.14); border:1px solid rgba(245,197,66,.3); border-radius:20px; padding:2px 7px; } .pcs-club-pos{ flex:0 0 auto; text-align:center; } .pcs-club-pos b{ font-size:1.4rem; font-weight:900; color:var(--gold); line-height:1; display:block; } .pcs-club-pos small{ font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } .pcs-club-stats{ display:flex; justify-content:space-between; gap:10px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); font-size:.82rem; color:var(--text); font-weight:700; } .pcs-rolechg{ margin-top:8px; font-size:.8rem; color:#8affc0; text-align:center; } /* v302 — RECAP di fine stagione + offerta cambio ruolo + carriera nell'epilogo */ .pcs-recap{ background:linear-gradient(150deg,var(--card2),#141419); border:1px solid var(--gold); border-radius:16px; padding:16px 15px; box-shadow:0 0 22px rgba(245,197,66,.14); } .pcs-recap-hd{ text-align:center; font-size:1.05rem; margin-bottom:12px; } .pcs-recap-club{ display:flex; align-items:center; gap:11px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line); } .pcs-recap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .pcs-recap-cell{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:11px; padding:9px 11px; } .pcs-recap-cell small{ display:block; font-size:.6rem; letter-spacing:.1em; color:var(--muted); margin-bottom:3px; } .pcs-recap-cell b{ font-size:.92rem; } .pcs-recap-career{ margin-top:11px; text-align:center; font-size:.8rem; color:var(--gold-soft,#ffe08a); } .pcs-roleoffer{ margin-top:13px; padding-top:13px; border-top:1px solid var(--line); } .pcs-roleoffer-q{ font-size:.9rem; margin-bottom:10px; text-align:center; } .pcs-roleoffer-btns{ display:flex; gap:9px; } .pcs-roleoffer-btns .btn{ flex:1; } /* 💼 offerte di mercato (Carriera Storia) */ .pcs-off-intro{ text-align:center; font-size:.86rem; color:var(--muted); margin-bottom:12px; } .pcs-offers{ display:flex; flex-direction:column; gap:9px; } .pcs-offer{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer; background:linear-gradient(150deg,rgba(245,197,66,.09),rgba(255,255,255,.02)); border:1px solid var(--gold); border-radius:13px; padding:10px 12px; color:inherit; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .pcs-offer:hover, .pcs-offer:active{ transform:translateY(-1px); box-shadow:0 4px 16px rgba(245,197,66,.2); background:linear-gradient(150deg,rgba(245,197,66,.16),rgba(255,255,255,.04)); } .pcs-off-crest{ width:40px; height:40px; flex:0 0 auto; object-fit:contain; border-radius:8px; } .pcs-off-tx{ flex:1; min-width:0; } .pcs-off-n{ font-weight:800; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pcs-off-tx small{ display:block; font-size:.72rem; color:var(--muted); margin-top:2px; } .pcs-off-go{ flex:0 0 auto; font-weight:800; font-size:.82rem; color:var(--gold); } .pcs-epi-career{ margin-top:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:11px 13px; } .pcs-epi-career-t{ font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; } .pcs-epi-career-g{ display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; font-size:.84rem; font-weight:700; } .pcs-stats{ display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 13px; margin-bottom:12px; } .pcs-idol{ text-align:center; flex:0 0 auto; } .pcs-idol-n{ font-size:1.7rem; font-weight:900; color:var(--gold); line-height:1; } .pcs-idol small{ font-size:.56rem; letter-spacing:.1em; color:var(--muted); font-weight:800; } .pcs-idol-bar{ height:6px; border-radius:999px; background:rgba(20,20,24,.9); overflow:hidden; margin-top:4px; width:64px; } .pcs-idol-f{ height:100%; background:linear-gradient(90deg,var(--gold-deep,#e0a022),var(--gold)); } .pcs-statgrid{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; } .pcs-stat small{ font-size:.68rem; color:var(--muted); font-weight:700; } .pcs-sb{ height:5px; border-radius:999px; background:rgba(20,20,24,.9); overflow:hidden; margin-top:2px; } .pcs-sf{ height:100%; border-radius:999px; background:linear-gradient(90deg,#3f88a8,#7fd0e0); transition:width .5s; } /* v302 — la STAT che SALE si deve vedere (Mario): nell'esito la barra cresce dal vecchio al nuovo, con glow e "+N" */ .pcs-result-stats{ animation:popin .3s ease; margin-bottom:4px; } .pcs-result-stats .pcs-sf{ transition:width .85s cubic-bezier(.25,.9,.3,1); } .pcs-stat.pcs-rise small{ color:var(--gold); } .pcs-stat.pcs-rise .pcs-sf{ box-shadow:0 0 9px rgba(245,197,66,.6); } .pcs-rise-n{ font-weight:900; font-size:.72rem; } .pcs-rise-n.up{ color:#3ddc84; } .pcs-rise-n.down{ color:#e77; } /* capitolo */ .pcs-chapter{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; } .pcs-age{ font-size:.76rem; color:var(--muted); font-weight:800; } .pcs-title{ font-size:1.3rem; font-weight:900; color:var(--gold); margin:4px 0 8px; } .pcs-body{ font-size:1rem; line-height:1.55; color:var(--text); } .pcs-choices{ display:flex; flex-direction:column; gap:9px; margin-top:16px; } .pcs-choice{ text-align:left; background:var(--card2); border:1px solid var(--line); border-radius:12px; color:var(--text); padding:13px 14px; font-weight:700; font-size:.95rem; cursor:pointer; transition:transform .06s, border-color .12s; } .pcs-choice:hover{ border-color:var(--gold); } .pcs-choice:active{ transform:scale(.99); } .pcs-choice::before{ content:'▸ '; color:var(--gold); font-weight:900; } .pcs-result .pcs-body{ font-style:italic; } /* 🎲 verdetto esito variabile (riuscita/fallimento) */ .pcs-verdict{ display:inline-block; font-weight:900; font-size:.82rem; letter-spacing:.02em; border-radius:999px; padding:4px 12px; margin-bottom:9px; animation:popin .3s ease; } .pcs-verdict.win{ color:#8fe0a3; background:rgba(34,197,94,.16); border:1px solid #3f7d4e; } .pcs-verdict.lose{ color:#ffb0a3; background:rgba(239,68,68,.16); border:1px solid #c0503f; } .pcs-deltas{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; } .pcs-delta{ font-size:.8rem; font-weight:900; border-radius:999px; padding:3px 10px; } .pcs-delta.up{ color:#8fe0a3; background:rgba(34,197,94,.16); border:1px solid #3f7d4e; } .pcs-delta.down{ color:#ffb0a3; background:rgba(239,68,68,.16); border:1px solid #c0503f; } /* 😈👑 barra REPUTAZIONE (villain ↔ idolo) */ .pcs-rep{ margin-top:11px; } .pcs-rep-lab{ display:flex; align-items:center; justify-content:space-between; font-size:.8rem; margin-bottom:5px; } .pcs-rep-lab b{ font-weight:900; letter-spacing:.01em; } .pcs-rep-lab span{ opacity:.65; font-size:.9rem; } .pcs-rep-track{ position:relative; height:8px; border-radius:999px; background:linear-gradient(90deg,rgba(224,82,58,.28),rgba(120,120,130,.18),rgba(79,209,139,.28)); overflow:hidden; } .pcs-rep-mid{ position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:rgba(255,255,255,.35); transform:translateX(-50%); } .pcs-rep-fill{ position:absolute; top:0; bottom:0; border-radius:999px; transition:left .5s ease, width .5s ease; box-shadow:0 0 10px currentColor; } /* 😈👑 ASSE REPUTAZIONE condiviso (window.RepAxis) — Giocatore/Veloce/Allenatore. Stessa estetica della Storia. */ .rep-axis{ margin:10px 0 2px; } .rep-axis-lab{ display:flex; align-items:center; justify-content:space-between; font-size:.8rem; margin-bottom:5px; } .rep-axis-lab b{ font-weight:900; letter-spacing:.01em; } .rep-axis-lab span{ opacity:.65; font-size:.9rem; } .rep-axis-track{ position:relative; height:8px; border-radius:999px; background:linear-gradient(90deg,rgba(224,82,58,.28),rgba(120,120,130,.18),rgba(79,209,139,.28)); overflow:hidden; } .rep-axis-mid{ position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:rgba(255,255,255,.35); transform:translateX(-50%); } .rep-axis-fill{ position:absolute; top:0; bottom:0; border-radius:999px; transition:left .5s ease, width .5s ease; box-shadow:0 0 10px currentColor; } .rep-delta{ font-size:.8rem; font-weight:900; border-radius:999px; padding:3px 10px; display:inline-block; } .rep-delta.up{ color:#8fe0a3; background:rgba(34,197,94,.16); border:1px solid #3f7d4e; } .rep-delta.down{ color:#ffb0a3; background:rgba(239,68,68,.16); border:1px solid #c0503f; } .pcs-story{ margin-top:12px; font-size:.82rem; } .pcs-story summary{ cursor:pointer; color:var(--gold); font-weight:800; } .pcs-story-l{ color:var(--muted); padding:4px 0; border-bottom:1px solid var(--line); } /* 🎬 v268 — scene-card "videogioco" (aura per fase · medaglione-emoji · scelte-card) */ .pcs2-card{ position:relative; border-radius:20px; padding:20px 18px 18px; overflow:hidden; background:linear-gradient(180deg,#15151c 0%,#0e0e13 100%); border:1px solid rgba(205,176,121,.16); box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 44px var(--aura), inset 0 1px 0 rgba(255,255,255,.05); opacity:0; transform:translateY(24px) scale(.975); animation:pcsCardIn .7s cubic-bezier(.2,.9,.2,1) .05s forwards; } .pcs2-fx{ position:absolute; inset:0; z-index:0; pointer-events:none; } /* 🔥 canvas ambient (braci + luce che respira) */ .pcs2-aura{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; background:radial-gradient(120% 80% at 50% -10%, var(--aura) 0%, transparent 60%); } .pcs2-top{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-bottom:14px; } .pcs2-medal svg{ width:72%; height:72%; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); } .pcs2-medal img{ width:80%; height:80%; object-fit:contain; } .pcs2-medal{ position:relative; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:30px; flex:0 0 auto; background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), rgba(0,0,0,.35)); border:1px solid rgba(205,176,121,.4); box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), 0 0 26px var(--aura); opacity:0; transform:scale(.3) rotate(-14deg); animation:pcsStamp .6s cubic-bezier(.2,1.5,.3,1) .38s forwards; } .pcs2-medal::after{ content:''; position:absolute; inset:-5px; border-radius:21px; border:2px solid var(--aura2); opacity:0; animation:pcsRing 1s ease-out .62s forwards; } .pcs2-age{ font-weight:900; font-size:1.5rem; line-height:1; color:#f5efe2; opacity:0; animation:pcsUp .55s ease .5s forwards; } .pcs2-phase{ font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--aura2); font-weight:700; margin-top:3px; opacity:0; animation:pcsUp .55s ease .57s forwards; } .pcs2-title{ position:relative; z-index:1; font-size:1.28rem; font-weight:800; color:#fff; margin:2px 0 8px; line-height:1.15; opacity:0; animation:pcsUp .55s ease .5s forwards; } .pcs2-body{ position:relative; z-index:1; font-size:.95rem; line-height:1.5; color:#c9c3b6; margin-bottom:16px; opacity:0; animation:pcsUp .6s ease .64s forwards; } .pcs2-choices{ position:relative; z-index:1; display:flex; flex-direction:column; gap:9px; } .pcs2-choice{ display:flex; align-items:center; gap:11px; text-align:left; padding:12px 13px; border-radius:13px; cursor:pointer; width:100%; background:linear-gradient(180deg,rgba(38,34,50,.9),rgba(26,23,36,.9)); border:1px solid #332d43; color:#ede7da; font-size:.92rem; font-weight:600; opacity:0; transform:translateX(-12px); transition:transform .16s, border-color .16s, box-shadow .16s; } .pcs2-choice{ animation:pcsSlide .45s ease forwards; } .pcs2-choice:nth-child(1){ animation-delay:.8s; } .pcs2-choice:nth-child(2){ animation-delay:.9s; } .pcs2-choice:nth-child(3){ animation-delay:1s; } .pcs2-choice:nth-child(4){ animation-delay:1.1s; } .pcs2-choice:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.4), 0 0 22px var(--aura); } .pcs2-choice:active{ transform:scale(.99); } .pcs2-lett{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:900; font-size:.85rem; flex:0 0 auto; background:linear-gradient(180deg,#cdb079,#a88a4f); color:#1a1206; box-shadow:0 2px 7px rgba(0,0,0,.35); } @keyframes pcsCardIn{ to{ opacity:1; transform:none; } } @keyframes pcsStamp{ to{ opacity:1; transform:none; } } @keyframes pcsRing{ 0%{ opacity:.85; transform:scale(.65); } 100%{ opacity:0; transform:scale(1.5); } } @keyframes pcsUp{ to{ opacity:1; transform:none; } } @keyframes pcsSlide{ to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .pcs2-card,.pcs2-medal,.pcs2-medal::after,.pcs2-age,.pcs2-phase,.pcs2-title,.pcs2-body,.pcs2-choice{ animation:none!important; opacity:1!important; transform:none!important; } } .ph-youth{ --aura:rgba(74,222,128,.28); --aura2:#7fe0a0; } .ph-rise{ --aura:rgba(96,165,250,.28); --aura2:#8bb8ff; } .ph-peak{ --aura:rgba(245,197,66,.30); --aura2:#f5cf6a; } .ph-veteran{ --aura:rgba(236,120,90,.28); --aura2:#f0a488; } /* epilogo */ .pcs-epi{ background:linear-gradient(160deg,rgba(245,197,66,.08),var(--card)); border:1px solid var(--gold); border-radius:18px; padding:22px 18px; text-align:center; } .pcs-epi-tier{ font-size:1.5rem; font-weight:900; color:var(--gold); } .pcs-epi-name{ font-size:1.1rem; font-weight:800; margin-top:2px; } .pcs-idol-big{ font-size:3rem; font-weight:900; color:var(--gold); line-height:1; margin:10px 0; } .pcs-idol-big small{ display:block; font-size:.6rem; letter-spacing:.14em; color:var(--muted); font-weight:800; } .pcs-epi-d{ font-weight:700; margin-bottom:10px; } .pcs-epi-body{ font-size:.94rem; line-height:1.55; color:var(--text); font-style:italic; } .pcs-epi-stats{ display:flex; gap:8px 14px; flex-wrap:wrap; justify-content:center; margin-top:14px; font-size:.82rem; color:var(--muted); } .pcs-epi-hint{ font-size:.76rem; color:var(--muted); margin-top:12px; } /* 🏆 palmarès Storia (Pallone d'Oro/Mondiali/capocannoniere…) — medaglioni SVG oro, conteggio ×N */ .pcs-palm{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .pcs-palm-h{ font-size:.7rem; letter-spacing:.16em; font-weight:900; color:var(--gold); margin-bottom:10px; } .pcs-palm-grid{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .pcs-palm-i{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:66px; padding:8px 6px; border:1px solid var(--gold); border-radius:12px; background:linear-gradient(160deg,rgba(245,197,66,.10),rgba(245,197,66,.02)); } .pcs-palm-medal{ line-height:0; } .pcs-palm-medal svg{ width:34px; height:34px; display:block; } .pcs-palm-x{ font-size:1.1rem; font-weight:900; color:var(--gold); line-height:1; } .pcs-palm-l{ font-size:.62rem; font-weight:700; color:var(--muted); text-align:center; line-height:1.15; } /* tabella anno per anno */ .pcf-tlwrap{ margin-bottom:6px; } .pcf-tl{ border:1px solid var(--line); border-radius:12px; overflow:hidden; } .pcf-tlrow{ display:grid; grid-template-columns:56px 1fr 30px 26px 22px 22px; align-items:center; gap:4px; padding:7px 9px; border-bottom:1px solid rgba(51,51,60,.5); font-size:.86rem; } .pcf-tlrow:last-child{ border-bottom:0; } .pcf-tlhead{ background:rgba(0,0,0,.25); color:var(--muted); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; } .pcf-tlnew{ background:rgba(245,197,66,.12); animation:pcfrow .6s ease; } @keyframes pcfrow{ from{ background:rgba(245,197,66,.4); } to{ background:rgba(245,197,66,.12); } } .tl-yr{ font-weight:700; color:var(--text); line-height:1.05; } .tl-yr small{ display:block; color:var(--muted); font-weight:600; font-size:.66rem; } .tl-club{ display:flex; align-items:center; gap:5px; min-width:0; } .tl-club img,.tl-club svg{ width:18px; height:18px; flex:0 0 auto; } .tl-cn{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .tl-tro{ display:inline-flex; gap:1px; flex:0 0 auto; } .tl-troi{ font-size:.78rem; } .tl-ovr{ text-align:center; font-weight:900; color:var(--gold); } .tl-n{ text-align:center; font-variant-numeric:tabular-nums; } .tl-g{ color:var(--green); font-weight:700; } /* offerta vivaio: scelta club di partenza */ .pcf-clubchoices{ display:flex; flex-direction:column; gap:10px; margin-top:6px; } .pcf-clubcard{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"lbl lbl crest" "name name crest" "lg lg crest"; align-items:center; gap:2px 10px; background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; text-align:left; cursor:pointer; color:var(--text); } .pcf-clubcard:hover,.pcf-clubcard:active{ border-color:var(--gold); } .pcf-cc-lbl{ grid-area:lbl; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; } .pcf-cc-name{ grid-area:name; font-weight:800; font-size:1.05rem; } .pcf-cc-lg{ grid-area:lg; color:var(--muted); font-size:.8rem; } .pcf-cc-crest{ grid-area:crest; } .pcf-cc-crest img,.pcf-cc-crest svg{ width:46px; height:46px; } /* v240: banner "Guarda le coppe" (rivelazione ri-avviabile a fine stagione) */ .cups-review{ border:1px solid var(--gold); box-shadow:0 0 18px rgba(212,175,55,.25); } /* ══════════════════════════════════════════════════════════════════════════ v295 · L4 FASE 2 — MOTION & PROFONDITÀ, SITE-WIDE Le classi .j-* le mette SOLO juice.js (helper globale): se quel layer non gira, la pagina resta identica a prima. Nessun contenuto è nascosto di default. Ogni animazione ha il suo opt-out in fondo (prefers-reduced-motion). ══════════════════════════════════════════════════════════════════════════ */ /* --- ingresso a cascata dei blocchi quando cambi schermata (profondità) --- */ @keyframes jRise{ from{ opacity:0; transform:translate3d(0,14px,0) scale(.985); } to{ opacity:1; transform:none; } } .j-rise{ animation:jRise .46s cubic-bezier(.22,.9,.26,1) both; will-change:transform,opacity; } /* --- micro-interazioni a molla su ogni elemento cliccabile --- */ /* pressione: affonda leggermente, come un tasto vero */ .j-press{ transform:scale(.955) translateZ(0) !important; filter:brightness(.94); transition:transform .07s ease, filter .07s ease; } /* rilascio: rimbalzo elastico corto */ @keyframes jSpring{ 0%{ transform:scale(.955); } 42%{ transform:scale(1.035); } 70%{ transform:scale(.99); } 100%{ transform:scale(1); } } .j-spring{ animation:jSpring .42s cubic-bezier(.34,1.56,.5,1) both; } /* --- guizzo elastico su un numero appena salito / badge che cambia --- */ @keyframes jPop{ 0%{ transform:scale(1); } 34%{ transform:scale(1.22); } 100%{ transform:scale(1); } } .j-pop{ display:inline-block; animation:jPop .5s cubic-bezier(.3,1.5,.5,1) both; color:var(--gold); text-shadow:0 0 14px rgba(245,197,66,.45); } /* --- PROFONDITÀ: ombre a più strati + vetro sulle superfici condivise di TUTTO il sito --- */ .pcard,.lobby-player,.res-row,.cups-review{ box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 18px rgba(0,0,0,.34), 0 18px 42px rgba(0,0,0,.24); } /* filo di luce in alto sul bottone principale: separa la superficie dallo sfondo senza appesantire */ .btn-primary{ position:relative; overflow:hidden; } .btn-primary::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); opacity:.7; pointer-events:none; } /* i chip guadagnano un velo di vetro: leggeri ma con materia */ .chip{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* --- opt-out completo: chi ha ridotto le animazioni non vede NULLA di tutto questo --- */ @media (prefers-reduced-motion: reduce){ .j-rise,.j-pop,.j-spring{ animation:none !important; opacity:1 !important; transform:none !important; } .j-press{ transform:none !important; filter:none !important; } } /* ══════════════════════════════════════════════════════════════════════════ v296 · L4 FASE 3 — AVATAR VIVO: respira e sbatte le palpebre (idle). SOLO nei contenitori "live" (header dashboard + anteprima creazione): NON sul dot in campo (ha già una sua transform che verrebbe sovrascritta) né sulla card (viene rasterizzata su canvas → l'animazione falserebbe lo snapshot). ══════════════════════════════════════════════════════════════════════════ */ @keyframes pcBreathe2{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.028) translateY(-1px) } } .pc-hdr-av .pc-avatar,.pc-prev-av .pc-avatar{ animation:pcBreathe2 4.2s ease-in-out infinite; } .pc-prev-av .pc-avatar{ animation-duration:4.8s; } /* l'anteprima respira a un ritmo diverso dall'header */ /* l'ESULTANZA ha la priorità sul respiro (specificità più alta + dopo nel file) */ .pc-hdr-av .pc-avatar.pc-cel,.pc-prev-av .pc-avatar.pc-cel{ animation:pcCel 1.3s cubic-bezier(.3,1.35,.5,1) both; } /* palpebre: gli occhi (gruppo .pc-eyes) si chiudono un istante ogni pochi secondi */ @keyframes pcBlink{ 0%,93%,100%{ transform:scaleY(1) } 96.5%{ transform:scaleY(.1) } } .pc-hdr-av .pc-eyes,.pc-prev-av .pc-eyes{ transform-box:fill-box; transform-origin:center; animation:pcBlink 5.4s ease-in-out infinite; } .pc-prev-av .pc-eyes{ animation-delay:1.9s; } /* sfasato rispetto all'header: non sbattono le palpebre all'unisono */ @media (prefers-reduced-motion: reduce){ .pc-hdr-av .pc-avatar,.pc-prev-av .pc-avatar,.pc-hdr-av .pc-eyes,.pc-prev-av .pc-eyes{ animation:none !important; transform:none !important; } } /* 📂 Le mie carriere — barra selezione multipla + eliminazione in blocco (Mario) */ .mycar-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; } .mycar-hint{ font-size:.74rem; color:var(--muted); margin:0 0 10px; padding:7px 9px; background:rgba(245,197,66,.08); border:1px solid var(--line); border-radius:9px; } .mycar-hint b{ color:var(--txt); } .btn-danger{ background:linear-gradient(180deg,#5a1f22,#3a1416); border-color:#7a2a2e; color:#ffd9d0; } .pl-row.mycar-pick{ cursor:pointer; user-select:none; transition:background .12s,border-color .12s; } .pl-row.mycar-pick.on{ background:rgba(230,180,90,.10); border-color:var(--gold); } .pl-row.mycar-pick .mycar-ck{ font-size:1.05rem; } /* 🥇 Pallone d'Oro in Carriera Veloce — enfasi extra (Mario: "farlo notare un po' di più") */ .pcf-vit-bdo{ background:linear-gradient(180deg,rgba(245,197,66,.30),rgba(212,160,30,.16)); border:1px solid var(--gold); box-shadow:0 0 12px rgba(245,197,66,.35); font-weight:800; font-size:.95rem; padding:4px 12px; letter-spacing:.2px; } .pcf-vit-bdo .pcf-vit-crown{ filter:drop-shadow(0 0 4px rgba(245,197,66,.8)); animation:bdoCrown 2.6s ease-in-out infinite; display:inline-block; } .pcf-vit-bdo b{ font-size:.9rem; } @keyframes bdoCrown{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-1px) rotate(-6deg); } } .pcf-tlrow.pcf-tlbdo{ background:linear-gradient(90deg,rgba(245,197,66,.13),rgba(245,197,66,.03)); } .tl-troi-bdo{ filter:drop-shadow(0 0 4px rgba(245,197,66,.85)); font-size:.9rem; } @media (prefers-reduced-motion: reduce){ .pcf-vit-bdo .pcf-vit-crown{ animation:none; } } /* 🗓️ Classifiche settimanali: toggle settimana/sempre + bracket 80> + countdown (Mario) */ .cb-span,.cb-brk{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; flex-shrink:0; } .cb-span-b,.cb-brk-b{ flex:0 0 auto; cursor:pointer; background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:20px; padding:5px 12px; font-size:.8rem; font-weight:700; white-space:nowrap; } .cb-span-b:active,.cb-brk-b:active{ transform:scale(.96); } .cb-span-b.active,.cb-brk-b.active{ background:linear-gradient(180deg,#f5d67a,#cdb079); color:#231700; border-color:#cdb079; box-shadow:0 3px 12px -4px rgba(205,176,121,.6); } .cb-count-wrap{ font-size:.78rem; color:var(--muted); text-align:center; margin:2px 0 10px; flex-shrink:0; } .cb-count-wrap b{ color:var(--gold); font-variant-numeric:tabular-nums; } /* 🎢 Fine anno: verdetto personale promo/retro + risultati bracket playoff (Mario) */ .pr-verdict{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; margin:2px 0 12px; font-weight:800; font-size:1rem; border:1px solid var(--line); } .pr-verdict .pr-ic{ font-size:1.6rem; line-height:1; flex:0 0 auto; } .pr-verdict .pr-txt{ line-height:1.35; } .pr-verdict small{ font-weight:600; opacity:.85; } .pr-verdict.pr-up{ background:linear-gradient(120deg,rgba(46,160,67,.22),rgba(46,160,67,.08)); border-color:#3f9d52; color:#c6f6d5; } .pr-verdict.pr-safe{ background:linear-gradient(120deg,rgba(63,182,214,.20),rgba(63,182,214,.06)); border-color:#3fb6d6; color:#c7effb; } .pr-verdict.pr-down{ background:linear-gradient(120deg,rgba(214,60,60,.22),rgba(214,60,60,.07)); border-color:#c85050; color:#ffd0cc; } .pr-verdict.pr-lose{ background:linear-gradient(120deg,rgba(230,180,90,.18),rgba(230,180,90,.05)); border-color:#c9a24a; color:#ffe9c2; } .po-bracket{ display:flex; flex-direction:column; gap:10px; } .po-round .po-rname{ font-size:.76rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; } .po-tie{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid rgba(51,51,60,.5); font-size:.86rem; } .po-tie:last-child{ border-bottom:0; } .po-tie.mine{ background:rgba(245,197,66,.10); border-radius:8px; } .po-team{ display:flex; align-items:center; gap:6px; min-width:0; } .po-team.po-away{ justify-content:flex-end; text-align:right; } .po-team .club-crest{ flex:0 0 auto; } .po-w{ font-weight:800; color:var(--gold); } .po-s{ font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; } .po-s small{ font-weight:600; color:var(--muted); font-size:.72em; } /* 🧢 Nazionale: scelta dell'undici (tocca uno slot → picker dei convocati) — Mario */ .nat-slot{ cursor:pointer; } .nat-slot.picking .dot{ box-shadow:0 0 0 3px var(--gold),0 2px 8px rgba(0,0,0,.5); } .nat-pick{ display:flex; flex-direction:column; gap:2px; max-height:44vh; overflow-y:auto; margin:6px 0 4px; border:1px solid var(--line); border-radius:12px; padding:6px; background:var(--card); } .nat-pick-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:9px; cursor:pointer; } .nat-pick-row:active{ transform:scale(.99); } .nat-pick-row:nth-child(odd){ background:rgba(255,255,255,.02); } .nat-pick-row.cur{ background:rgba(245,197,66,.14); border:1px solid rgba(245,197,66,.4); } .nat-pick-row .np-nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nat-pick-row .np-nm small{ color:var(--muted); } .nat-pick-row .np-off{ color:#e0883f; } .nat-pick-row .np-ovr{ font-weight:800; color:var(--gold); white-space:nowrap; } .nat-pick-row .np-ovr small{ color:var(--muted); font-weight:600; } /* ═══════════════════════════════════════════════════════════════════════════════════════ v426 — ELEVAZIONE ESTETICA site-wide (UI/UX Pro Max · stile "Modern Dark / Cinema Mobile") ADDITIVO: alza profondità, vetro, luce d'ambiente e tipografia da gioco SENZA ristrutturare nulla (zero sezioni toccate). Mantiene l'identità nero+oro forgia, la rende meno "generica". ═══════════════════════════════════════════════════════════════════════════════════════ */ :root{ --font-display:'Russo One','Chakra Petch',-apple-system,system-ui,sans-serif; --sh-card:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 20px -8px rgba(0,0,0,.6); --glow-gold:0 0 0 1px rgba(245,197,66,.18), 0 10px 34px -12px rgba(245,197,66,.42); --glass:saturate(1.35) blur(16px); } /* Titoli in font da GIOCO — solo sui titoli (metriche flessibili → nessun rischio layout) */ .home-hero h1, h1, h2, .cl-title-big, .car-modal-box h3{ font-family:var(--font-display); font-weight:400; } .home-hero h1, .cl-title-big{ letter-spacing:.005em; text-shadow:0 2px 22px rgba(245,197,66,.16); } /* Ambiente cinematografico dietro TUTTO: doppio bagliore forgia + vignetta morbida */ body{ background: radial-gradient(900px 520px at 50% -130px,#211609 0%,transparent 62%), radial-gradient(680px 680px at 88% 6%,rgba(205,176,121,.055) 0%,transparent 55%), radial-gradient(1300px 1000px at 50% 125%,#0b0b10 0%,var(--bg) 55%); } #app::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(125% 78% at 50% -2%,transparent 58%,rgba(0,0,0,.5) 100%); } /* Superfici da PIATTE a STRATIFICATE: bordo-luce in alto + ombra morbida (solo card/pannelli chiave) */ .mode-tab:not(.active), .draft-online, .rep-card, .stag-box, .man-sec{ background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%); border-color:rgba(255,255,255,.08); box-shadow:var(--sh-card); } /* Overlay/modali: profondità premium via OMBRA (niente backdrop-filter blur → gratis per la GPU, non scalda né consuma batteria su mobile). Stesso senso di "vetro sollevato" senza costo. */ .cl-panel, #car-modal-box{ box-shadow:0 30px 80px -30px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.06) inset; } /* Interazione FISICA: press-scale con easing expo + oro brillante con bagliore */ .btn, .mode-tab, .pill, .cl-btn, .comp-tab, .form-chip{ transition:transform .12s cubic-bezier(.16,1,.3,1), box-shadow .22s, filter .2s, background .2s, border-color .2s; } .btn:active, .mode-tab:active, .pill:active, .cl-btn:active, .comp-tab:active{ transform:scale(.97); } .btn-primary, .mode-tab.active{ background-image:linear-gradient(135deg,#ffdd76 0%,#f0b53a 46%,#e0951a 100%); box-shadow:var(--glow-gold); } .btn-primary:active{ filter:brightness(1.06); } @media (prefers-reduced-motion:reduce){ .btn:active, .mode-tab:active, .pill:active, .cl-btn:active, .comp-tab:active{ transform:none; } } /* v427 — tasto "✨ Auto XI" direttamente SUL campo verde (Mario): schiera i migliori 11 nel modulo scelto */ .pitch{ position:relative; } .pitch-auto{ position:absolute; top:8px; right:8px; z-index:6; background:linear-gradient(135deg,#ffdd76,#e8a020); color:#1a1200; border:0; border-radius:999px; padding:7px 13px; font-weight:800; font-size:.82rem; line-height:1; cursor:pointer; white-space:nowrap; box-shadow:0 4px 14px -3px rgba(245,197,66,.6), 0 1px 0 rgba(255,255,255,.35) inset; transition:transform .12s cubic-bezier(.16,1,.3,1), filter .15s; } .pitch-auto:active{ transform:scale(.93); filter:brightness(1.06); } @media (prefers-reduced-motion:reduce){ .pitch-auto:active{ transform:none; } } .cl-btn-off{ opacity:.72; filter:grayscale(.4); } /* 🏪 INFORGE STORE + skin nome (Mario: spendi il tempo di gioco per cosmetici) */ .nm-skin{ background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:800; } .nm-gold{ background-image:linear-gradient(90deg,#f7d774,#d4af37,#f7d774); } .nm-fire{ background-image:linear-gradient(90deg,#ffcf4d,#ff6a3d,#e0392f); } .nm-ice{ background-image:linear-gradient(90deg,#bfe9ff,#5aa9e6,#2f9be0); } .nm-neon{ background:none; color:#39ff88; -webkit-text-fill-color:#39ff88; text-shadow:0 0 8px rgba(57,255,136,.7); } .nm-purple{ background-image:linear-gradient(90deg,#d5a6ff,#a684e0,#7a4fd0); } .nm-aqua{ background-image:linear-gradient(90deg,#7ef0ff,#39d3e0,#0fa3b1); } .nm-rainbow{ background-image:linear-gradient(90deg,#ff5a7a,#ffd23f,#39ff88,#5aa9e6,#a684e0); } .nm-shadow{ background:none; color:#cfd6e4; -webkit-text-fill-color:#cfd6e4; text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(120,140,200,.55); } .ifg-ov{ position:fixed; inset:0; z-index:220; background:rgba(0,0,0,.74); display:flex; align-items:center; justify-content:center; padding:16px; } .ifg-ov.hidden{ display:none; } .ifg-panel{ background:var(--card,#15161d); border:1px solid var(--line); border-radius:18px; padding:16px; max-width:440px; width:100%; max-height:90vh; overflow:auto; position:relative; box-shadow:0 14px 44px rgba(0,0,0,.55); } .ifg-x{ position:absolute; top:10px; right:10px; background:rgba(255,255,255,.08); border:none; color:var(--fg,#eee); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px; } .ifg-h{ font:800 20px system-ui; color:var(--gold); text-align:center; margin-bottom:6px; } .ifg-bal{ text-align:center; background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.3); border-radius:10px; padding:8px; margin-bottom:10px; } .ifg-bal b{ color:var(--gold); } .ifg-tabs{ display:flex; gap:6px; margin-bottom:10px; } .ifg-tab{ flex:1; background:var(--card2); border:none; color:var(--muted); font-weight:700; font-size:.8rem; padding:9px 6px; border-radius:9px; cursor:pointer; } .ifg-tab.on{ background:var(--gold); color:#1a1200; } .ifg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; margin:8px 0; } .ifg-card{ background:var(--card2); border-radius:10px; padding:10px; display:flex; flex-direction:column; align-items:center; gap:8px; } .ifg-prev{ font-size:1rem; } .ifg-b{ border:none; border-radius:8px; padding:7px 12px; font-weight:700; font-size:.8rem; cursor:pointer; } .ifg-b.buy{ background:var(--gold); color:#1a1200; } .ifg-b.buy.off,.ifg-b[disabled]{ opacity:.4; cursor:not-allowed; } .ifg-b.use{ background:var(--card2); color:var(--fg,#eee); border:1px solid var(--line); } .ifg-tag{ font-size:.78rem; font-weight:700; } .ifg-tag.sel{ color:var(--green); } .ifg-hint{ font-size:.85rem; color:var(--muted); margin:4px 0 8px; text-align:center; } .ifg-namebox{ display:flex; flex-direction:column; gap:8px; } .ifg-namebox input{ background:var(--card2); border:1px solid var(--line); color:var(--fg,#eee); border-radius:9px; padding:10px; font-size:1rem; } .ifg-foot{ font-size:.74rem; color:var(--muted); text-align:center; margin-top:10px; } /* 🌍 ROOM BROWSER (Crea/Entra stanza online) */ .mm-choice { display:flex; flex-direction:column; gap:12px; margin-top:8px; } .mm-big { display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px; font-size:1.05rem; line-height:1.2; } .mm-big small { font-weight:400; opacity:.75; font-size:.78rem; } .mm-list { max-height:min(52vh,420px); overflow-y:auto; margin:6px 0 10px; display:flex; flex-direction:column; gap:8px; } .mm-room { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--text); cursor:pointer; transition:border-color .15s, transform .05s; } .mm-room:hover { border-color:var(--gold); } .mm-room:active { transform:scale(.99); } .mm-room-main { display:flex; flex-direction:column; gap:2px; min-width:0; } .mm-room-main b { font-size:.98rem; } .mm-room-main small { color:var(--muted); font-size:.78rem; } .mm-room-go { color:var(--gold); font-weight:700; font-size:.82rem; white-space:nowrap; } .mm-browse-actions { display:flex; gap:8px; flex-wrap:wrap; } .mm-browse-actions .btn-mini { flex:1; min-width:92px; } /* 💬 CHAT IN-GAME (partite online) */ .car-chat-fab { position:fixed; right:14px; bottom:76px; z-index:900; width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-deep); background:linear-gradient(145deg,#26262d,#16161a); color:var(--gold); font-size:1.35rem; box-shadow:0 6px 18px rgba(0,0,0,.45); cursor:pointer; display:flex; align-items:center; justify-content:center; } .car-chat-fab:active { transform:scale(.94); } .car-chat-badge { position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--red); color:#fff; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); } .car-chat-panel { position:fixed; right:14px; bottom:76px; z-index:901; width:min(340px,calc(100vw - 28px)); max-height:min(64vh,520px); display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 34px rgba(0,0,0,.55); overflow:hidden; } .cc-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-weight:700; color:var(--gold-hi); background:linear-gradient(180deg,#1f1f25,#191920); border-bottom:1px solid var(--line); } .cc-x { background:none; border:none; color:var(--muted); font-size:1.05rem; cursor:pointer; padding:2px 6px; } .cc-body { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:7px; } .cc-empty { color:var(--muted); text-align:center; margin:auto; font-size:.85rem; } .cc-msg { max-width:82%; align-self:flex-start; background:#232329; border:1px solid var(--line); border-radius:12px; padding:6px 10px; } .cc-msg.me { align-self:flex-end; background:rgba(245,197,66,.14); border-color:var(--gold-deep); } .cc-u { display:block; font-size:.7rem; font-weight:700; color:var(--gold); margin-bottom:1px; } .cc-msg.me .cc-u { color:var(--gold-hi); } .cc-t { display:block; font-size:.9rem; color:var(--text); word-break:break-word; } .cc-input-row { display:flex; gap:7px; padding:10px; border-top:1px solid var(--line); background:#17171b; } .cc-input { flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:.9rem; } .cc-input:focus { outline:none; border-color:var(--gold); } .cc-send { width:44px; border-radius:10px; border:none; background:var(--gold); color:#1a1200; font-size:1.05rem; font-weight:700; cursor:pointer; } .cc-send:active { transform:scale(.95); } /* 🛡️ CLAN */ .clan-panel { max-width:520px; } .clan-gate { display:flex; flex-direction:column; gap:12px; margin:8px 0; } .clan-box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; } .clan-box h4 { margin:0 0 2px; font-size:.95rem; color:var(--gold-hi); } .clan-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; } .clan-crest { width:48px; height:48px; border-radius:12px; background:#17171b; border:1px solid var(--gold-deep); display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex:0 0 auto; } .clan-crest svg, .clan-crest img { width:40px; height:40px; } .clan-id { min-width:0; } .clan-nm { font-size:1.15rem; font-weight:800; color:var(--gold-hi); line-height:1.1; } .clan-tag-b { font-size:.8rem; color:var(--gold); font-weight:700; } .clan-meta { font-size:.82rem; color:var(--muted); margin-top:2px; } .clan-tabs { display:flex; gap:8px; margin:10px 0; } .clan-tab { flex:1; } .clan-actions { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:6px; } .clan-actions .btn-mini { flex:1; min-width:96px; } .clan-sec-t { font-size:.8rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 6px; } #clan-body { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* 🔧 (Mario) il corpo del clan SCORRE → il capo (con le richieste di ingresso) arriva alla chat per inviare messaggi */ /* 🔧 (Mario, bug Speedy) le liste dentro il corpo NON hanno un loro scroll: sennò il dito resta "intrappolato" sulla lista membri e il capo non riesce a scendere fino alla chat. Un solo scroll = #clan-body. */ #clan-body .clan-mlist { max-height:none; overflow:visible; } .clan-mlist { display:flex; flex-direction:column; gap:5px; max-height:30vh; overflow-y:auto; } .clan-mrow { display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:10px; background:var(--card); border:1px solid var(--line); } .clan-mrow.me { border-color:var(--gold); background:rgba(245,197,66,.08); } .clan-mrow svg, .clan-mrow img { width:22px; height:22px; flex:0 0 auto; } .clan-rank { min-width:26px; text-align:center; font-weight:700; color:var(--muted); font-size:.85rem; } .clan-mname { flex:1; min-width:0; font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clan-mname small { color:var(--muted); font-weight:400; margin-left:6px; } .clan-mscore { font-weight:800; color:var(--gold-hi); font-size:.92rem; white-space:nowrap; } .clan-mscore small { color:var(--muted); font-weight:400; font-size:.72rem; } .clan-chat { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#17171b; } .clan-chat .cc-body { max-height:30vh; min-height:90px; padding:10px; } .clan-join-b { display:block; margin-top:5px; padding:6px 10px; border-radius:9px; border:1px solid var(--gold-deep); background:rgba(245,197,66,.16); color:var(--gold-hi); font-weight:700; font-size:.8rem; cursor:pointer; } .clan-join-b:active { transform:scale(.97); } .clan-invite-pick { padding:4px 0; } /* ═══ v544 HOME COMPATTA (Mario "modalità più intuitive, dinamiche, senza scorrere") ═══ Hero più basso + ruoli come SEGMENTED CONTROL + modalità a griglia + il pannello-gioco si apre come MODALE centrata (zero scroll della home). */ .home-hero { padding:22px 0 12px; } .home-logo { width:min(112px,30vw); margin:0 auto 2px; } .tagline { display:none; } .hero-btns { gap:7px; } .hero-btns .cl-btn { margin:0; padding:8px 12px; font-size:.82rem; } #home-profile-wrap { margin-top:6px; } .mode-groups { margin-top:12px; } /* segmented control ruolo */ .role-seg { display:flex; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:5px; margin-bottom:10px; } .role-seg-b { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 8px; border:none; border-radius:10px; background:transparent; color:var(--muted); font-weight:800; font-size:1.02rem; cursor:pointer; transition:all .18s; } .role-seg-b .rs-ic { font-size:1.15rem; } .role-seg-b.active { background:linear-gradient(135deg,#ffe08a,var(--gold) 45%,var(--gold-deep)); color:#1a1200; box-shadow:0 6px 18px -8px rgba(245,170,40,.7); } /* modalità: griglia compatta (2 colonne) — sempre visibili per il ruolo scelto, niente step "apri gruppo" */ .mode-switch.submodes { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:0; } .mode-switch.submodes.hidden { display:none; } .mode-switch.submodes .mode-tab { flex-direction:column; align-items:flex-start; gap:7px; padding:13px 13px; min-height:104px; } .mode-switch.submodes .mode-tab .mt-ic { width:40px; height:40px; } .mode-switch.submodes .mode-tab .mt-tx b { font-size:1.02rem; } .mode-switch.submodes .mode-tab .mt-tx small { font-size:.7rem; } .mode-switch.submodes .mode-tab .mt-badge { position:absolute; top:10px; right:10px; margin:0; padding:3px 8px; font-size:.56rem; } .mode-switch.submodes .mode-tab { position:relative; } /* la 3ª modalità (Storia) occupa tutta la riga sotto */ .mode-switch.submodes[data-group="giocatore"] .mode-tab[data-mode="story"] { grid-column:1 / -1; flex-direction:row; align-items:center; min-height:auto; } /* PANNELLO-GIOCO come MODALE centrata (si apre toccando una modalità) → nessuno scroll della home */ .home-buttons { display:none; } #screen-home.play-open::before { content:""; position:fixed; inset:0; background:rgba(6,6,10,.62); backdrop-filter:blur(2px); z-index:80; animation:fadeIn .18s ease; } #screen-home.play-open .home-buttons { display:flex; position:fixed; z-index:81; left:50%; top:50%; transform:translate(-50%,-50%); width:min(440px,93vw); max-height:86vh; overflow-y:auto; margin:0; padding:16px 16px 18px; background:linear-gradient(180deg,#1b1b21,#141419); border:1px solid var(--gold-deep); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.66); animation:playPop .22s cubic-bezier(.2,.9,.28,1) both; } @keyframes playPop { from { opacity:0; transform:translate(-50%,-46%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } } .play-modal-head { display:none; align-items:center; justify-content:space-between; margin:-2px 0 4px; } #screen-home.play-open .play-modal-head { display:flex; } .play-title { font-weight:800; font-size:1.12rem; color:var(--gold-hi); } .play-close { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:1rem; cursor:pointer; flex:0 0 auto; } .play-close:active { transform:scale(.92); } /* 🎬 INTRO video (prima apertura) */ .intro-overlay { position:fixed; inset:0; z-index:2000; background:#000; display:flex; align-items:center; justify-content:center; } .intro-overlay.hidden { display:none; } .intro-video { width:100%; height:100%; object-fit:cover; background:#000; } .intro-skip { position:fixed; top:calc(env(safe-area-inset-top,0px) + 14px); right:16px; z-index:2001; padding:9px 16px; border-radius:22px; border:1px solid rgba(255,255,255,.28); background:rgba(10,10,14,.55); color:#f4efe4; font:700 .9rem/1 system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(4px); } .intro-skip:active { transform:scale(.95); } .intro-start { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom,0px) + 34px); z-index:2001; padding:16px 30px; font-size:1.05rem; box-shadow:0 14px 40px -10px rgba(245,197,66,.6); animation:introPulse 1.6s ease-in-out infinite; } .intro-start.hidden { display:none; } @keyframes introPulse { 0%,100%{ transform:translateX(-50%) scale(1);} 50%{ transform:translateX(-50%) scale(1.045);} } /* 🛡️ CLAN v546 — WhatsApp invite · richieste · righe classifica toccabili */ .clan-wa-b { background:#25d366; color:#062b14; border:none; font-weight:800; } .clan-wa-b:active { transform:scale(.96); } .clan-reqrow { display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:10px; background:rgba(245,197,66,.06); border:1px solid var(--gold-deep); } .clan-reqrow svg, .clan-reqrow img { width:22px; height:22px; flex:0 0 auto; } .clan-reqbtns { margin-left:auto; display:flex; gap:6px; flex:0 0 auto; } .clan-reqbtns .btn-mini { padding:6px 10px; font-size:.76rem; } .clan-ok { background:var(--green); color:#04210f; border:none; font-weight:800; } .clan-rankrow { cursor:pointer; width:100%; text-align:left; transition:border-color .15s; } .clan-rankrow:hover { border-color:var(--gold); } .clan-rankrow:active { transform:scale(.99); } .clan-rankgo { color:var(--muted); font-size:1.2rem; font-weight:800; margin-left:2px; flex:0 0 auto; } .clan-info-note { text-align:center; padding:12px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--gold-hi); font-weight:700; font-size:.92rem; } /* ⚽ PARTITA ARCADE (modalità a parte, real-time) */ .arcade-ov { position:fixed; inset:0; z-index:1500; background:#08080b; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; } /* 📱 (Mario) partita SEMPRE orizzontale: se il telefono è in verticale, ruoto tutto l'overlay di 90° (l'utente gira il telefono per vederlo dritto, ma parte comunque) */ .arcade-ov.arc-rot { inset:auto; top:0; left:100%; width:100vh; height:100vw; transform-origin:0 0; transform:rotate(90deg); } #arcade-cv { position:absolute; inset:0; width:100%; height:100%; display:block; } .arc-x { position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:14px; z-index:1502; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(10,10,14,.6); color:#f4efe4; font-size:1.1rem; cursor:pointer; } .arc-joy { position:absolute; left:26px; bottom:calc(env(safe-area-inset-bottom,0px) + 40px); width:132px; height:132px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:2px solid rgba(255,255,255,.14); z-index:1501; touch-action:none; } .arc-knob { position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:radial-gradient(circle at 40% 34%, #ffe08a, #e0a022); box-shadow:0 6px 16px rgba(0,0,0,.5); pointer-events:none; } .arc-btns { position:absolute; right:20px; bottom:calc(env(safe-area-inset-bottom,0px) + 34px); z-index:1501; display:flex; flex-direction:column; gap:14px; align-items:flex-end; } .arc-row { display:flex; gap:14px; align-items:center; } /* ⚡ barra FORZA TIRO: appare mentre tieni premuto TIRA */ .arc-power { width:120px; height:12px; margin-right:6px; border-radius:8px; background:rgba(0,0,0,.45); border:1.5px solid rgba(255,255,255,.28); overflow:hidden; opacity:0; transition:opacity .12s; } .arc-power.on { opacity:1; } .arc-power i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#7de88f,#f5c542 55%,#e5372a); transition:width .04s linear; } .arc-b { width:86px; height:86px; border-radius:50%; border:none; font:800 1rem/1 Russo One, system-ui, sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.5); touch-action:none; -webkit-user-select:none; user-select:none; } .arc-b:active { transform:scale(.92); } .arc-shoot { width:96px; height:96px; font-size:1.08rem; background:radial-gradient(circle at 40% 34%, #ff8a7a, #e5372a 60%, #b71f16); align-self:flex-end; margin-right:6px; } .arc-sprint { width:74px; height:74px; font-size:.86rem; background:radial-gradient(circle at 40% 34%, #7de88f, #2fbf4e 60%, #1c8f38); } .arc-pass { width:82px; height:82px; font-size:.94rem; background:radial-gradient(circle at 40% 34%, #7fd6f5, #2f9fe0 58%, #1c74b0); } /* ⚽ Arcade — landscape side-view: gate rotazione + controlli che coprono gli angoli */ /* 🔄 solo un SUGGERIMENTO non bloccante in alto (il gioco gira lo stesso, anche in verticale) */ .arc-rotate { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:1510; display:none; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(10,15,10,.82); color:#f4efe4; font:800 .82rem/1.2 Russo One, system-ui, sans-serif; text-align:center; letter-spacing:.4px; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.5); } .arc-rotate.show { display:flex; } .arc-rot-i { font-size:1.3rem; animation:arcRot 1.8s ease-in-out infinite; } @keyframes arcRot { 0%,55%{transform:rotate(0)} 80%,100%{transform:rotate(90deg)} } .arc-joy { left:22px; bottom:22px; width:118px; height:118px; } .arc-btns { right:18px; bottom:20px; gap:10px; } .arc-shoot { width:82px; height:82px; font-size:1rem; } .arc-sprint { width:64px; height:64px; font-size:.78rem; } .arc-pass { width:72px; height:72px; font-size:.86rem; } /* ⚽ Arcade — tasti contestuali in DIFESA (RUBA / CAMBIA) */ .arc-shoot.arc-def { background:radial-gradient(circle at 40% 34%, #ffd08a, #ef7a1a 60%, #c85a08); } .arc-pass.arc-switch { background:radial-gradient(circle at 40% 34%, #cfd6dd, #8b97a3 58%, #626c77); color:#1a1a1a; } /* ⚽ Arcade 3D — HUD/messaggi/caricamento in DOM (il canvas è WebGL) */ .arc-hud { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:1502; display:flex; align-items:center; gap:12px; padding:6px 16px; border-radius:12px; background:rgba(8,10,16,.55); backdrop-filter:blur(4px); font:700 13px system-ui,sans-serif; color:#f4efe4; pointer-events:none; } .arc-hud b { font:800 22px Russo One, system-ui, sans-serif; letter-spacing:1px; } .arc-hud .arc-tu { color:#f0b429; } .arc-hud .arc-cpu { color:#5a9bff; } .arc-hud i { font-style:normal; opacity:.8; min-width:38px; text-align:center; } .arc-msg { position:absolute; inset:0; z-index:1503; display:none; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; } .arc-msg.show { display:flex; } .arc-msg.over { background:rgba(8,11,16,.72); } .arc-msg .arc-big { font:800 42px Russo One, system-ui, sans-serif; color:#f0b429; text-shadow:0 3px 14px rgba(0,0,0,.6); } .arc-msg .arc-big.arc-count { font-size:96px; color:#ffffff; text-shadow:0 4px 20px rgba(0,0,0,.7); } .arc-msg .arc-sub { margin-top:10px; font:700 18px system-ui,sans-serif; color:#f4efe4; } .arc-load { position:absolute; inset:0; z-index:1504; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:#0b1220; color:#f4efe4; font:700 17px system-ui,sans-serif; } .arc-spin { width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,255,255,.15); border-top-color:#f0b429; animation:arcSpin .9s linear infinite; } @keyframes arcSpin { to { transform:rotate(360deg); } } /* ⚽ Arcade — menu iniziale (vs CPU / 1v1 online) */ .arc-menu { position:absolute; inset:0; z-index:1506; display:flex; flex-direction:column; align-items:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 0 28px; background:radial-gradient(circle at 50% 30%, #16233f, #0b1220 70%); } .arc-menu-p { margin:auto 0; width:min(340px,88%); display:flex; flex-direction:column; gap:10px; text-align:center; } .arc-menu-t { font:800 26px Russo One, system-ui, sans-serif; color:#f0b429; letter-spacing:2px; margin-bottom:2px; } .arc-menu-b { padding:12px; border:none; border-radius:14px; font:800 1rem Russo One, system-ui, sans-serif; color:#0e1116; background:linear-gradient(180deg,#ffd873,#f0b429); cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.4); } .arc-menu-b:active { transform:scale(.97); } .arc-menu-b.sm { flex:0 0 auto; padding:12px 18px; background:linear-gradient(180deg,#7fd6f5,#2f9fe0); color:#08121a; } .arc-menu-lab { font:700 13px system-ui,sans-serif; color:#c8d0de; margin:2px 0 -2px; } .arc-diff-row { display:flex; gap:8px; } .arc-diff-row .arc-menu-b.sm { flex:1 1 0; padding:12px 6px; font-size:.92rem; background:linear-gradient(180deg,#cfd6e2,#9aa6ba); color:#0e1116; } .arc-diff-row .arc-menu-b.sm.hot { background:linear-gradient(180deg,#ff9d5c,#ef5f2b); color:#1a0d06; } .arc-join { display:flex; gap:8px; } .arc-join input { flex:1; min-width:0; padding:12px; border-radius:12px; border:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; font:800 1rem Russo One, system-ui, sans-serif; text-align:center; text-transform:uppercase; letter-spacing:3px; } .arc-menu-note { font:600 13px system-ui,sans-serif; color:#aeb6c6; line-height:1.5; margin-top:4px; } .arc-menu-note .arc-code { font:800 22px Russo One, system-ui, sans-serif; color:#4ad66d; letter-spacing:3px; } .arc-wait-lbl { font:600 14px system-ui,sans-serif; color:#c8d0de; margin-top:4px; } .arc-wait-code { font:800 46px Russo One, system-ui, sans-serif; color:#4ad66d; letter-spacing:8px; background:rgba(74,214,109,.10); border:2px solid rgba(74,214,109,.5); border-radius:14px; padding:12px 6px; margin:6px 0; } .arc-wait-sub { display:flex; align-items:center; justify-content:center; gap:8px; font:700 14px system-ui,sans-serif; color:#aeb6c6; } .arc-spin.sm { width:22px; height:22px; border-width:3px; margin:8px auto 0; } /* 🏆 Clan — nota "cosa sono i punti" */ .clan-pts-note { font-size:12px; line-height:1.5; background:rgba(240,180,66,.08); border:1px solid rgba(240,180,66,.22); border-radius:10px; padding:8px 12px; margin:8px 0 4px; } /* ⚔️ Clan — toggle Guerra/Totale + nota */ .clan-rankmode { display:flex; gap:8px; margin-bottom:10px; } .clan-rankmode .pill { flex:1; text-align:center; } .clan-warnote { font-size:12px; line-height:1.5; background:rgba(229,55,42,.10); border:1px solid rgba(229,55,42,.28); border-radius:10px; padding:7px 11px; margin:0 0 10px; } /* ⚔️ (Mario) bottone "Gioca la Guerra Clan" ben leggibile: altezza comoda, testo mai tagliato (btn-primary ha overflow:hidden), va a capo se serve */ .clan-war-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:6px; margin:6px 0 4px; padding:14px 16px; font-size:1rem; line-height:1.25; white-space:normal; min-height:52px; border-radius:12px; text-align:center; } /* ⏳ CAP 15 ANNI (Mario): avviso "punti congelati" nella Stagione */ .cap15-note { font-size:12.5px; line-height:1.5; background:rgba(212,175,55,.10); border:1px solid rgba(212,175,55,.42); border-radius:12px; padding:10px 13px; margin:0 0 12px; color:#f3e6bf; } .cap15-note b { color:var(--gold); } .cap15-heads { background:rgba(90,160,255,.10); border-color:rgba(90,160,255,.40); color:#d8e6ff; } .cap15-heads b { color:#9dc3ff; }