:root{ --bg:#0f1320; --side:#171c2e; --side2:#1f2740; --card:#ffffff; --ink:#1c2230; --muted:#6b7280; --line:#e6e9f0; --accent:#5b6cff; --accent2:#3f4ce0; --rosso:#e3350d; --soft:#f3f5fb; } *{box-sizing:border-box} body{margin:0;display:flex;min-height:100vh;font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;background:var(--soft);color:var(--ink)} /* SIDEBAR */ .side{width:230px;flex:none;background:var(--side);color:#cfd6ea;display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px} .brand .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#5b6cff,#9b5bff);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;letter-spacing:.5px} /* logo = immagine (il drago AnimeX) invece del testo "AX": copre il riquadro, niente gradiente */ .brand img.logo{object-fit:cover;background:none;padding:0} .brand b{font-size:17px;color:#fff;display:block;line-height:1.1} .brand small{font-size:11px;color:#8b93b3} nav{flex:1;padding:6px 10px;overflow:auto} .navitem{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:9px;cursor:pointer;color:#c2c9e2;font-size:14px;font-weight:600;margin-bottom:2px} .navitem:hover{background:var(--side2);color:#fff} .navitem.on{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff} .navitem .cnt{font-size:11px;background:rgba(255,255,255,.16);padding:1px 7px;border-radius:9px;font-weight:700} .nav-sep{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#646c8c;padding:12px 14px 4px} .side-foot{padding:12px 16px;font-size:11px;color:#7b83a3;border-top:1px solid #232b45} /* MAIN */ .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:8} .topbar h1{margin:0;font-size:21px} .top-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .view{padding:22px 24px} /* BOTTONI */ .btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 15px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer} .btn:hover{border-color:#c7ccda} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent2)} .btn.red{background:#fff;color:#d12;border-color:#f1c4c0} .btn.sm{padding:6px 10px;font-size:12px;border-radius:8px} .search{padding:9px 13px;border:1px solid var(--line);border-radius:10px;font-size:14px;min-width:220px;outline:none} .search:focus{border-color:var(--accent)} .hint{color:var(--muted);font-size:13px} .badge-proc{background:#fff7e6;color:#9a6b00;border:1px solid #ffe2a8;padding:6px 11px;border-radius:9px;font-size:12px;font-weight:700} /* GRID ANIMEI */ .grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(165px,1fr))} .ccard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s;position:relative} .ccard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,30,60,.13)} .ccard .num{position:absolute;top:7px;left:9px;background:rgba(15,19,32,.62);color:#fff;font-weight:800;font-size:11px;padding:2px 8px;border-radius:9px;z-index:2} .ccard .thumb{height:148px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,#fbfcff,#eef1f8);padding:8px} .ccard .thumb img{max-width:100%;max-height:100%;object-fit:contain} .ccard .thumb.empty{color:#aab;font-size:12px;text-align:center} .ccard .b{padding:9px 11px 11px} .ccard .nm{font-weight:800;font-size:15px;margin:0 0 6px} .tbadge{display:inline-block;color:#fff;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:10px;margin-right:4px} .stars{color:#f5b50a;font-size:13px;letter-spacing:1px;margin-top:5px} /* riga stelle + RUOLO sulla card: si vede a colpo d'occhio come combatte */ .ccard .crow{display:flex;align-items:center;gap:8px;margin-top:5px} .ccard .crow .stars{margin-top:0;flex:none} .ruo-chip{display:inline-flex;align-items:center;gap:5px;margin-left:auto; font-size:10.5px;font-weight:800;letter-spacing:.2px;padding:2px 8px;border-radius:10px; color:var(--rc,#868E96);background:color-mix(in srgb,var(--rc,#868E96) 12%,#fff); border:1px solid color-mix(in srgb,var(--rc,#868E96) 30%,#fff);white-space:nowrap} .ruo-chip i{width:7px;height:7px;border-radius:50%;flex:none; border:1.5px solid var(--rc,#868E96);background:transparent} .ruo-chip.fisso i{background:var(--rc,#868E96)} /* pieno = ruolo scelto a mano */ /* TABELLE LIBRERIA */ .tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .tbl th{background:var(--soft);text-align:left;font-size:12px;color:#67708a;padding:10px 12px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.3px} .tbl td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top} .tbl tr:last-child td{border-bottom:none} .tbl tr.row:hover{background:#fafbff;cursor:pointer} .tbl .clip{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4b5365} /* FORM */ .field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .field label{font-size:13px;font-weight:700;color:#4b5365} .field input,.field select,.field textarea{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;font-family:inherit;outline:none} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)} .field textarea{resize:vertical;min-height:64px} .frow{display:flex;gap:10px}.frow .field{flex:1} /* MODAL */ .modal{position:fixed;inset:0;background:rgba(12,16,28,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50} .modal[hidden]{display:none} /* scheda larga: su schermi grandi usa lo spazio, senza diventare illeggibile */ .modal-card{background:#fff;border-radius:16px;width:100%;max-width:1500px;max-height:94vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.4);font-size:15px} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line)} .modal-head h2{margin:0;font-size:22px} .x{border:none;background:#eef1f6;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1} .modal-body{padding:18px 20px;overflow:auto} .modal-foot{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)} .modal-foot .sp{flex:1} /* RAMI */ .rami-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .rcard{border:1px solid var(--line);border-left-width:5px;border-radius:0 12px 12px 0;background:#fff;padding:14px;cursor:pointer} .rcard h3{margin:0 0 3px;font-size:16px} .rcard p{margin:0;font-size:12.5px;color:var(--muted)} .rcard .meta{margin-top:9px;font-size:11px;color:#8b93a8} .node{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff} .node .lv{font-size:11px;font-weight:800;color:#fff;border-radius:8px;padding:3px 8px;flex:none} .node .cat{font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:800;padding:2px 7px;border-radius:7px;flex:none} .node .nm{font-weight:700;font-size:13.5px} .node .ef{font-size:12px;color:var(--muted)} .cat-statistica{background:#eef0ff;color:#3a44b8} .cat-abilita{background:#fff0e6;color:#b5611c} .cat-passiva{background:#e9f7ee;color:#1f8a4c} .cat-natura{background:#fdeaf3;color:#a8336a} .cat-evoluzione{background:#fde9e7;color:#c0341c} /* LIVELLI */ .lv-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px;margin-top:16px} .lv-cell{border:1px solid var(--line);border-radius:10px;padding:8px 9px;background:#fff;text-align:center} .lv-cell .l{font-size:11px;color:var(--muted);font-weight:700} .lv-cell .s{font-size:13px;font-weight:800;margin-top:3px} .lv-cell.ab{background:#fff7e6;border-color:#ffe2a8} .lv-cell.ab .s{color:#9a6b00} .lv-cell.scelta{border-color:#5b6cff;box-shadow:0 0 0 2px rgba(91,108,255,.18)} .lv-cell.scelta .s{color:#3f4ce0;font-weight:800} /* SOPRA A TUTTO. Stava a z-index 80, cioè sotto agli editor a schermo intero (mappe, eventi, uscite: 99998 in su): là dentro nessun avviso si è mai visto — salvavi e non ti diceva niente, sembrava che non funzionasse. */ .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#1c2230;color:#fff;padding:11px 18px;border-radius:11px;font-size:14px;font-weight:600;z-index:100500;box-shadow:0 10px 30px rgba(0,0,0,.45)} .toast[hidden]{display:none} .empty-state{text-align:center;color:var(--muted);padding:50px 20px} /* ALBERO PROGRESSIONE */ .tree-canvas{background:radial-gradient(circle at 50% -10%,#222a4d,#0f1320);border:1px solid #232b45;border-radius:14px;overflow:auto;padding:10px} .tree-svg{position:absolute;left:0;top:0;pointer-events:none;z-index:1} .tnode{position:absolute;z-index:2;width:212px;background:#1b2138;border:1.5px solid #3a4366;border-radius:12px;padding:9px 11px;display:flex;gap:9px;align-items:center;cursor:pointer;color:#e7ebf6;box-shadow:0 5px 16px rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s;box-sizing:border-box} .tnode:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(0,0,0,.5)} .tnode-base{background:#222a4d;border-color:#5b6cff} .tnode-base img{width:54px;height:54px;object-fit:contain;flex:none} .tb-nm{font-weight:800;font-size:16px} .tb-sub{font-size:11px;color:#8b93b3;margin-top:4px} .tnode-evo{background:#2a1d28;border-width:2px;box-shadow:0 0 0 3px rgba(232,72,43,.13),0 6px 18px rgba(0,0,0,.45)} .tnode-cat{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex:none} .tnode-main{min-width:0} .tnode-lv{font-size:10px;color:#9aa3c8;font-weight:700;text-transform:uppercase;letter-spacing:.3px} .tnode-nm{font-size:13px;font-weight:700;line-height:1.2} .tcolhead{position:absolute;z-index:2;width:212px;text-align:center;font-weight:800;font-size:14px;padding:8px 0;border-radius:10px;border:1.5px solid;background:#171c2e;box-sizing:border-box} .tnode-empty,.tnode-add{justify-content:center;color:#9aa3c8;font-weight:700;font-size:13px;border-style:dashed;background:#161b2e} .tnode-add{height:46px} .tnode .tbadge{font-size:9.5px;padding:1px 7px} /* ALBERO A GRAFO (talent tree) */ .graph-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .graph-hint{margin-left:6px;color:var(--muted);font-size:12.5px} .graph-viewport{position:relative;height:70vh;min-height:440px;overflow:hidden;border:1px solid #232b45;border-radius:14px;background:radial-gradient(circle at 50% -25%,#232b4f,#0d1018);cursor:grab} .graph-viewport.connecting{cursor:crosshair} .graph-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform} .graph-edges{position:absolute;left:0;top:0;overflow:visible} .gedge{cursor:pointer;pointer-events:stroke;transition:stroke-width .1s} .gedge:hover{stroke-width:4.5} .gnode{position:absolute;width:220px;height:64px;background:#1b2138;border:1.6px solid #3a4366;border-radius:12px;padding:0 11px;display:flex;gap:9px;align-items:center;cursor:grab;color:#e7ebf6;box-shadow:0 5px 16px rgba(0,0,0,.4);user-select:none} .gnode:hover{box-shadow:0 9px 26px rgba(0,0,0,.55)} .gnode.armed{outline:2px solid #9db0ff;outline-offset:2px} .gnode-evo{background:#2a1d28} .gnode-cat{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex:none} .gnode-main{min-width:0} .gnode-nm{font-size:13.5px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .gnode-cost{font-size:11px;color:#9aa3c8;font-weight:700;margin-top:2px} /* ---- pannello statistiche (scheda creatura) ---- */ .stat-panel{margin-top:16px;border-top:1px solid var(--line);padding-top:14px} .st-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap} .st-head h3{margin:0 0 4px;font-size:15px} .st-tag{font-size:11px;font-weight:700;color:#3f4ce0;background:#eef0ff;border:1px solid #d7dbff;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle} .st-meta{font-size:12.5px;color:var(--muted)} .st-meta b{color:var(--ink)} .st-lvl{display:flex;flex-direction:column;gap:4px;min-width:230px} .st-lvl label{font-size:12px;font-weight:700;color:#4b5365} .st-lvl input[type=range]{accent-color:var(--accent);width:100%} .st-pool{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 10px;font-size:13px;color:var(--muted)} .st-pool b{color:var(--ink)} .st-pool .sp{flex:1} .st-rows{display:flex;flex-direction:column;gap:7px} .st-row{display:grid;grid-template-columns:1.05fr 74px 62px 1.25fr 76px;gap:9px;align-items:center} .st-row3{display:grid;grid-template-columns:1.1fr 74px 1.25fr 78px;gap:10px;align-items:center} .st-bstbox{display:flex;flex-direction:column;gap:2px;min-width:210px} .st-bstbox>label{font-size:12px;font-weight:700;color:#4b5365} .st-bstbox input{width:120px;padding:6px 8px;border:1px solid #cdd3ff;background:#fbfcff;border-radius:8px;font-size:15px;font-weight:800;font-family:inherit;outline:none} /* menu Allenamento (in gioco, tema scuro) */ .tr-rows{display:flex;flex-direction:column;gap:7px} .tr-row{display:grid;grid-template-columns:1.3fr auto 1fr;gap:12px;align-items:center;background:#0f1526;border:1px solid #2b3450;border-radius:10px;padding:8px 11px} .tr-name{font-size:13px;color:#e7ebf6} .tr-ctl{display:flex;align-items:center;gap:8px} .tr-b{width:28px;height:28px;border-radius:8px;border:1px solid #3a4468;background:#1b2138;color:#e7ebf6;font-size:16px;font-weight:800;cursor:pointer;line-height:1} .tr-b:hover{background:#242c48} .tr-v{min-width:22px;text-align:center;font-size:16px;color:#fff} .tr-proj{font-size:12px;color:#9fb0d0;text-align:right} .st-name{font-size:13px} .st-name .st-sub{display:block;font-size:11px;color:var(--muted)} .st-base label,.st-max label{display:block;font-size:10px;font-weight:700;color:#8a92a4;margin-bottom:2px} .st-base input,.st-max input{width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;outline:none} .st-max input{border-color:#e2e5ef;background:#fafbfe;font-weight:600;color:#7a828f} .st-max label{color:#9aa0ac} .st-base input{border-color:#cdd3ff;background:#fbfcff} .st-base input:focus,.st-max input:focus{border-color:var(--accent)} /* abilita / passive / natura, nella scheda Animei */ .ab-grid{display:grid;grid-template-columns:1.4fr 1.2fr 1.1fr;gap:10px;margin-top:8px} .ab-grid select{width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fbfcff} .ab-eff{margin-top:8px;font-size:12.5px;color:#555;line-height:1.5;background:#f7f8fc;border-radius:9px;padding:8px 10px} .ab-passrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .ab-pass{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:20px;font-size:12px;cursor:pointer;background:#fff} .ab-pass.on{border-color:#5b6cff;background:#eef0ff;color:#3f4ce0;font-weight:700} /* i tre riquadri (statistiche · abilità · mosse): affiancati sugli schermi larghi */ .panelli{display:grid;gap:14px;grid-template-columns:1fr} @media (min-width:1150px){ .panelli{grid-template-columns:1fr 1fr} .panelli #movePanel{grid-column:1 / -1} /* il learnset e' lungo: tutta la riga */ } @media (min-width:1150px){ .mv-rows{max-height:none} .mv-row{padding:5px 10px} } /* selettore mosse con filtri (dentro la scheda) */ .mvp-box{margin-top:8px;border:1px solid var(--line);border-radius:10px;background:#f7f8fc;padding:8px} .mvp-filtri{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end} .mvp-filtri label{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:700;color:#8a92a4} .mvp-filtri select,.mvp-filtri input{padding:5px 7px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-family:inherit;background:#fff} .mvp-lista{display:flex;flex-direction:column;gap:3px;margin-top:8px;max-height:280px;overflow-y:auto} .mvp-row{display:flex;align-items:center;gap:8px;padding:3px 7px;border-radius:7px;background:#fff;border:1px solid var(--line)} .mvp-row.dentro{opacity:.5;background:#eef0f6} /* learnset: mosse imparate per livello, nella scheda Animei */ .mv-rows{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:320px;overflow-y:auto} .mv-row{display:flex;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--line);border-radius:9px;background:#fbfcff} .mv-lv{width:52px;padding:3px 5px;border:1px solid var(--line);border-radius:7px;font-size:12px;font-weight:800;text-align:center;color:#3f4ce0;font-family:inherit} .mv-nm{font-size:13px} .mv-in{flex:1;font-size:11.5px} .mv-x{border:none;background:transparent;color:#c0c5d2;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px} .mv-x:hover{color:#e8482b} .st-legend{display:flex;flex-wrap:wrap;gap:11px;align-items:center;font-size:11.5px;color:var(--muted);margin-top:10px} .st-pool-btns{display:inline-flex;gap:8px;flex-wrap:wrap} .st-final{display:flex;align-items:center;gap:8px} .st-bar{flex:1;height:9px;background:#eef0f5;border-radius:6px;overflow:hidden} .st-bar span{display:block;height:100%;border-radius:6px} .st-val{font-size:15px;font-weight:800;min-width:60px;text-align:right} .st-val small{display:block;font-size:10px;font-weight:600;color:var(--muted)} .st-tier{font-size:10.5px;line-height:1.15;min-width:82px;text-align:right} /* confronto / bilanciamento Animei */ .cmp-filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-bottom:14px} .cmp-filters label{font-size:12px;color:var(--muted);font-weight:700} .cmp-filters select{margin-left:6px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit} .cmp-scroll{overflow-x:auto} .cmp-table{min-width:820px;border:1px solid var(--line);border-radius:12px;overflow:hidden} .cmp-row{display:grid;grid-template-columns:1.7fr repeat(6,1fr) 68px 68px;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--line);cursor:pointer} .cmp-row:last-child{border-bottom:none} .cmp-row:not(.cmp-head):hover{background:#f5f7fd} .cmp-head{background:#eef1f8;font-size:11px;font-weight:800;color:#6b7280;cursor:default} .cmp-name{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.25} .cmp-thumb{width:36px;height:36px;flex:0 0 36px;border-radius:8px;background:#eef0f5;overflow:hidden;display:flex;align-items:center;justify-content:center} .cmp-thumb img{width:100%;height:100%;object-fit:contain} .cmp-col{text-align:center;font-size:12px} .cmp-col .cmp-bar{height:6px;background:#eceef4;border-radius:4px;overflow:hidden;margin-bottom:2px} .cmp-col .cmp-bar i{display:block;height:100%;border-radius:4px} .cmp-col b{font-size:12px;font-weight:800} .cmp-legend{width:100%;border-collapse:collapse;font-size:12.5px} .cmp-legend th,.cmp-legend td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:middle} .cmp-legend th{background:#eef1f8;font-size:11.5px;font-weight:800} /* ---- albero progressione segmentato per livello ---- */ .lv-cols{position:absolute;inset:0;z-index:0} .lv-col{position:absolute;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.06);box-sizing:border-box} .lv-col.alt{background:rgba(255,255,255,.022)} .lv-col.scelta{background:rgba(91,108,255,.13)} .lv-col-h{text-align:center;font-size:11px;color:#7e88a8;font-weight:700;padding:6px 2px;white-space:nowrap;line-height:1.25} .lv-col-h.big{color:#aeb8e6;font-size:12px} .lv-col-h small{color:#5fd08a;font-weight:800} .lv-col-h em{font-size:9px;color:#9db0ff;font-style:normal} .graph-edges{z-index:1} .gnode{z-index:2} /* ---- evoluzioni derivate dalla progressione (scheda creatura) ---- */ .evo-box{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fafbfd;min-height:20px} .evo-line{font-size:13px;color:var(--muted);margin:2px 0} .evo-pill{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px 9px;margin:3px 5px 3px 0;font-size:13px;color:var(--ink)} .evo-pill small{color:var(--muted);font-weight:600} /* ---- matrice tipi ---- */ .mx{border-collapse:collapse;font-size:11px} .mx-h{padding:3px 5px;font-weight:800;font-size:11px;color:var(--muted);position:sticky} .mx-c{width:26px;height:24px;text-align:center;border:1px solid var(--line);font-weight:800;color:#444} .mx-c.eff2{background:#d8f3e0;color:#1c7a43} .mx-c.eff05{background:#fde2d8;color:#c0492b} .mx-c.eff0{background:#3a3f4d;color:#fff} .mx-c.eff1{background:#fff} /* ---- arena ---- */ .ar-board{display:flex;align-items:center;gap:18px;margin:14px 0;max-width:780px} .ar-side{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px} .ar-side b{font-size:16px}.ar-side small{color:var(--muted);display:block;margin:2px 0} .ar-vs{font-weight:900;color:var(--muted)} .hpbar{height:12px;background:#eef0f5;border-radius:6px;overflow:hidden;margin:6px 0} .hpbar span{display:block;height:100%;border-radius:6px;transition:width .2s} .ar-win{font-size:16px;margin:6px 0 12px} .ar-log{max-width:780px;max-height:340px;overflow:auto;background:#0d1018;color:#cfd6ee;border-radius:12px;padding:12px 16px;font-size:13px;line-height:1.7} .ar-log b{color:#fff}.ar-log i{color:#9aa3c8} .eff2t{color:#5fd08a;font-weight:800}.eff05t{color:#e8a07b;font-weight:800}.eff0t{color:#9aa3c8;font-weight:800} /* ---- battaglia grafica ---- */ .bt-stage{position:relative;background:linear-gradient(#bfe3f5,#dff3df 55%,#cfeccd);border-radius:16px;padding:18px;margin:6px 0 14px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)} .bt-row{display:flex;align-items:center;gap:14px} .bt-foe{justify-content:flex-start} .bt-you{justify-content:flex-end} .bt-sprite{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))} .bt-noimg{display:flex;align-items:center;justify-content:center;background:#0002;border-radius:12px;font-size:40px;color:#0006} .bt-panel{background:rgba(255,255,255,.92);border:1px solid #0001;border-radius:12px;padding:9px 13px;min-width:230px;box-shadow:0 3px 10px rgba(0,0,0,.12)} .bt-name{font-size:16px;font-weight:800;color:#1c2230;display:flex;align-items:center;gap:7px} .bt-name small{color:#6b7280;font-weight:700} .bt-types{margin:4px 0} .bt-hpwrap{display:flex;align-items:center;gap:7px} .bt-hpwrap>span{font-size:11px;font-weight:800;color:#caa42a} .bt-hp{flex:1;height:10px;margin:0} .bt-hpn{color:#4b5365;font-weight:700;font-size:12px} .ail-badge{background:#7d3c98;color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px} .bt-msgbox{background:#0d1018;color:#eef0f6;border-radius:12px;padding:14px 18px;font-size:15px;min-height:24px;line-height:1.5} .bt-msgbox b{color:#fff} /* il ▸ che dice «tocca a te»: compare quando la battaglia aspetta la barra spaziatrice prima di far partire l'attacco avversario */ .bt-avanti{display:inline-block;margin-left:10px;color:#ffd23f;font-weight:900; animation:btAvanti .8s ease-in-out infinite} @keyframes btAvanti{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}} /* ===== L'ALLENATORE CHE SI PRESENTA ===== Sta in piedi al posto dell'Animei, dice la sua, poi esce di scena e al suo posto compare la sfera che si apre — come in Pokémon. */ /* L'allenatore sta ESATTAMENTE dove starebbe il suo Animei — in alto a destra — e la sua battuta gli esce di fianco, verso il centro. Prima era ancorato in basso a destra e finiva sopra le statistiche e i comandi tuoi. */ .bt-intro{position:absolute;inset:0;z-index:9;pointer-events:auto;cursor:pointer; transition:transform .5s ease-in,opacity .5s} .bt-intro.via{transform:translateX(38%);opacity:0} .bt-intro-fig{position:absolute;right:6%;top:4%;height:46%;max-width:34%;object-fit:contain; object-position:top right;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45)); animation:btIntroEntra .5s cubic-bezier(.2,.9,.3,1.2) both} @keyframes btIntroEntra{from{transform:translateX(60%);opacity:0}to{transform:none;opacity:1}} .bt-intro-dice{position:absolute;right:42%;top:14%;max-width:40%;min-width:220px; background:rgba(13,16,24,.94);color:#eef0f6;border-radius:14px; padding:13px 17px;font-size:15px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.5)} .bt-intro-dice b{display:block;color:#ffd23f;font-size:13px;margin-bottom:4px} .bt-sfera{position:absolute;right:16%;top:26%;z-index:8;font-size:44px;color:#f87171; text-shadow:0 4px 14px rgba(0,0,0,.5);animation:btSferaCade .5s cubic-bezier(.3,1.4,.5,1) both} @keyframes btSferaCade{from{transform:translateY(-90px) rotate(-90deg);opacity:0}to{transform:none;opacity:1}} .bt-sfera.apre{animation:btSferaApre .42s ease-out forwards} /* la TUA sfera arriva dalla tua parte: in basso a sinistra, dove sta il tuo Animei */ .bt-sfera-tua{right:auto;left:18%;bottom:16%;color:#60a5fa} @keyframes btSferaApre{0%{transform:scale(1)}40%{transform:scale(1.5);filter:brightness(2.5)}100%{transform:scale(2.6);opacity:0;filter:brightness(3)}} .bt-entra{animation:btMonEntra .55s cubic-bezier(.2,.9,.3,1.3) both} @keyframes btMonEntra{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}} .bt-menu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;max-width:780px} .bt-menu1{margin-top:10px} .bt-move{text-align:left;background:#fff;border:1px solid var(--line);border-left:4px solid #888;border-radius:10px;padding:9px 13px;cursor:pointer;display:flex;flex-direction:column;gap:3px;font-family:inherit} .bt-move:hover{background:#f3f5fb;box-shadow:0 3px 10px rgba(0,0,0,.1)} .bt-move b{font-size:14px;color:var(--ink)} .bt-move span{font-size:11.5px;color:var(--muted)} .xpgain{display:inline-block;color:#7ee2a8;font-size:13.5px;font-weight:600;letter-spacing:.01em} .xpgain b{color:#b9f6cf;font-weight:800;font-variant-numeric:tabular-nums} .bt-move-pp{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:#6b7280} .bt-move-pp.low{color:#e0a32a} .bt-move-sub{display:flex;align-items:center;gap:6px} .bt-move-out{opacity:.42;cursor:not-allowed;filter:grayscale(.4)} .bt-move-out .bt-move-pp{color:#e3350d} .critt{color:#e0a32a;font-weight:800} /* ---- parata reattiva ---- */ .parry-wrap{display:flex;align-items:center;gap:14px;margin-top:10px;max-width:820px} .parry-track{position:relative;flex:1;height:30px;background:#0d1018;border-radius:15px;overflow:hidden} .parry-good{position:absolute;left:32%;width:36%;top:0;bottom:0;background:rgba(224,163,42,.22)} .parry-zone{position:absolute;left:43%;width:14%;top:0;bottom:0;background:rgba(95,208,138,.42);border-left:2px solid #5fd08a;border-right:2px solid #5fd08a} .parry-marker{position:absolute;top:-2px;bottom:-2px;width:5px;background:#fff;border-radius:3px;box-shadow:0 0 10px #fff,0 0 4px #fff;animation:parryrun linear forwards} @keyframes parryrun{from{left:0}to{left:calc(100% - 5px)}} .parry-btn{height:46px;font-size:15px;min-width:130px} .bt-parrymsg{background:#1a1030} /* ---- animazioni battaglia ---- */ .bt-hp span{transition:width .55s ease, background .55s ease} @keyframes atkYou{0%{transform:translate(0,0)}45%{transform:translate(46px,-34px)}100%{transform:translate(0,0)}} @keyframes atkFoe{0%{transform:translate(0,0)}45%{transform:translate(-46px,34px)}100%{transform:translate(0,0)}} .atk-you{animation:atkYou .34s ease} .atk-foe{animation:atkFoe .34s ease} @keyframes btHit{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,0);filter:brightness(2.2)}30%{transform:translate(7px,0);filter:brightness(.4) sepia(1) saturate(4) hue-rotate(-35deg)}45%{transform:translate(-6px,0);filter:brightness(2.2)}60%{transform:translate(6px,0);filter:none}80%{transform:translate(-3px,0)}} .bt-hit{animation:btHit .5s ease} @keyframes btFaint{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(70px) scale(.85);opacity:0}} .bt-faint{animation:btFaint .6s ease forwards} /* ---- battaglia v2: tu a SINISTRA, avversario a DESTRA + UI da gioco ---- */ .bt-foe{justify-content:space-between} .bt-you{justify-content:space-between} .bt-stage{position:relative} .bt-bar{display:flex;gap:12px;align-items:stretch;margin-top:10px} .bt-bar .bt-msgbox{flex:1;display:flex;align-items:center;min-height:54px} .bt-bar .bt-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:440px;margin:0;max-width:none} .bt-bar .bt-menu1{display:flex;align-items:center} @media(max-width:920px){.bt-bar{flex-direction:column}.bt-bar .bt-menu{width:auto}} .bt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none} .parry-box{pointer-events:auto;background:rgba(13,16,24,.93);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 22px;display:flex;flex-direction:column;gap:12px;align-items:center;box-shadow:0 14px 44px rgba(0,0,0,.55)} .parry-count{color:#fff;font-weight:800;font-size:15px;letter-spacing:2px} .parry-count b{color:#5fd08a;letter-spacing:3px} .parry-box .parry-track{position:relative;width:420px;height:30px;background:#1a1f2e;border-radius:15px;overflow:hidden;transition:box-shadow .1s} .parry-box .parry-zone{position:absolute;top:0;bottom:0;background:rgba(95,208,138,.5);border-left:2px solid #5fd08a;border-right:2px solid #5fd08a} .parry-box .parry-marker{position:absolute;top:-2px;bottom:-2px;width:6px;background:#fff;border-radius:3px;box-shadow:0 0 12px #fff,0 0 5px #fff;animation:none;left:0} .parry-track.pk-ok{box-shadow:0 0 0 3px #5fd08a inset} .parry-track.pk-bad{box-shadow:0 0 0 3px #e3350d inset} .parry-btn{height:44px;font-size:15px;min-width:170px} /* ---- difesa reattiva stile Expedition 33 (anello che si stringe) ---- */ .def-box{pointer-events:auto;background:rgba(13,16,24,.94);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px 24px 22px;display:flex;flex-direction:column;gap:10px;align-items:center;box-shadow:0 16px 50px rgba(0,0,0,.6)} .def-count{color:#fff;font-weight:800;font-size:14px;letter-spacing:1px} .def-count b{color:#5fd08a} .def-arena{position:relative;width:170px;height:170px;display:flex;align-items:center;justify-content:center;border-radius:16px;transition:box-shadow .1s} .def-arena.def-ok{box-shadow:0 0 0 3px #5fd08a inset} .def-arena.def-mid{box-shadow:0 0 0 3px #e0a32a inset} .def-arena.def-bad{box-shadow:0 0 0 3px #e3350d inset} .def-target{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;border:3px dashed rgba(95,208,138,.95);background:rgba(95,208,138,.14)} .def-ring{position:absolute;left:50%;top:50%;width:86px;height:86px;border-radius:50%;border:4px solid #fff;box-shadow:0 0 16px #fff,0 0 6px #fff;transform:translate(-50%,-50%) scale(3.4);animation:defShrink linear forwards} @keyframes defShrink{from{transform:translate(-50%,-50%) scale(3.4);opacity:.1}70%{opacity:.85}to{transform:translate(-50%,-50%) scale(1);opacity:1}} .def-feedback{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font-weight:800;font-size:14px;white-space:nowrap;text-shadow:0 1px 3px #000} .def-feedback.def-ok{color:#5fd08a}.def-feedback.def-mid{color:#e7b34a}.def-feedback.def-bad{color:#ff6a5a} /* ---- v3: banner messaggi + bersaglio "sul bordo" + menu senza barra nera ---- */ .bt-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);max-width:78%;background:rgba(13,16,24,.9);color:#fff;padding:9px 18px;border-radius:12px;font-size:15px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:4;text-align:center} .bt-banner b{color:#fff} .bt-bar-menu{justify-content:flex-end} .bt-bar-menu .bt-menu{width:580px;max-width:none} /* bersaglio = anello sottile: l'anello bianco va centrato ESATTAMENTE sul bordo verde */ .def-target{background:transparent;border:3px solid #5fd08a;box-shadow:0 0 12px rgba(95,208,138,.55)} .def-arena{width:180px;height:180px} .def-box .parry-btn{margin-top:2px} /* ============ STATISTICHE CHE SALGONO O SCENDONO (stile Pokémon) ============ Frecce colorate per statistica + colonna di luce + etichetta di cosa è cambiato. */ .stfx-colonna{position:absolute;z-index:7;pointer-events:none;border-radius:50% 50% 46% 46%/60% 60% 40% 40%} .stfx-colonna.stfx-su{background:linear-gradient(0deg,var(--c),transparent 72%);animation:stColonnaSu 1.15s ease-out forwards} .stfx-colonna.stfx-giu{background:linear-gradient(180deg,var(--c),transparent 72%);animation:stColonnaGiu 1.15s ease-out forwards} @keyframes stColonnaSu{0%{opacity:0;transform:scaleY(.55)}25%{opacity:.75}100%{opacity:0;transform:scaleY(1.2) translateY(-16px)}} @keyframes stColonnaGiu{0%{opacity:0;transform:scaleY(.55)}25%{opacity:.7}100%{opacity:0;transform:scaleY(1.2) translateY(16px)}} .stfx-freccia{position:absolute;z-index:8;pointer-events:none;font-style:normal;line-height:1; color:var(--c);text-shadow:0 0 10px var(--c),0 0 20px var(--c2),0 1px 2px rgba(0,0,0,.7);transform:translate(-50%,-50%)} .stfx-freccia.stfx-su{animation:stFrecciaSu 1.05s cubic-bezier(.25,.8,.3,1) forwards} .stfx-freccia.stfx-giu{animation:stFrecciaGiu 1.05s cubic-bezier(.25,.8,.3,1) forwards} @keyframes stFrecciaSu{0%{opacity:0;transform:translate(-50%,10px) scale(.5)} 18%{opacity:1;transform:translate(-50%,-6px) scale(1.15)} 100%{opacity:0;transform:translate(-50%,-120px) scale(.85)}} @keyframes stFrecciaGiu{0%{opacity:0;transform:translate(-50%,-10px) scale(.5)} 18%{opacity:1;transform:translate(-50%,6px) scale(1.15)} 100%{opacity:0;transform:translate(-50%,120px) scale(.85)}} .stfx-eti{position:absolute;z-index:9;pointer-events:none;transform:translate(-50%,-50%); font-weight:900;font-size:14px;letter-spacing:.3px;color:#fff;padding:4px 12px;border-radius:999px; background:rgba(10,14,26,.82);border:1.5px solid var(--c);box-shadow:0 0 18px var(--c),0 4px 14px rgba(0,0,0,.5); text-shadow:0 0 8px var(--c);animation:stEti 1.25s ease-out forwards;white-space:nowrap} @keyframes stEti{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)} 20%{opacity:1;transform:translate(-50%,-50%) scale(1.06)} 70%{opacity:1;transform:translate(-50%,-62%) scale(1)} 100%{opacity:0;transform:translate(-50%,-85%) scale(.96)}} /* ============ MOSSE D'ATTACCO: atmosfera di scena (stesso stile del clima) ============ Sopra le particelle: un velo del colore del tipo che tinge tutta la scena, un lampo, un'onda d'urto che si espande e una scossa della scena per i colpi più forti. */ .mfx-scena{position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:20px;overflow:hidden} .mfx-tinta{position:absolute;inset:0;animation:mfxTinta .62s ease-out forwards} @keyframes mfxTinta{0%{opacity:0}22%{opacity:.55}100%{opacity:0}} .mfx-lampo{position:absolute;inset:0;background:#fff;animation:mfxLampo .3s ease-out forwards} @keyframes mfxLampo{0%{opacity:0}12%{opacity:.72}100%{opacity:0}} .mfx-vignetta{position:absolute;inset:0;animation:mfxTinta .7s ease-out forwards} .mfx-onda{position:absolute;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 24px var(--c),0 0 60px var(--c) inset; transform:translate(-50%,-50%);animation:mfxOnda .62s cubic-bezier(.15,.7,.3,1) forwards} @keyframes mfxOnda{0%{width:20px;height:20px;opacity:.95}100%{width:520px;height:520px;opacity:0}} .mfx-raggiera{position:absolute;transform:translate(-50%,-50%);pointer-events:none; background:conic-gradient(from 0deg,var(--c) 0 4deg,transparent 4deg 26deg,var(--c) 26deg 30deg,transparent 30deg 52deg); animation:mfxRaggiera .55s ease-out forwards;mix-blend-mode:screen} @keyframes mfxRaggiera{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)} 30%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9) rotate(70deg)}} .bt-scossa{animation:btScossa .42s cubic-bezier(.36,.07,.19,.97)} @keyframes btScossa{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)} 30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}} .bt-scossa-forte{animation:btScossaForte .55s cubic-bezier(.36,.07,.19,.97)} @keyframes btScossaForte{10%,90%{transform:translate(-4px,2px)}20%,80%{transform:translate(8px,-4px)} 30%,50%,70%{transform:translate(-13px,6px)}40%,60%{transform:translate(13px,-6px)}} /* ================== CLIMA IN SCENA (pioggia, neve, sole, sabbia…) ================== Tutto disegnato in CSS: nessuna immagine di terzi. Il livello sta sopra lo sfondo ma sotto le creature, così non copre il combattimento. */ .bt-clima{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;border-radius:20px} .clima-velo{position:absolute;inset:0} .bt-clima .cp{position:absolute;display:block;pointer-events:none} /* PIOGGIA: gocce allungate che cadono di sbieco */ .cp-goccia{top:-14%;width:2px;height:26px;border-radius:2px; background:linear-gradient(180deg,rgba(180,220,255,0),rgba(190,225,255,.95)); animation:cadeObliquo linear infinite} .cp-goccia.forte{width:3px;height:40px;background:linear-gradient(180deg,rgba(200,230,255,0),rgba(220,240,255,1))} @keyframes cadeObliquo{from{transform:translate3d(0,-40px,0)}to{transform:translate3d(-70px,660px,0)}} /* GRANDINE: chicchi duri, veloci, quasi verticali */ .cp-chicco{top:-8%;width:7px;height:7px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#bfe6ff 60%,#7cc0e8); box-shadow:0 0 6px rgba(190,235,255,.9);animation:cadeChicco linear infinite} @keyframes cadeChicco{from{transform:translate3d(0,-40px,0)}to{transform:translate3d(-22px,660px,0)}} /* NEVE: fiocchi lenti che ondeggiano scendendo */ .cp-fiocco{top:-6%;border-radius:50%;background:radial-gradient(circle,#fff,rgba(230,245,255,.75)); box-shadow:0 0 7px rgba(255,255,255,.85);animation:cadeFiocco linear infinite} @keyframes cadeFiocco{ 0%{transform:translate3d(0,-30px,0) rotate(0)} 25%{transform:translate3d(26px,160px,0) rotate(90deg)} 50%{transform:translate3d(-18px,330px,0) rotate(180deg)} 75%{transform:translate3d(22px,500px,0) rotate(270deg)} 100%{transform:translate3d(-10px,660px,0) rotate(360deg)}} /* SABBIA: granelli che sfrecciano in orizzontale + folate */ .cp-granello{left:-4%;width:14px;height:2px;border-radius:2px; background:linear-gradient(90deg,rgba(230,200,130,0),rgba(240,215,150,.95)); animation:sfrecciaSabbia linear infinite} @keyframes sfrecciaSabbia{from{transform:translate3d(-40px,0,0)}to{transform:translate3d(1100px,-40px,0)}} .clima-folata{position:absolute;inset:0;background:repeating-linear-gradient(74deg,transparent 0 46px,rgba(220,185,110,.13) 46px 58px); animation:folata 2.6s linear infinite} @keyframes folata{from{transform:translateX(0)}to{transform:translateX(58px)}} /* FANGO: schizzi che saltano dal basso */ .cp-schizzo{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#8a6336,#5b4022); opacity:.85;animation:schizza ease-out infinite} @keyframes schizza{0%{transform:translateY(14px) scale(.5);opacity:0} 30%{transform:translateY(-26px) scale(1);opacity:.9} 100%{transform:translateY(16px) scale(.6);opacity:0}} /* SOLE: disco caldo, raggi che ruotano, aria che tremola */ .clima-sole{position:absolute;top:-70px;right:-60px;width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,rgba(255,246,200,.95),rgba(255,208,90,.55) 38%,rgba(255,170,50,.12) 62%,transparent 72%); animation:pulsaSole 4.2s ease-in-out infinite} @keyframes pulsaSole{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.07);opacity:1}} .clima-raggi{position:absolute;top:-190px;right:-180px;width:520px;height:520px; background:conic-gradient(from 0deg,rgba(255,225,140,.20) 0 8deg,transparent 8deg 30deg, rgba(255,225,140,.14) 30deg 36deg,transparent 36deg 60deg); animation:giraRaggi 26s linear infinite;mix-blend-mode:screen} @keyframes giraRaggi{to{transform:rotate(360deg)}} .clima-calore{position:absolute;left:0;right:0;bottom:0;height:46%; background:linear-gradient(0deg,rgba(255,190,90,.20),transparent);animation:tremolio 3.4s ease-in-out infinite} @keyframes tremolio{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:.9;transform:translateY(-5px)}} /* TERRENI: il campo si illumina dal basso e sprigiona particelle */ .clima-suolo{position:absolute;left:0;right:0;bottom:0;height:34%;animation:suoloPulsa 3.6s ease-in-out infinite} @keyframes suoloPulsa{0%,100%{opacity:.75}50%{opacity:1}} .bt-clima .tp{position:absolute;bottom:2%;display:block;pointer-events:none} .tp-spora{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 9px var(--c);animation:saleLento linear infinite} .tp-scintilla{width:3px;height:13px;border-radius:2px;background:var(--c);box-shadow:0 0 11px var(--c);animation:saleLento linear infinite} .tp-rombo{width:9px;height:9px;background:var(--c);transform:rotate(45deg);box-shadow:0 0 11px var(--c);animation:saleLento linear infinite} .tp-bolla{width:11px;height:11px;border-radius:50%;border:2px solid var(--c);animation:saleLento linear infinite} @keyframes saleLento{0%{transform:translateY(0) scale(.7);opacity:0} 15%{opacity:.95} 100%{transform:translateY(-320px) scale(1.15);opacity:0}} /* ---- SCELTA ANIMEI con lo sprite (sostituisce la tendina normale) ---- */ .cpk{position:relative;min-width:210px} .cpk-btn{display:flex;align-items:center;gap:9px;width:100%;height:42px;padding:4px 10px;cursor:pointer; background:var(--card,#fff);border:1px solid rgba(120,140,180,.35);border-radius:10px;color:inherit;font-size:14px;text-align:left} .cpk-btn:hover{border-color:#5b8cff} .cpk-btn img{width:32px;height:32px;object-fit:contain;flex:none;image-rendering:auto} .cpk-nome{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cpk-freccia{opacity:.55;font-size:12px;flex:none} .cpk-noimg{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:7px;background:rgba(130,150,190,.18);font-size:14px;opacity:.6} .cpk-menu{position:absolute;z-index:50;top:calc(100% + 6px);left:0;width:330px;max-width:88vw; background:var(--card,#fff);border:1px solid rgba(120,140,180,.35);border-radius:12px;box-shadow:0 18px 48px rgba(10,20,40,.28);overflow:hidden} .cpk-menu[hidden]{display:none} .cpk-cerca{width:100%;border:0;border-bottom:1px solid rgba(120,140,180,.25);padding:11px 13px;font-size:14px;background:transparent;color:inherit} .cpk-cerca:focus{outline:none;background:rgba(91,140,255,.06)} .cpk-lista{max-height:340px;overflow:auto} .cpk-riga{display:flex;align-items:center;gap:10px;padding:6px 11px;cursor:pointer;border-bottom:1px solid rgba(120,140,180,.12)} .cpk-riga:hover{background:rgba(91,140,255,.12)} .cpk-riga.on{background:rgba(91,140,255,.2)} .cpk-riga img{width:42px;height:42px;object-fit:contain;flex:none} .cpk-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .cpk-txt b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cpk-sub{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .cpk-tipo{font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;letter-spacing:.2px} .cpk-st{color:#e0a32a;font-size:10.5px;font-style:normal;letter-spacing:1px} .cpk-vuoto{padding:18px;text-align:center;opacity:.6;font-size:13.5px} /* ---- BANCO DI PROVA dell'Arena (personalizza abilità/natura/mosse/affezione) ---- */ .ar-banco-ov{position:fixed;inset:0;z-index:60;background:rgba(6,9,16,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px} .ar-banco{width:min(620px,96vw);max-height:88vh;overflow:auto;background:#111826;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.6)} .ar-banco-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .ar-banco-top h3{margin:0;font-size:18px} .ar-banco .field{margin-top:14px} .ar-banco .field>label{display:block;font-size:12px;color:#9fb0d0;margin-bottom:6px;text-transform:uppercase;letter-spacing:.07em} .ar-banco select,.ar-banco input[type=text],.ar-banco .ar-mossa{width:100%;background:#0b1220;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#e8eefc;padding:9px 11px;font-size:14px} .ar-banco .ar-mossa:focus,.ar-banco select:focus{outline:none;border-color:#5b8cff} .ar-mosse{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ar-aff{display:flex;align-items:center;gap:12px} .ar-aff input[type=range]{flex:1} .ar-aff span{font-size:13px;color:#cfe0ff;white-space:nowrap} .ar-banco-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} @media(max-width:620px){.ar-mosse{grid-template-columns:1fr}} /* ---- ABILITÀ: cartellino che compare quando scatta (come in Pokémon) ---- */ .ab-popup{position:absolute;z-index:8;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px; background:linear-gradient(135deg,rgba(18,24,40,.97),rgba(30,40,66,.97));border:1px solid rgba(140,180,255,.45); color:#eaf1ff;font-weight:800;font-size:13.5px;box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset; animation:abPop 2.1s cubic-bezier(.2,.9,.3,1) forwards;white-space:nowrap;pointer-events:none} .ab-popup .ab-ico{font-size:15px;filter:drop-shadow(0 0 6px currentColor)} .ab-popup small{display:block;font-weight:600;font-size:11px;color:#9fb6dd;letter-spacing:.2px} /* col racconto di cosa è successo il cartellino è più largo e va a capo */ .ab-popup.ab-lunga{max-width:300px;white-space:normal;align-items:flex-start} .ab-popup.ab-lunga small{margin-top:2px;line-height:1.35;color:#cfe0ff;font-weight:500} .ab-popup.ab-lunga{animation-duration:3s} .ab-popup.ab-you{left:14px;bottom:120px} .ab-popup.ab-foe{right:14px;top:110px} /* MENTRE L'ALLENATORE SI PRESENTA il campo è vuoto: la tua metà (Animei, barra e comandi) entra dopo, dalla sfera, e il cartellino dell'abilità avversaria si sposta a sinistra — a destra ci sta in piedi lui e prima ci finiva dietro, illeggibile. */ .bt-stage.bt-presenta .ab-popup.ab-foe{right:auto;left:14px;top:24px;animation-name:abPop} .bt-stage.bt-presenta .bt-spr-you, .bt-stage.bt-presenta .bt-actionbox, .bt-stage.bt-presenta .bt-dialogo{visibility:hidden} @keyframes abPop{ 0%{opacity:0;transform:translateX(-14px) scale(.9)} 12%{opacity:1;transform:translateX(0) scale(1)} 85%{opacity:1;transform:translateX(0) scale(1)} 100%{opacity:0;transform:translateX(0) scale(.96)}} .ab-popup.ab-foe{animation-name:abPopR} @keyframes abPopR{ 0%{opacity:0;transform:translateX(14px) scale(.9)} 12%{opacity:1;transform:translateX(0) scale(1)} 85%{opacity:1;transform:translateX(0) scale(1)} 100%{opacity:0;transform:translateX(0) scale(.96)}} /* alone che avvolge la creatura quando la sua abilità si attiva */ @keyframes abAura{0%{opacity:0;transform:scale(.6)}35%{opacity:.95;transform:scale(1.12)}100%{opacity:0;transform:scale(1.45)}} .ab-aura{position:absolute;border-radius:50%;pointer-events:none;z-index:6;animation:abAura 1.05s ease-out forwards} /* abilità + natura sotto il nome, per vedere cosa sta agendo in lotta */ .bt-info{font-size:11.5px;color:#9fb0d0;margin:2px 0 3px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- MOSSE A DUE TURNI: la creatura sparisce e al turno dopo piomba ---- */ /* vola in alto e sparisce (Volo, Picchiata) */ @keyframes btSu{from{transform:translateY(0) scale(1);opacity:1}60%{opacity:.5}to{transform:translateY(-150px) scale(.5);opacity:0}} .bt-carica-su{animation:btSu .62s cubic-bezier(.4,0,.6,1) forwards} /* si scava sottoterra e sparisce (Fossa, Sottoterra) */ @keyframes btGiu{from{transform:translateY(0) scale(1);opacity:1}60%{opacity:.5}to{transform:translateY(60px) scaleY(.15) scaleX(1.25);opacity:0}} .bt-carica-giu{animation:btGiu .62s cubic-bezier(.4,0,.6,1) forwards} /* si carica di energia restando in campo (Solarraggio, Raggiometeora, Rocciroboante) */ @keyframes btCarica{0%,100%{filter:none;transform:scale(1)} 35%{filter:brightness(1.9) drop-shadow(0 0 26px #ffd76a) saturate(1.4);transform:scale(1.07)} 70%{filter:brightness(1.5) drop-shadow(0 0 18px #ffd76a);transform:scale(1.03)}} .bt-carica-luce{animation:btCarica 1.1s ease-in-out infinite} /* il rientro in scena: ricompare e piomba */ @keyframes btRientro{from{transform:translateY(-130px) scale(.55);opacity:0}70%{opacity:1}to{transform:translateY(0) scale(1);opacity:1}} .bt-rientro{animation:btRientro .5s cubic-bezier(.3,1.4,.5,1)} /* alone di attesa sotto il posto lasciato vuoto */ .bt-ombra-carica{position:absolute;width:120px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(120,170,255,.45),transparent 70%);animation:btOmbra 1.2s ease-in-out infinite} @keyframes btOmbra{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.18);opacity:.85}} /* parata dell'avversario (computer) */ @keyframes btBlock{0%,100%{filter:none;transform:scale(1)}30%{filter:brightness(1.7) drop-shadow(0 0 14px #6fd0ff);transform:scale(1.06)}} .bt-block{animation:btBlock .45s ease} /* ---- v4: scena GRANDE, sprite grandi, mosse INGLOBATE nella scena ---- */ .bt-stage{position:relative;min-height:610px;display:flex;flex-direction:column;padding:20px;border-radius:20px;overflow:hidden} .bt-field{flex:1;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:470px} .bt-sprite{width:210px;height:210px} .bt-panel{min-width:250px} .bt-name{font-size:18px} .bt-banner{font-size:16px;padding:10px 22px} /* pannello mosse integrato in basso, dentro la scena */ /* ===== LA VIGNETTA DEL TESTO, come nei Pokémon ===== Fascia bassa, fondo bianco, scritta nera grande: è dove uno guarda per capire cosa sta succedendo. Prima il testo stava in un cartellino scuro in alto e si perdeva sopra le creature. */ /* Nell'ARENA la scena è impilata (creature, poi vignetta, poi comandi): qui la vignetta sta nel flusso e si sistema da sola. Nella battaglia del MONDO tutto è posizionato a mano sopra la scena, e allora anche lei va messa in assoluto, sopra i comandi — vedi #owBattle più sotto. */ .bt-dialogo{position:absolute;left:2%;right:2%;bottom:10px;z-index:5; background:#fff;color:#141821;border:3px solid #2b3450;border-radius:14px; padding:14px 22px;min-height:62px;display:flex;align-items:center; font-size:19px;line-height:1.45;font-weight:600;letter-spacing:.1px; box-shadow:0 6px 20px rgba(0,0,0,.28)} .bt-dialogo.vuota{visibility:hidden} /* DUE MISURE, come nei Pokémon: • mentre SCEGLI («Cosa fa Croco?») sta piccola in un angolo, e i comandi le stanno di fianco; • quando partono gli ATTACCHI prende tutta la larghezza, perché lì c'è da leggere — e allora la barra PS si alza per farle posto. */ .bt-dialogo.stretta{right:auto;width:min(43%,470px);min-height:56px;font-size:17px} .bt-dialogo.vuota{visibility:hidden} .bt-dialogo b{color:#141821;font-weight:900} /* il riassunto della mossa: sta sotto al nome, più piccolo e grigio, così la frase principale resta grande e leggibile */ .bt-riass{display:block;margin-top:5px;font-size:14px;font-weight:600;color:#4a5570;line-height:1.4} .bt-riass .tbadge{font-size:11px;vertical-align:1px} .bt-riass b{color:#141821} .bt-dialogo{flex-direction:column;align-items:flex-start;justify-content:center} .bt-fetta{color:#4a5570;font-weight:600} .bt-dialogo .bt-avanti{position:absolute;right:16px;bottom:8px;color:#2b3450;font-size:20px} @media (max-width:760px){ .bt-dialogo{font-size:16px;padding:12px 16px;min-height:54px} } .bt-actionbox{margin-top:auto;transform:translateY(calc(-1 * var(--vignetta, 0px)));display:flex;justify-content:center;align-items:center} .bt-actionbox:empty{display:none} .bt-actionbox .bt-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:none;margin:0} .bt-actionbox .bt-move{background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.08);border-left-width:5px;border-radius:13px;padding:11px 15px;box-shadow:0 3px 12px rgba(0,0,0,.14)} .bt-actionbox .bt-move:hover{background:#fff;transform:translateY(-1px)} .bt-actionbox .bt-move b{font-size:15px} .bt-actionbox .bt-move span{font-size:12px} .bt-actionbox .btn.primary{height:48px;font-size:15px} @media(max-width:980px){.bt-actionbox .bt-menu{grid-template-columns:1fr 1fr}} /* ---- menu di lotta stile Pokémon (Lotta/Zaino/Animei/Fuga) ---- */ .bt-mainmenu{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:540px} .bt-cmd{font-size:18px;font-weight:800;padding:16px 12px;border-radius:14px;cursor:pointer;color:#fff;border:3px solid rgba(255,255,255,.55);box-shadow:0 4px 0 rgba(0,0,0,.28),0 7px 16px rgba(0,0,0,.25);font-family:inherit;letter-spacing:.5px;transition:transform .08s,filter .08s} .bt-cmd:hover{filter:brightness(1.08)} .bt-cmd:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.28)} .bt-cmd-fight{background:#d8453a} .bt-cmd-bag{background:#e0902a} .bt-cmd-team{background:#36a857} .bt-cmd-run{background:#3a7ad8} .bt-movewrap{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center} .bt-movewrap .bt-menu{width:100%} .bt-back{align-self:flex-start;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:7px 14px;font-weight:700;cursor:pointer;font-family:inherit;color:#1c2230} .bt-back:hover{background:#fff} /* ---- v5: layout Pokémon (assoluto) — tuo personaggio grande in basso-sx, menu sotto la vita ---- */ .bt-stage{min-height:540px;position:relative;border-radius:20px;overflow:hidden;padding:0} .bt-field{display:none} .bt-pos{position:absolute;z-index:3} .bt-foe-panel{top:22px;left:22px} .bt-you-panel{right:22px;bottom:208px} .bt-spr-foe{position:absolute;top:42px;right:80px;width:185px;height:185px;z-index:2} .bt-spr-you{position:absolute;left:24px;bottom:-120px;width:350px;height:350px;z-index:2} .bt-banner{z-index:5} .bt-overlay{z-index:6} .bt-actionbox{position:absolute;right:22px;bottom:20px;width:520px;max-width:48%;margin:0;display:block;z-index:4} .bt-actionbox:empty{display:none} .bt-actionbox .bt-mainmenu{width:100%;max-width:none} .bt-actionbox .bt-menu{grid-template-columns:1fr 1fr;width:100%;max-width:none} .bt-cmd{font-size:17px;padding:15px 10px} /* ---- v6: avversario più grande + pannello/barra del giocatore più compatti ---- */ .bt-spr-foe{width:300px;height:300px;top:24px;right:40px} /* pannello del giocatore compatto, barra PS più fina (ottimizza lo spazio per l'avversario) */ .bt-you-panel .bt-panel{min-width:0;width:280px;padding:6px 12px} .bt-you-panel .bt-name{font-size:14px} .bt-you-panel .bt-types{margin:2px 0} .bt-you-panel .bt-hpwrap{gap:5px} .bt-you-panel .bt-hpwrap>span{font-size:10px} .bt-you-panel .bt-hp{height:6px} .bt-you-panel .bt-hpn{font-size:11px} .bt-you-panel{bottom:200px} /* anche il pannello avversario un filo più compatto */ .bt-foe-panel .bt-panel{padding:7px 12px} .bt-foe-panel .bt-hp{height:7px} /* ---- v7: pannelli MINIMAL e piccoli (solo nome+Lv · barra PS · numeri) ---- */ .bt-foe-panel .bt-panel, .bt-you-panel .bt-panel{width:auto;max-width:230px;min-width:0;padding:7px 12px} .bt-foe-panel .bt-name, .bt-you-panel .bt-name{font-size:14px;margin-bottom:4px;gap:6px;align-items:center} .bt-foe-panel .bt-name small, .bt-you-panel .bt-name small{font-size:12px;font-weight:800} .bt-foe-panel .bt-hpwrap, .bt-you-panel .bt-hpwrap{gap:6px;margin:0} .bt-foe-panel .bt-hpwrap>span, .bt-you-panel .bt-hpwrap>span{font-size:10px} .bt-foe-panel .bt-hp, .bt-you-panel .bt-hp{height:7px;flex:1;min-width:80px;margin:0} .bt-foe-panel .bt-hpn, .bt-you-panel .bt-hpn{font-size:11px;white-space:nowrap;color:#4b5365;font-weight:700;margin:0} /* ---- v8: mosse più piccole + Indietro in alto + ⓘ info ---- */ .bt-movewrap{display:flex;flex-direction:column;gap:6px;width:100%} .bt-backrow{display:flex;justify-content:flex-end} .bt-back{padding:4px 12px;font-size:13px} .bt-actionbox .bt-menu{gap:8px} .bt-actionbox .bt-move{position:relative;padding:7px 12px 7px 14px;border-radius:11px} .bt-actionbox .bt-move b{font-size:13px} .bt-actionbox .bt-move .bt-move-sub{font-size:11px} .bt-move-i{position:absolute;top:4px;right:7px;font-size:16px;font-style:normal;color:#9aa0b0;cursor:help;line-height:1} .bt-move-i:hover{color:#5b6cff} /* ---- v9: barra PS di Croco nell'area mosse (a fianco di Indietro), più lunga; avversario più grande ---- */ .bt-playerbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;width:100%} .bt-playerbar .bt-panel{flex:1;min-width:0;max-width:none;padding:8px 14px} .bt-playerbar .bt-name{font-size:14px;margin-bottom:5px;gap:6px;align-items:center} .bt-playerbar .bt-name small{font-size:12px;font-weight:800} .bt-playerbar .bt-hpwrap{gap:7px;margin:0} .bt-playerbar .bt-hpwrap>span{font-size:10px} .bt-playerbar .bt-hp{flex:1;height:8px;min-width:175px;margin:0} .bt-playerbar .bt-hpn{font-size:12px;color:#4b5365;font-weight:700;white-space:nowrap;margin:0} .bt-playerbar .bt-back{flex:none;white-space:nowrap} /* avversario un po' più grande e barra più lunga */ .bt-foe-panel .bt-panel{max-width:300px;padding:9px 15px} .bt-foe-panel .bt-name{font-size:15px} .bt-foe-panel .bt-name small{font-size:13px} .bt-foe-panel .bt-hp{min-width:180px;height:8px} .bt-foe-panel .bt-hpn{font-size:12px} /* ===== AI BUILDER ===== */ /* ===== AI Builder ===== */ .bx-wrap{max-width:980px} .bx-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 2px 14px rgba(20,30,60,.05)} .bx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px} .bx-name{font-size:22px;font-weight:800;color:var(--ink);line-height:1.1} .bx-stars{color:#f59e0b;font-size:16px;letter-spacing:2px;margin-top:4px} .bx-role{text-align:right;font-size:13px;color:#4b5365} .bx-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} @media (max-width:760px){.bx-grid{grid-template-columns:1fr}} .bx-col h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:#6b7280} .bx-stat{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13px} .bx-stat-l{width:84px;flex:none;color:#4b5365;font-weight:600} .bx-stat-bar{flex:1;height:9px;background:#eef0f5;border-radius:5px;overflow:hidden} .bx-stat-bar i{display:block;height:100%;border-radius:5px;transition:width .25s} .bx-stat-v{width:34px;flex:none;text-align:right;font-weight:700;color:var(--ink)} .bx-move{padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px} .bx-move:last-child{border-bottom:none} .bx-abil{background:var(--soft);border-radius:10px;padding:10px 12px} .bx-abil b{font-size:14px} .bx-actions{display:flex;gap:10px;margin-top:18px;border-top:1px solid var(--line);padding-top:16px} /* ===== AI Builder — prompt immagine ===== */ .bx-prompt-card{margin-top:18px;border-top:1px solid var(--line);padding-top:14px} .bx-prompt-card h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:#6b7280} .bx-prompt{width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;color:#1c2230;background:#f7f8fc;border:1px solid var(--line);border-radius:10px;padding:12px 14px;resize:vertical} /* ===== AI Builder — immagine fronte/retro ===== */ .bx-art-card{margin-top:18px;border-top:1px solid var(--line);padding-top:14px} .bx-art-card h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:#6b7280} .bx-art-card input[type=file]{font-size:13px} .bx-art-pair{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap} .bx-art-pair figure{margin:0;text-align:center} .bx-art-pair img{width:240px;height:240px;object-fit:contain;background:repeating-conic-gradient(#eceef4 0% 25%,#fbfcff 0% 50%) 50%/18px 18px;border:1px solid var(--line);border-radius:10px;display:block} .bx-art-pair figcaption{font-size:12px;color:#6b7280;margin-top:4px;font-weight:700} /* ===== AI Builder — linea evolutiva multi-stadio ===== */ .bx-stage{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fbfcff} .bx-stage-h{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:14px} .bx-stage-h b{font-size:14px} .bx-line-head{font-weight:800;color:var(--ink);margin-bottom:12px;font-size:15px} .bx-card{margin-bottom:14px} /* ===== AI Builder — statistiche editabili + lore ===== */ .bx-stat-in{width:56px;flex:none;font-size:13px;font-weight:700;text-align:right;border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:#fff;color:var(--ink)} .bx-lore{width:100%;box-sizing:border-box;font-size:13px;line-height:1.5;border:1px solid var(--line);border-radius:10px;padding:10px 12px;resize:vertical;background:#fff;color:var(--ink);font-family:inherit} /* ===== AI Builder — selettore "stat migliori" ===== */ .bx-statpick{display:flex;flex-wrap:wrap;gap:6px} .bx-chip{font-size:12px;font-weight:700;padding:4px 11px;border-radius:14px;border:1px solid var(--line);background:#fff;color:#6b7280;cursor:pointer;transition:all .12s} .bx-chip:hover{border-color:var(--accent)} .bx-chip.on{background:var(--accent);border-color:var(--accent);color:#fff} /* riordino Animei (drag & drop) */ .ccard[draggable="true"]{cursor:grab} .ccard.dragging{opacity:.4;transform:none;cursor:grabbing} /* indicatore drop come box-shadow INSET: non viene tagliato da overflow:hidden */ .ccard.drop-before{box-shadow:inset 5px 0 0 0 #5b6cff,0 0 10px rgba(91,108,255,.55)} .ccard.drop-after{box-shadow:inset -5px 0 0 0 #5b6cff,0 0 10px rgba(91,108,255,.55)} /* ===== MONDO: editor mappe + esplorazione ===== */ .mondo{display:flex;flex-direction:column;gap:10px} .w-intro{background:#141a28;border:1px solid #232c40;border-radius:10px;padding:12px 14px;line-height:1.7;font-size:14px;color:#c7cde0} .mondo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#10131d;border:1px solid #232c40;border-radius:10px;padding:8px 10px} .mondo-bar .w-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#aeb4c6} .mondo-bar select,.mondo-bar input{background:#1a2030;border:1px solid #2c3650;color:#e8ebf4;border-radius:7px;padding:5px 8px;font-size:13px} .w-file{display:inline-flex;align-items:center;gap:6px;background:#2f3ce0;color:#fff;font-weight:600;font-size:13px;padding:7px 12px;border-radius:8px;cursor:pointer} .w-file:hover{background:#3a47f0} .w-div{width:1px;height:22px;background:#2c3650;margin:0 2px} .w-chip{display:inline-flex;align-items:center;gap:6px;background:#1d2740;border:1px solid #2c3650;color:#9fb0e0;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px} .mondo-tools{display:flex;flex-wrap:wrap;gap:6px} .w-tool{background:#1a2030;border:1px solid #2c3650;color:#cfd4e4;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer} .w-tool:hover{border-color:#4654c0} .w-tool.on{background:#2f3ce0;border-color:#2f3ce0;color:#fff} .mondo-main{display:flex;gap:10px;align-items:flex-start} .mondo-pal{flex:0 0 auto;width:260px;max-height:620px;overflow:auto;background:#0d1119;border:1px solid #232c40;border-radius:10px;padding:6px} .mondo-pal #wPal{display:block;cursor:pointer;image-rendering:pixelated} .w-palempty{color:#69708a;font-size:13px;text-align:center;padding:40px 10px;line-height:1.6} .w-prefabs{display:flex;flex-direction:column;gap:8px;padding:4px} .w-prefab{display:flex;flex-direction:column;align-items:center;gap:5px;background:#141a28;border:1px solid #2c3650;border-radius:10px;padding:8px 6px;cursor:pointer} .w-prefab:hover{border-color:#4654c0} .w-prefab.on{border-color:#2f3ce0;box-shadow:0 0 0 2px rgba(47,60,224,.4)} .w-prefab canvas{image-rendering:pixelated;max-width:100%} .w-prefab span{font-size:12px;color:#cfd4e4;font-weight:600} .mondo-canvaswrap{flex:1;max-height:620px;overflow:auto;background:#0a0d14;border:1px solid #232c40;border-radius:10px;padding:6px} .mondo-canvaswrap #wCanvas{display:block;cursor:crosshair;image-rendering:pixelated} /* NB: il blur va su ::before (non su .wplay-ov) altrimenti un backdrop-filter sull'antenato impedisce alle tendine native dei