.gear-name{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}.gear-name small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.gear-comparison{display:grid;grid-template-columns:1fr 18px 1fr;gap:3px;align-items:center}.gear-state{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;gap:3px 6px;align-items:center;padding:6px;border:1px solid #d0e4ed;border-radius:12px;background:#f2f7fa}.gear-state.target{background:#e6f8ff;border-color:#79cae8}.gear-state>small{grid-column:1/-1;font-size:8px;font-weight:900;letter-spacing:.1em;color:#6b8193}.gear-state>b{font-size:9px;line-height:1.15}.gear-state .gear-icon{width:40px;height:40px;font-size:19px}.gear-arrow{text-align:center;color:#1487b6;font-weight:950}.charm-wrap{display:flex;align-items:center;gap:3px}.charm-wrap small{font-size:9px}.charm-wrap .charm{display:block;width:14px;height:14px} @media(max-width:1000px){.gear-state{grid-template-columns:1fr;text-align:center}.gear-state>small{grid-column:1}.gear-state .gear-icon{margin:auto}} @media(max-width:800px){.chief-layout{display:grid;grid-template-columns:minmax(105px,1fr) minmax(125px,180px) minmax(105px,1fr);align-items:center;min-height:470px;padding:8px}.chief-figure{order:initial;width:auto;height:430px}.gear-column{width:auto;grid-template-columns:1fr;gap:10px}} @media(max-width:620px){.chief-layout{grid-template-columns:minmax(92px,1fr) 120px minmax(92px,1fr);min-height:390px}.chief-figure{height:350px}.gear-column{grid-template-columns:1fr}.gear-state{grid-template-columns:40px 1fr;text-align:left}.gear-state>small{grid-column:1/-1}.gear-state .gear-icon{margin:0}} /* Écran principal épuré : une seule case actuelle, la comparaison reste dans la fenêtre. */.gear-current small,.gear-current strong,.gear-current b{display:block}.gear-current small{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#74889a}.gear-current strong{font-size:13px}.gear-current b{font-size:10px;color:#147ca7;margin-top:2px}.edit-hint{grid-column:1/-1;text-align:center;font-size:8px;color:#6e8293;border-top:1px solid #dbe9ef;padding-top:6px}.edit-hint b{color:#1485b4} @media(max-width:620px){.gear-current small{display:none}.edit-hint{font-size:0}.edit-hint b{font-size:7px}} .dialog-compare{display:grid;grid-template-columns:1fr 28px 1fr;gap:8px;align-items:center;margin:20px 0}.dialog-compare label{display:grid;gap:8px;text-align:center;padding:12px;background:#eef6f9;border:1px solid #d2e5ed;border-radius:18px}.dialog-compare label:last-child{background:#e5f8ff;border-color:#81d1ec}.dialog-compare label>small{font-size:9px;font-weight:900;letter-spacing:.12em;color:#667e91}.dialog-compare .gear-preview{margin:0 auto;width:76px;height:76px;font-size:38px}.dialog-compare select{width:100%;padding:10px 7px;border:1px solid #b8d7e4;border-radius:10px;background:#fff}.dialog-arrow{text-align:center;font-size:24px;color:#1688b7;font-weight:950} /* Composition WOS : personnage dominant, cases d'items sans libellé. */ .chief-layout{grid-template-columns:minmax(120px,1fr) minmax(400px,500px) minmax(120px,1fr)}.chief-figure{height:650px}.chief-figure img{max-height:640px} @media(max-width:900px){.chief-layout{grid-template-columns:minmax(92px,1fr) minmax(260px,390px) minmax(92px,1fr)}.chief-figure{height:560px}.chief-figure img{max-height:550px}} @media(max-width:620px){.chief-layout{grid-template-columns:82px minmax(150px,1fr) 82px;min-height:470px}.chief-figure{height:470px}.chief-figure img{max-height:460px}} /* Couronne d'équipements inspirée de la composition du profil en jeu. */ .chief-layout{position:relative;display:flex;justify-content:center;align-items:center}.chief-layout .gear-column{position:absolute;inset:0;display:block;z-index:3;pointer-events:none}.chief-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.chief-tool-tab{display:grid;grid-template-columns:45px 1fr;grid-template-rows:auto auto;text-align:left;align-items:center;padding:17px;border:1px solid #c8e0ea;border-radius:18px;background:rgba(255,255,255,.78);color:#244c63;cursor:pointer}.chief-tool-tab>span{grid-row:1/3;font-size:27px}.chief-tool-tab b,.chief-tool-tab small{display:block}.chief-tool-tab small{color:#718698}.chief-tool-tab.active{background:#0d6f9f;color:#fff;border-color:#0d6f9f}.chief-tool-tab.active small{color:#c9edfa}.chief-tool-panel{display:none}.chief-tool-panel.active{display:block}.upgrade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}.upgrade-icon{width:50px;height:50px;display:grid;place-items:center;font-size:25px;border-radius:13px;background:linear-gradient(145deg,#fa775f,#8b1645);border:2px solid #ffd6aa}.charm-goals{grid-template-columns:55px 1fr repeat(3,minmax(75px,1fr))}.charm-goals label span{display:flex;align-items:center;gap:5px}.charm-goals .charm{width:13px;height:13px}.profile-dialog-note{color:#62788a} @media(max-width:800px){.upgrade-grid{grid-template-columns:1fr}.charm-goals{grid-template-columns:48px 1fr repeat(3,minmax(60px,1fr))}} @media(max-width:560px){.chief-tools{grid-template-columns:1fr}.charm-goals{grid-template-columns:42px 1fr;gap:7px}.charm-goals label{grid-column:span 1}} .chief-dedicated{max-width:1080px}.dedicated-summary{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:13px;padding:17px 20px;margin-bottom:14px;background:linear-gradient(110deg,rgba(237,250,255,.96),rgba(216,241,250,.92))}.dedicated-summary>span{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#fff;font-size:25px}.dedicated-summary small,.dedicated-summary b{display:block}.dedicated-summary small{font-size:9px;letter-spacing:.11em;color:#688092}.dedicated-summary button{border:1px solid #9dcbdc;background:#fff;color:#117aa7;border-radius:11px;padding:10px 13px;cursor:pointer}.chief-dedicated .upgrade-grid{margin-top:0}.chief-dedicated .result{position:static;z-index:auto;box-shadow:var(--shadow);margin-top:18px} @media(max-width:620px){.dedicated-summary{grid-template-columns:45px 1fr}.dedicated-summary button{grid-column:1/-1}.chief-dedicated .charm-goals{grid-template-columns:40px 1fr}.chief-dedicated .result{position:static}} /* Pages d'amélioration en couronne avec sélection centrale. */ .chief-dedicated .upgrade-grid{display:block}.upgrade-orbit{position:relative;height:680px;max-width:820px;margin:18px auto;border-radius:34px;background:radial-gradient(circle at center,#fafdff 0 24%,#e1f5fb 25% 43%,#c7e4ef 44% 60%,transparent 61%);border:1px solid #c7e1ec;box-shadow:var(--shadow);overflow:hidden}.orbit-node{position:absolute;left:calc(50% - 47px);top:calc(50% - 47px);width:94px;height:94px;border:3px solid #fff;border-radius:22px;background:#eff8fb;box-shadow:0 8px 22px rgba(5,38,64,.2);cursor:pointer;z-index:2;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-260px) rotate(calc(-360deg / var(--count) * var(--i)));transition:border-color .2s,box-shadow .2s,scale .2s}.orbit-node:hover,.orbit-node.selected{border-color:#20aeda;box-shadow:0 0 0 5px rgba(32,174,218,.18),0 10px 25px rgba(5,38,64,.2);scale:1.08}.orbit-node>span{display:grid;place-items:center;width:54px;height:54px;margin:auto;border-radius:14px;background:linear-gradient(145deg,#fa775f,#8b1645);font-size:28px;border:2px solid #ffd6aa}.orbit-node>small{display:block;margin-top:4px;font-size:8px;color:#5f7485}.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:310px;min-height:320px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.96);border:2px solid #c5e2ed;border-radius:50%;box-shadow:0 18px 55px rgba(7,46,73,.2);z-index:1}.orbit-center h2{margin:8px 0 16px}.center-item{display:grid;place-items:center;width:90px;height:90px;border-radius:24px;background:linear-gradient(145deg,#fa775f,#8b1645);border:4px solid #ffd6aa;font-size:44px}.center-levels{display:grid;grid-template-columns:1fr 20px 1fr;align-items:end;gap:8px;width:100%}.center-levels>div,.center-levels>label{padding:9px;background:#edf6fa;border-radius:12px}.center-levels small,.center-levels b{display:block}.center-levels small{font-size:8px;color:#6d8293;letter-spacing:.09em}.center-levels select,.center-levels input{width:100%;margin-top:5px;padding:8px 5px;border:1px solid #afd4e2;border-radius:8px;background:#fff}.charm-node .charm{display:block;width:27px;height:27px;margin:2px auto 5px;background:var(--node-color);border-width:3px}.charm-node>small{font-weight:900;font-size:9px}.charm-center{background:#eef8fb;border-color:#fff}.charm-center .charm{display:block;width:45px;height:45px;background:var(--node-color);border-width:4px} @media(max-width:760px){.upgrade-orbit{height:540px;border-radius:24px}.orbit-node{left:calc(50% - 36px);top:calc(50% - 36px);width:72px;height:72px;border-radius:17px;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-205px) rotate(calc(-360deg / var(--count) * var(--i)))}.orbit-node>span{width:42px;height:42px;font-size:22px}.orbit-center{width:245px;min-height:265px;padding:17px 13px}.center-item{width:67px;height:67px;font-size:33px}.orbit-center h2{font-size:20px}.charm-node .charm{width:20px;height:20px;margin-bottom:2px}} @media(max-width:520px){.upgrade-orbit{height:470px;margin-inline:-5px}.orbit-node{left:calc(50% - 31px);top:calc(50% - 31px);width:62px;height:62px;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-180px) rotate(calc(-360deg / var(--count) * var(--i)))}.orbit-node>span{width:36px;height:36px;font-size:19px}.orbit-node>small{display:none}.orbit-center{width:210px;min-height:230px}.center-levels{font-size:11px}.charm-node .charm{width:17px;height:17px}.charm-node>small{font-size:7px}} /* Chaque position affiche l'état actuel puis sa propre case + pour l'objectif. */ .orbit-pair{position:absolute;left:calc(50% - 80px);top:calc(50% - 47px);width:160px;height:94px;display:flex;align-items:center;justify-content:center;gap:5px;z-index:2;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-265px) rotate(calc(-360deg / var(--count) * var(--i)))}.orbit-pair .orbit-node{position:static;left:auto;top:auto;width:92px;height:92px;transform:none;cursor:default}.orbit-pair .orbit-node:hover{scale:1;border-color:#fff;box-shadow:0 8px 22px rgba(5,38,64,.2)}.orbit-add{width:58px;height:76px;border:2px dashed #5cc4e6;border-radius:17px;background:rgba(236,250,255,.96);color:#1285b4;cursor:pointer;box-shadow:0 6px 16px rgba(6,53,81,.14)}.orbit-add>span{display:block;font-size:28px;font-weight:700;line-height:1}.orbit-add>small{display:block;margin-top:6px;font-size:7px;color:#58798a}.orbit-add:hover,.orbit-pair.selected .orbit-add{border-style:solid;background:#fff;box-shadow:0 0 0 5px rgba(32,174,218,.18)}.charm-pair{left:calc(50% - 48px);top:calc(50% - 30px);width:96px;height:60px;gap:3px;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-335px) rotate(calc(-360deg / var(--count) * var(--i)))}.charm-pair .orbit-node{position:static;left:auto;top:auto;width:58px;height:58px;transform:none}.charm-add{width:34px;height:48px;border-radius:12px}.charm-add>span{font-size:20px}.charm-add>small{font-size:7px;margin-top:2px} @media(max-width:760px){.orbit-pair{left:calc(50% - 61px);top:calc(50% - 36px);width:122px;height:72px;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-210px) rotate(calc(-360deg / var(--count) * var(--i)))}.orbit-pair .orbit-node{width:70px;height:70px}.orbit-add{width:45px;height:61px}.charm-pair{left:calc(50% - 39px);top:calc(50% - 24px);width:78px;height:48px;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-275px) rotate(calc(-360deg / var(--count) * var(--i)))}.charm-pair .orbit-node{width:46px;height:46px}.charm-add{width:28px;height:40px}} @media(max-width:520px){.orbit-pair{left:calc(50% - 52px);top:calc(50% - 31px);width:104px;height:62px;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-183px) rotate(calc(-360deg / var(--count) * var(--i)))}.orbit-pair .orbit-node{width:60px;height:60px}.orbit-add{width:38px;height:51px;padding:1px}.orbit-add>span{font-size:22px}.charm-pair{left:calc(50% - 32px);top:calc(50% - 20px);width:64px;height:40px;transform:rotate(calc(360deg / var(--count) * var(--i))) translateY(-238px) rotate(calc(-360deg / var(--count) * var(--i)))}.charm-pair .orbit-node{width:38px;height:38px}.charm-add{width:23px;height:34px;border-radius:9px}.charm-add>span{font-size:17px}.charm-add>small{font-size:6px}} .direct-target{position:relative;display:grid;place-items:center}.direct-target select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.direct-target:focus-within{border-style:solid;background:#fff;box-shadow:0 0 0 5px rgba(32,174,218,.2)}.orbit-current{font:inherit}.current-center{min-width:170px;padding:12px 16px;background:#edf6fa;border:1px solid #cce3ec;border-radius:14px}.current-center small,.current-center b{display:block}.current-center small{font-size:8px;letter-spacing:.1em;color:#708596}.current-center b{margin-top:4px;color:#174f6a}.center-help{max-width:220px;margin:14px 0 0;color:#698091;font-size:11px;line-height:1.4}.center-help b{color:#1184b3} .orbit-pair{left:calc(50% - 95px);width:190px;gap:4px}.orbit-chevron{font-style:normal;font-size:25px;font-weight:900;color:#1a87b4}.target-item{width:72px;height:86px;border-style:solid}.target-item>span{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;font-size:25px}.skin-epic{--skin-a:#9565db;--skin-b:#54238e}.skin-mythic{--skin-a:#ffc554;--skin-b:#aa5d0c}.skin-red{--skin-a:#ff7764;--skin-b:#8c1737}.skin-gold{--skin-a:#ffe77a;--skin-b:#b77812}.skin-frost{--skin-a:#8fe9ff;--skin-b:#217abb}.orbit-current[class*="skin-"],.target-item[class*="skin-"],.center-item[class*="skin-"]{border-color:var(--skin-a);background:linear-gradient(145deg,color-mix(in srgb,var(--skin-a) 28%,white),var(--skin-b))}.target-item[class*="skin-"]>span{background:linear-gradient(145deg,var(--skin-a),var(--skin-b));border:2px solid rgba(255,255,255,.75)}.charm-pair{left:calc(50% - 54px);width:108px;gap:2px}.charm-pair .orbit-chevron{font-size:15px}.target-charm{border-style:solid}.target-charm .charm{display:block;width:24px;height:24px;background:var(--node-color)}.charm-skin{filter:saturate(calc(.7 + var(--skin-level,1)*.03));box-shadow:0 0 calc(3px + var(--skin-level,1)*.35px) color-mix(in srgb,var(--node-color) 70%,white)} @media(max-width:760px){.orbit-pair{left:calc(50% - 72px);width:144px}.target-item{width:54px;height:65px}.target-item>span{width:36px;height:36px;font-size:20px}.charm-pair{left:calc(50% - 43px);width:86px}} @media(max-width:520px){.orbit-pair{left:calc(50% - 61px);width:122px}.target-item{width:45px;height:55px}.target-item>span{width:31px;height:31px;font-size:17px}.orbit-chevron{font-size:18px}.charm-pair{left:calc(50% - 36px);width:72px}.target-charm .charm{width:16px;height:16px}} .home .module-grid{grid-template-columns:repeat(2,1fr)} @media(max-width:800px){.home .module-grid{grid-template-columns:1fr}} /* Disposition fidèle au jeu : chaque paire de troupe se fait face. */ .gear-orbit{height:700px}.gear-orbit .orbit-pair{transform:none;left:auto;top:auto}.gear-orbit .orbit-pair:nth-child(1){left:6%;top:8%}.gear-orbit .orbit-pair:nth-child(4){right:6%;top:8%}.gear-orbit .orbit-pair:nth-child(2){left:1%;top:39%}.gear-orbit .orbit-pair:nth-child(5){right:1%;top:39%}.gear-orbit .orbit-pair:nth-child(3){left:8%;top:70%}.gear-orbit .orbit-pair:nth-child(6){right:8%;top:70%}.level-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px;max-height:55vh;overflow:auto}.level-choice{border:1px solid #c4dce6;background:#eef7fa;color:#385b6e;padding:11px 8px;border-radius:11px;cursor:pointer}.level-choice:hover,.level-choice.active{background:#1588b8;color:#fff;border-color:#1588b8} @media(max-width:760px){.gear-orbit{height:580px}.gear-orbit .orbit-pair:nth-child(1){left:1%;top:7%}.gear-orbit .orbit-pair:nth-child(4){right:1%;top:7%}.gear-orbit .orbit-pair:nth-child(2){left:-2%;top:39%}.gear-orbit .orbit-pair:nth-child(5){right:-2%;top:39%}.gear-orbit .orbit-pair:nth-child(3){left:2%;top:71%}.gear-orbit .orbit-pair:nth-child(6){right:2%;top:71%}} @media(max-width:520px){.gear-orbit{height:500px}.gear-orbit .orbit-pair:nth-child(1){left:-3%;top:5%}.gear-orbit .orbit-pair:nth-child(4){right:-3%;top:5%}.gear-orbit .orbit-pair:nth-child(2){left:-7%;top:39%}.gear-orbit .orbit-pair:nth-child(5){right:-7%;top:39%}.gear-orbit .orbit-pair:nth-child(3){left:-2%;top:73%}.gear-orbit .orbit-pair:nth-child(6){right:-2%;top:73%}.level-picker-grid{grid-template-columns:repeat(2,1fr)}} /* Sélecteur visuel des niveaux et sous-étapes de talismans. */ #levelPicker.charm-level-picker{max-width:720px;background:linear-gradient(180deg,#f4fcff,#d9eef7)} .charm-level-picker .level-picker-grid{grid-template-columns:repeat(5,minmax(92px,1fr));gap:10px;padding:3px;max-height:65vh} .charm-level-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:138px;padding:8px 7px 10px;background:linear-gradient(145deg,#fff,#dcecf3);border:2px solid #b7d6e3;box-shadow:0 5px 12px rgba(5,47,76,.13)} .charm-level-choice .picker-charm-visual{display:block;width:78px;height:78px;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 5px 5px rgba(3,35,61,.28))} .charm-level-choice b{margin:2px 0 6px;font-size:11px;color:#174c69} .charm-level-choice .charm-progress{width:64px;height:6px;margin:0} .charm-level-choice:hover,.charm-level-choice.active{background:linear-gradient(145deg,#fff,#c9f2ff);border-color:#24b8e6;color:inherit;box-shadow:0 0 0 3px rgba(36,184,230,.2),0 7px 16px rgba(5,47,76,.2)} .charm-level-choice.active b{color:#08759f} .select-all-charms{display:flex;align-items:center;gap:9px;width:max-content;margin:14px 0 2px;padding:9px 13px;border:1px solid #acd4e4;border-radius:11px;background:#e8f7fc;color:#174c69;font-weight:800;cursor:pointer} .select-all-charms[hidden]{display:none}.select-all-charms input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.charm-level-choice:disabled{opacity:.35;filter:grayscale(.55);cursor:not-allowed;box-shadow:none} .charm-bulk-select{ position:relative; margin:18px 0 10px max(0px,calc((100% - 900px)/2)); background:rgba(22,71,111,.88); border-color:rgba(131,203,240,.42); color:#fff; box-shadow:inset 0 1px rgba(255,255,255,.12),0 5px 14px rgba(1,22,48,.22); } .charm-bulk-select .bulk-toggle{position:relative;display:inline-block;width:48px;height:27px;flex:0 0 48px;border:1px solid rgba(153,220,249,.48);border-radius:999px;background:linear-gradient(180deg,#315f82,#234767);box-shadow:inset 0 2px 5px rgba(1,24,48,.42),0 1px rgba(255,255,255,.14);transition:background .2s,border-color .2s,box-shadow .2s} .charm-bulk-select .bulk-toggle i{position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:linear-gradient(180deg,#fff,#d9eff8);box-shadow:0 2px 5px rgba(1,23,45,.42);transition:transform .2s} .charm-bulk-select input:checked+.bulk-toggle{border-color:#8fe5ff;background:linear-gradient(180deg,#5bc7e9,#2d91bd);box-shadow:inset 0 1px rgba(255,255,255,.4),0 0 9px rgba(89,207,246,.45)} .charm-bulk-select input:checked+.bulk-toggle i{transform:translateX(21px)} .charm-bulk-select input:focus-visible+.bulk-toggle{outline:2px solid #fff4a8;outline-offset:3px} @media(max-width:600px){.charm-level-picker .level-picker-grid{grid-template-columns:repeat(3,minmax(82px,1fr));gap:7px}.charm-level-choice{min-height:122px}.charm-level-choice .picker-charm-visual{width:66px;height:66px}} /* L'objectif domine visuellement et l'item remplit directement son cadre. */ .gear-orbit .orbit-pair{height:104px;align-items:center}.gear-orbit .orbit-current{width:76px;height:76px;opacity:.82;border-width:2px}.gear-orbit .target-item{width:100px;height:100px;border-width:4px;opacity:1}.gear-orbit .orbit-node>span,.gear-orbit .target-item>span{width:100%;height:calc(100% - 18px);margin:0;background:transparent;border:0;border-radius:0;font-size:44px;display:grid;place-items:center;filter:drop-shadow(0 5px 5px rgba(20,25,35,.28))}.gear-orbit .orbit-node>small,.gear-orbit .target-item>small{height:18px;margin:0;font-size:8px;font-weight:900;color:#fff;text-shadow:0 1px 3px #123}.gear-orbit .target-item:hover,.gear-orbit .target-item:focus{scale:1.06;box-shadow:0 0 0 5px rgba(43,196,239,.2),0 12px 28px rgba(4,38,62,.28)}.charm-pair .orbit-current{width:46px;height:46px;opacity:.82}.charm-pair .target-charm{width:58px;height:58px;border-width:3px}.charm-pair .target-charm .charm{width:31px;height:31px} @media(max-width:760px){.gear-orbit .orbit-pair{height:82px}.gear-orbit .orbit-current{width:60px;height:60px}.gear-orbit .target-item{width:78px;height:78px}.gear-orbit .orbit-node>span,.gear-orbit .target-item>span{height:calc(100% - 15px);font-size:34px}.gear-orbit .orbit-node>small,.gear-orbit .target-item>small{height:15px;font-size:7px}.charm-pair .orbit-current{width:38px;height:38px}.charm-pair .target-charm{width:48px;height:48px}.charm-pair .target-charm .charm{width:25px;height:25px}} @media(max-width:520px){.gear-orbit .orbit-pair{height:68px}.gear-orbit .orbit-current{width:50px;height:50px}.gear-orbit .target-item{width:64px;height:64px}.gear-orbit .orbit-node>span,.gear-orbit .target-item>span{height:calc(100% - 13px);font-size:28px}.gear-orbit .orbit-node>small,.gear-orbit .target-item>small{height:13px;font-size:6px}.charm-pair .orbit-current{width:32px;height:32px}.charm-pair .target-charm{width:40px;height:40px}.charm-pair .target-charm .charm{width:21px;height:21px}} .gear-orbit .orbit-pair{left:calc(50% - 108px);width:216px}.charm-pair{left:calc(50% - 62px);width:124px} @media(max-width:760px){.gear-orbit .orbit-pair{left:calc(50% - 84px);width:168px}.charm-pair{left:calc(50% - 51px);width:102px}} @media(max-width:520px){.gear-orbit .orbit-pair{left:calc(50% - 70px);width:140px}.charm-pair{left:calc(50% - 43px);width:86px}} /* Les véritables skins porteront le rang : cadres volontairement neutres. */ .gear-orbit .orbit-current[class*="skin-"],.gear-orbit .target-item[class*="skin-"],.gear-orbit .center-item[class*="skin-"]{background:linear-gradient(145deg,#f8fcfe,#dbeaf1);border-color:#fff;color:#173f56}.gear-orbit .target-item[class*="skin-"]{border-color:#65c8e8;background:linear-gradient(145deg,#fff,#dff6fd)}.gear-orbit .target-item[class*="skin-"]>span{background:transparent;border:0}.gear-orbit .orbit-node>small,.gear-orbit .target-item>small{color:#385c70;text-shadow:none} /* Les deux cases de chaque paire sont modifiables : le curseur et le survol doivent donc communiquer la même affordance de clic. */ .orbit-pair .orbit-current, .orbit-pair .orbit-add{ cursor:pointer; } .orbit-pair .orbit-current:hover, .orbit-pair .orbit-current:focus-visible{ scale:1.05; border-color:#42bfe7; box-shadow:0 0 0 4px rgba(32,174,218,.18),0 10px 24px rgba(5,38,64,.24); outline:none; } /* Variante visuelle inspirée de l'écran d'équipement du jeu. */ #chief-gear{ max-width:none; background: radial-gradient(ellipse 58% 58% at 50% 43%,rgba(142,229,255,.38) 0,rgba(79,180,222,.22) 42%,transparent 78%), linear-gradient(180deg,#184d7d 0,#236b9b 38%,#16476f 100%); color:#fff; } #chief-gear h1, #chief-gear h2, #chief-gear button, #chief-gear strong, #chief-gear .orbit-node small, #chief-gear .target-item small{ font-family:var(--site-font); letter-spacing:.01em; } #chief-gear .section-head{position:relative;max-width:1240px;margin-inline:auto;justify-content:center;text-align:center;padding-inline:64px} #chief-gear .section-head>.back{position:absolute;left:0;top:4px} #chief-gear .section-head>div{max-width:760px;margin-inline:auto} #chief-gear .section-head p:last-child{color:#d4efff} #chief-gear .section-head .eyebrow{color:#80dcff} #chief-gear .back{background:#8edfff;border-color:#d8f7ff;color:#15557e;box-shadow:0 5px 0 #397faa} #chief-gear .gear-orbit{ max-width:1120px; margin-inline:auto; border-color:rgba(183,232,255,.34); background:radial-gradient(ellipse 58% 62% at 50% 48%,rgba(197,246,255,.34),rgba(78,174,215,.14) 45%,rgba(7,39,78,.28) 82%); box-shadow:inset 0 0 105px rgba(2,35,72,.3),0 18px 50px rgba(3,27,56,.25); } #chief-gear .orbit-center{background:transparent;border-color:transparent;box-shadow:none;color:#eefaff;text-shadow:0 2px 4px rgba(4,42,72,.55)} #chief-gear .orbit-center .center-item{box-shadow:0 12px 30px rgba(5,48,77,.3),0 0 28px rgba(185,242,255,.32)} #chief-gear .orbit-center .current-center{background:rgba(227,248,255,.88);border-color:rgba(255,255,255,.72);text-shadow:none} #chief-gear #chiefResult{ max-width:900px; margin:18px auto 0; padding:14px 18px 20px; background:rgba(8,43,79,.9); border:2px solid rgba(131,203,240,.46); border-radius:26px; box-shadow:inset 0 1px rgba(255,255,255,.18),0 14px 35px rgba(1,22,48,.36); } #chief-gear #chiefResult h2{margin:0 0 14px;padding:9px;text-align:center;border-radius:16px;background:linear-gradient(#4b8dc3,#3977ae);color:#fff;font-size:20px;text-shadow:0 2px 2px #16466d} .upgrade-cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .upgrade-resource{text-align:center;min-width:0} .resource-item{display:grid;place-items:center;width:76px;height:76px;margin:auto;border:3px solid #86c9f3;border-radius:17px;background:linear-gradient(145deg,#eafaff,#3995cf);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 6px 12px rgba(0,15,39,.35);font-size:36px;color:#fff;text-shadow:0 2px 3px #173b61} .upgrade-resource-polish .resource-item{border-color:#c59bf4;background:linear-gradient(145deg,#f0dcff,#7250b9)} .upgrade-resource-plans .resource-item,.upgrade-resource-amber .resource-item{border-color:#f4a56e;background:linear-gradient(145deg,#ffe2ad,#a95724)} .upgrade-resource strong{display:block;margin-top:8px;color:#fff;font-size:18px} .upgrade-resource small{display:block;margin-top:3px;color:#a9d7ef;font-size:10px} .upgrade-resource small{display:none} @media(max-width:600px){.upgrade-cost-grid{gap:8px}.resource-item{width:58px;height:58px;border-radius:13px;font-size:27px}.upgrade-resource strong{font-size:13px}.upgrade-resource small{font-size:8px}} /* Règle finale et unique pour l'écran Équipement, calée sur la capture WOS. */ .gear-orbit{height:720px;overflow:hidden}.gear-orbit .orbit-center{width:270px;min-height:300px}.gear-orbit .orbit-pair{position:absolute;transform:none!important;width:210px;height:104px;top:auto;right:auto;bottom:auto;left:auto;display:flex;gap:5px;align-items:center;justify-content:center;transition:left .25s,right .25s,top .25s}.gear-orbit .orbit-pair:nth-child(1){left:68px;right:auto;top:48px}.gear-orbit .orbit-pair:nth-child(4){left:auto;right:68px;top:48px}.gear-orbit .orbit-pair:nth-child(2){left:18px;right:auto;top:292px}.gear-orbit .orbit-pair:nth-child(5){left:auto;right:18px;top:292px}.gear-orbit .orbit-pair:nth-child(3){left:68px;right:auto;top:536px}.gear-orbit .orbit-pair:nth-child(6){left:auto;right:68px;top:536px} @media(max-width:760px){.gear-orbit{height:610px}.gear-orbit .orbit-center{width:220px;min-height:260px}.gear-orbit .orbit-pair{width:164px;height:82px}.gear-orbit .orbit-pair:nth-child(1){left:28px;right:auto;top:36px}.gear-orbit .orbit-pair:nth-child(4){left:auto;right:28px;top:36px}.gear-orbit .orbit-pair:nth-child(2){left:0;right:auto;top:264px}.gear-orbit .orbit-pair:nth-child(5){left:auto;right:0;top:264px}.gear-orbit .orbit-pair:nth-child(3){left:28px;right:auto;top:492px}.gear-orbit .orbit-pair:nth-child(6){left:auto;right:28px;top:492px}} @media(max-width:520px){.gear-orbit{height:520px}.gear-orbit .orbit-center{width:150px;min-height:210px;padding:12px 8px}.gear-orbit .orbit-center .center-item{width:56px;height:56px;font-size:28px}.gear-orbit .orbit-center h2{font-size:16px;margin:5px}.gear-orbit .center-help{display:none}.gear-orbit .current-center{min-width:125px;padding:8px}.gear-orbit .orbit-pair{width:132px;height:68px;gap:2px}.gear-orbit .orbit-pair:nth-child(1){left:8px;right:auto;top:24px}.gear-orbit .orbit-pair:nth-child(4){left:auto;right:8px;top:24px}.gear-orbit .orbit-pair:nth-child(2){left:-8px;right:auto;top:226px}.gear-orbit .orbit-pair:nth-child(5){left:auto;right:-8px;top:226px}.gear-orbit .orbit-pair:nth-child(3){left:8px;right:auto;top:428px}.gear-orbit .orbit-pair:nth-child(6){left:auto;right:8px;top:428px}} /* Contraste du contenu central sur la DA bleue. Placé en fin de fichier pour primer sur les couleurs historiques prévues pour le thème clair. */ #chief-gear .gear-orbit .orbit-center>.eyebrow{ color:#fff!important; font-size:14px; font-weight:950; text-shadow:0 2px 5px rgba(2,35,65,.95); } /* Centre Équipement : visuel détouré seul, sans libellé ni case. */ #chief-gear .gear-orbit .orbit-center{ width:340px; min-height:340px; padding:0; background:transparent; border:0; box-shadow:none; pointer-events:none; } #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{ display:grid; place-items:center; width:300px; height:300px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; animation:gear-center-float 3.6s ease-in-out infinite; will-change:transform; } #chief-gear .gear-orbit .gear-center-item .gear-skin-p6{ width:100%; height:100%; margin:0; object-fit:contain; filter:drop-shadow(0 16px 12px rgba(2,25,55,.42)) drop-shadow(0 0 18px rgba(154,231,255,.32)); } @keyframes gear-center-float{ 0%,100%{transform:translateY(-7px) rotate(-1deg)} 50%{transform:translateY(9px) rotate(1deg)} } @media(max-width:760px){ #chief-gear .gear-orbit .orbit-center{width:270px;min-height:270px} #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{width:240px;height:240px} } @media(max-width:520px){ #chief-gear .gear-orbit .orbit-center{width:210px;min-height:210px;padding:0} #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{width:190px;height:190px} } @media(prefers-reduced-motion:reduce){ #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{animation:none} } #chief-gear .gear-orbit .center-help{ color:#fff!important; padding:7px 11px; border-radius:12px; background:rgba(5,48,82,.42); font-weight:700; text-shadow:0 1px 4px rgba(2,25,50,.95); } #chief-gear .gear-orbit .center-help b{color:#fff!important} /* Talismans : sélection d'une pièce puis édition de ses trois talismans. */ #chief-charms .charm-upgrade-grid{display:block} .charm-workspace{position:relative;max-width:1120px;height:720px;margin:auto;border:1px solid #b8ddeb;border-radius:30px;overflow:hidden;background:radial-gradient(circle at 50% 46%,#c6f4ff 0,#80cce8 30%,#2875a5 72%,#164b78 100%);box-shadow:inset 0 0 90px rgba(4,39,73,.3),0 18px 50px rgba(4,42,71,.2)} .charm-gear-selector{position:absolute;width:112px;height:130px;padding:8px;border:3px solid rgba(255,255,255,.8);border-radius:24px;background:linear-gradient(145deg,#f7fcff,#c8e0ec);color:#174c69;cursor:pointer;box-shadow:0 8px 20px rgba(4,39,70,.22);z-index:3;transition:transform .2s,border-color .2s,box-shadow .2s} .charm-gear-selector:hover,.charm-gear-selector.selected{transform:scale(1.06);border-color:var(--troop-color);box-shadow:0 0 0 5px color-mix(in srgb,var(--troop-color) 28%,transparent),0 10px 25px rgba(4,39,70,.3)} .charm-gear-selector>span{display:grid;place-items:center;height:72px;font-size:43px;filter:drop-shadow(0 5px 5px rgba(18,37,57,.24))} .charm-gear-selector>small{display:block;font-weight:900;font-size:10px} .charm-gear-selector>i{display:flex;justify-content:center;gap:4px;margin-top:7px;font-style:normal} .charm-gear-selector>i b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--troop-color);border:2px solid #fff;color:#123;font-size:8px} .charm-gear-selector:nth-child(1){left:65px;top:55px}.charm-gear-selector:nth-child(4){right:65px;top:49px}.charm-gear-selector:nth-child(2){left:20px;top:295px}.charm-gear-selector:nth-child(5){right:20px;top:289px}.charm-gear-selector:nth-child(3){left:65px;top:535px}.charm-gear-selector:nth-child(6){right:65px;top:529px} .charm-triad{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:510px;height:520px;color:#fff;text-align:center} .charm-triad:before{content:"";position:absolute;inset:92px 52px 48px;border:3px solid rgba(224,250,255,.48);border-radius:50%;clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 2px 3px rgba(6,66,98,.35))} .charm-triad>.eyebrow{margin:0;color:#eaffff;text-shadow:0 2px 4px #155579}.charm-triad>h2{margin:3px 0;text-shadow:0 2px 4px #155579} .triad-charm{position:absolute;width:184px}.triad-charm-1{left:163px;top:78px}.triad-charm-2{left:38px;top:336px}.triad-charm-3{right:38px;top:336px} .triad-charm>small{display:block;margin-bottom:6px;font-size:10px;font-weight:950;letter-spacing:.08em;text-shadow:0 2px 3px #155579} .triad-pair{display:flex;align-items:center;justify-content:center;gap:6px}.triad-pair>span{font-size:28px;font-weight:950;color:#eaffff;text-shadow:0 2px 3px #155579} .triad-level{display:grid;place-items:center;width:64px;height:70px;padding:6px;border:3px solid rgba(255,255,255,.8);border-radius:17px;background:linear-gradient(145deg,#f7fcff,#c6e5ef);cursor:pointer;box-shadow:0 6px 15px rgba(5,45,72,.24);transition:transform .2s,box-shadow .2s} .triad-level.target{width:77px;height:82px;border-color:var(--node-color);background:linear-gradient(145deg,#fff,#d9f6fd)} .triad-level:hover{transform:scale(1.07);box-shadow:0 0 0 5px rgba(255,255,255,.22),0 9px 22px rgba(5,45,72,.35)} .triad-level .charm{display:block;width:31px;height:31px;margin:0 0 4px;background:var(--node-color);border-width:3px} .triad-level.target .charm{width:38px;height:38px}.triad-level b{font-size:9px;color:#174c69} .charm-triad .triad-level{width:62px;height:74px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} .charm-triad .triad-level.target{width:72px;height:84px;background:transparent;border:0} .charm-triad .triad-level .charm{width:51px;height:51px;margin:0 auto 5px;transform:none;border-radius:50%;border:3px solid rgba(231,250,255,.95);outline:2px solid rgba(12,68,98,.62);background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.82) 0 7%,rgba(255,255,255,.18) 8% 22%,transparent 23%),radial-gradient(circle at 50% 58%,hsl(calc(205deg + var(--level) * 13deg) 88% 66%),hsl(calc(205deg + var(--level) * 13deg) 76% 42%) 72%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.14),inset 0 -7px 10px rgba(2,35,62,.2),0 5px 13px rgba(3,39,66,.34)} .charm-triad .triad-level.target .charm{width:62px;height:62px} .charm-triad .triad-level b{color:#fff;text-shadow:0 2px 3px rgba(3,39,66,.75)} .charm-triad .triad-level:hover{transform:scale(1.08);box-shadow:none} .charm-workspace .charm-gear-selector{height:142px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0} .charm-workspace .charm-gear-selector:hover,.charm-workspace .charm-gear-selector.selected{transform:scale(1.04);border:0;box-shadow:none} .charm-workspace .charm-gear-selector>span{position:relative;width:94px;height:94px;margin:auto;border:3px solid rgba(255,255,255,.88);border-radius:22px;background:linear-gradient(145deg,#f8fcff,#cbdfe9);box-shadow:0 8px 20px rgba(4,39,70,.25);transition:border-color .2s,box-shadow .2s} .charm-workspace .charm-gear-selector:hover>span,.charm-workspace .charm-gear-selector.selected>span{border-color:var(--troop-color);box-shadow:0 0 0 5px color-mix(in srgb,var(--troop-color) 30%,transparent),0 10px 24px rgba(4,39,70,.32)} .charm-workspace .charm-gear-selector>span>small{position:absolute;left:4px;right:4px;bottom:5px;display:block;font-size:8px;font-weight:950;color:#174c69} .charm-workspace .charm-gear-selector>i{height:29px;margin-top:7px;align-items:center} .charm-workspace .charm-gear-selector>i b{width:23px;height:23px;border:2px solid rgba(242,253,255,.95);outline:1px solid rgba(9,62,92,.55);background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.72) 0 8%,transparent 10%),hsl(calc(205deg + var(--level) * 13deg) 76% 52%);color:#fff;text-shadow:0 1px 2px rgba(2,29,51,.8);box-shadow:0 3px 7px rgba(3,35,61,.3)} .mini-charm{display:flex;flex-direction:column;align-items:center;gap:3px} .charm-progress{display:flex;width:54px;height:5px;gap:2px;margin-top:3px;font-style:normal} .charm-progress>span{flex:1;min-width:2px;border-radius:2px;background:rgba(8,56,84,.38);border:1px solid rgba(230,251,255,.55);box-shadow:inset 0 1px rgba(255,255,255,.16)} .charm-progress>span.filled{background:linear-gradient(#bdf66c,#55bd31);border-color:#eaffc8;box-shadow:0 0 5px rgba(116,237,73,.55)} .charm-progress.compact{width:24px;height:3px;gap:1px;margin-top:1px} .charm-progress.compact>span{min-width:1px;border-width:0} .charm-triad .triad-level{height:82px} .charm-triad .triad-level.target{height:92px} @media(max-width:760px){.charm-workspace{height:620px}.charm-gear-selector{width:86px;height:104px;border-radius:19px}.charm-gear-selector>span{height:55px;font-size:34px}.charm-gear-selector:nth-child(1){left:18px;top:35px}.charm-gear-selector:nth-child(4){right:18px;top:29px}.charm-gear-selector:nth-child(2){left:2px;top:258px}.charm-gear-selector:nth-child(5){right:2px;top:252px}.charm-gear-selector:nth-child(3){left:18px;top:481px}.charm-gear-selector:nth-child(6){right:18px;top:475px}.charm-triad{width:410px;height:470px}.triad-charm-1{left:100px;top:58px}.triad-charm-2{left:0;top:300px}.triad-charm-3{right:0;top:300px}.charm-triad:before{inset:80px 42px 42px}} @media(max-width:520px){.charm-workspace{height:560px;margin-inline:-5px}.charm-gear-selector{width:67px;height:84px;padding:5px;border-radius:16px}.charm-gear-selector>span{height:43px;font-size:27px}.charm-gear-selector>small{font-size:8px}.charm-gear-selector>i{gap:1px;margin-top:3px}.charm-gear-selector>i b{width:14px;height:14px;font-size:6px}.charm-gear-selector:nth-child(1){left:5px;top:25px}.charm-gear-selector:nth-child(4){right:5px;top:19px}.charm-gear-selector:nth-child(2){left:-2px;top:238px}.charm-gear-selector:nth-child(5){right:-2px;top:232px}.charm-gear-selector:nth-child(3){left:5px;top:451px}.charm-gear-selector:nth-child(6){right:5px;top:445px}.charm-triad{width:300px;height:430px}.charm-triad:before{inset:80px 27px 48px}.triad-charm{width:140px}.triad-charm-1{left:80px;top:60px}.triad-charm-2{left:-10px;top:278px}.triad-charm-3{right:-10px;top:278px}.triad-level{width:57px;height:64px;border-radius:15px}.triad-level.target{width:68px;height:74px}.triad-level .charm{width:27px;height:27px}.triad-level.target .charm{width:33px;height:33px}.triad-level b{font-size:8px}} @media(max-width:760px){.charm-workspace .charm-gear-selector{height:116px}.charm-workspace .charm-gear-selector>span{width:74px;height:74px;font-size:34px;border-radius:18px}.charm-workspace .charm-gear-selector>i b{width:19px;height:19px;font-size:7px}} @media(max-width:520px){.charm-workspace .charm-gear-selector{height:94px;padding:0}.charm-workspace .charm-gear-selector>span{width:58px;height:58px;font-size:27px;border-radius:14px}.charm-workspace .charm-gear-selector>span>small{font-size:6px;bottom:2px}.charm-workspace .charm-gear-selector>i{margin-top:5px}.charm-workspace .charm-gear-selector>i b{width:16px;height:16px;font-size:6px}} /* La page Talismans reprend la DA validée de l'Équipement. */ .charm-triad:before{display:none} #chief-charms .charm-triad:before{ display:block; inset:10px -18px -18px; border:0; border-radius:0; clip-path:none; background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0ODAgNDgwIiBmaWxsPSJub25lIj4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0ibm9kZS1mYWRlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDAwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjQyIiBzdG9wLWNvbG9yPSIjMDIwNDA1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjYzIiBzdG9wLWNvbG9yPSIjMkUzOTNEIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjgyIiBzdG9wLWNvbG9yPSIjQTBCMEI1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGRiIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxtYXNrIGlkPSJmYWRlLWJlaGluZC1ub2RlcyIgc3R5bGU9Im1hc2stdHlwZTpsdW1pbmFuY2UiPgogICAgICA8cmVjdCB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgZmlsbD0iI0ZGRiIvPgogICAgICA8ZWxsaXBzZSBjeD0iMjI0IiBjeT0iOTAiIHJ4PSIxMzIiIHJ5PSI4NiIgZmlsbD0idXJsKCNub2RlLWZhZGUpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSIxMTYiIGN5PSIzNDQiIHJ4PSIxMzIiIHJ5PSI4NiIgZmlsbD0idXJsKCNub2RlLWZhZGUpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSIzNjAiIGN5PSIzNDQiIHJ4PSIxMzIiIHJ5PSI4NiIgZmlsbD0idXJsKCNub2RlLWZhZGUpIi8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgoKICA8ZyBtYXNrPSJ1cmwoI2ZhZGUtYmVoaW5kLW5vZGVzKSIgc3Ryb2tlPSIjRTdGQUZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPGNpcmNsZSBjeD0iMjQwIiBjeT0iMjQyIiByPSIxODQiIHN0cm9rZS13aWR0aD0iMyIgb3BhY2l0eT0iLjM0Ii8+CiAgICA8cGF0aCBkPSJNODcuNzI4IDE2OC42OTBBMTY5IDE2OSAwIDAgMSAzOTIuMjcyIDE2OC42OTBRMzkzLjc3NCAxNzEuODk1IDM5Mi43MzEgMTc0LjQ4MEwzODYuMzkwIDE5MC4yMDJRMzg1LjA4NyAxOTMuNDMyIDM4OC4wNzIgMTk1LjIyN0w0MDIuNjAxIDIwMy45NjNRNDA0Ljk4OSAyMDUuMzk4IDQwNS43MTkgMjA4Ljg2MkExNjkgMTY5IDAgMCAxIDI2MS4xODEgNDA5LjY2N1EyNTcuNjY1IDQxMC4wNzQgMjU1LjU0NSA0MDguMjY1TDI0Mi42NTAgMzk3LjI2MVEyNDAgMzk1IDIzNy4zNTAgMzk3LjI2MUwyMjQuNDU1IDQwOC4yNjVRMjIyLjMzNSA0MTAuMDc0IDIxOC44MTkgNDA5LjY2N0ExNjkgMTY5IDAgMCAxIDc0LjI4MSAyMDguODYyUTc1LjAxMSAyMDUuMzk4IDc3LjM5OSAyMDMuOTYzTDkxLjkyOCAxOTUuMjI3UTk0LjkxMyAxOTMuNDMyIDkzLjYxMCAxOTAuMjAyTDg3LjI2OSAxNzQuNDgwUTg2LjIyNiAxNzEuODk1IDg3LjcyOCAxNjguNjkwWiIgc3Ryb2tlLXdpZHRoPSI0IiBvcGFjaXR5PSIuNTYiLz4KICA8L2c+CiAgPHBhdGggZD0iTTg3LjMyNyAxOTAuODkyIDgzLjg1NyAxODMuOTMxIDc2Ljg5NiAxODcuNDAxIDgwLjM2NiAxOTQuMzYyWk0zOTIuNjczIDE5MC44OTIgMzk2LjE0MyAxODMuOTMxIDQwMy4xMDQgMTg3LjQwMSAzOTkuNjM0IDE5NC4zNjJaTTI0MCA0MDMgMjM0LjUwMCA0MDguNTAwIDI0MCA0MTQgMjQ1LjUwMCA0MDguNTAwWiIgZmlsbD0iI0Y0RkRGRiIgb3BhY2l0eT0iLjkwIi8+Cjwvc3ZnPgo=") center/contain no-repeat; background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0ODAgNDgwIiBmaWxsPSJub25lIj4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0ibm9kZS1mYWRlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDAwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjQyIiBzdG9wLWNvbG9yPSIjMDIwNDA1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjYzIiBzdG9wLWNvbG9yPSIjMkUzOTNEIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjgyIiBzdG9wLWNvbG9yPSIjQTBCMEI1Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGRiIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxtYXNrIGlkPSJmYWRlLWJlaGluZC1ub2RlcyIgc3R5bGU9Im1hc2stdHlwZTpsdW1pbmFuY2UiPgogICAgICA8cmVjdCB3aWR0aD0iNDgwIiBoZWlnaHQ9IjQ4MCIgZmlsbD0iI0ZGRiIvPgogICAgICA8ZWxsaXBzZSBjeD0iMjI0IiBjeT0iOTAiIHJ4PSIxMzIiIHJ5PSI4NiIgZmlsbD0idXJsKCNub2RlLWZhZGUpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSIxMTYiIGN5PSIzNjIiIHJ4PSIxNDgiIHJ5PSI5NCIgZmlsbD0idXJsKCNub2RlLWZhZGUpIi8+CiAgICAgIDxlbGxpcHNlIGN4PSIzNjAiIGN5PSIzNjIiIHJ4PSIxNDgiIHJ5PSI5NCIgZmlsbD0idXJsKCNub2RlLWZhZGUpIi8+CiAgICA8L21hc2s+CiAgPC9kZWZzPgoKICA8ZyBtYXNrPSJ1cmwoI2ZhZGUtYmVoaW5kLW5vZGVzKSIgc3Ryb2tlPSIjRTdGQUZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPGNpcmNsZSBjeD0iMjQwIiBjeT0iMjQyIiByPSIxODQiIHN0cm9rZS13aWR0aD0iMyIgb3BhY2l0eT0iLjM0Ii8+CiAgICA8cGF0aCBkPSJNODcuNzI4IDE2OC42OTBBMTY5IDE2OSAwIDAgMSAzOTIuMjcyIDE2OC42OTBRMzkzLjc3NCAxNzEuODk1IDM5Mi43MzEgMTc0LjQ4MEwzODYuMzkwIDE5MC4yMDJRMzg1LjA4NyAxOTMuNDMyIDM4OC4wNzIgMTk1LjIyN0w0MDIuNjAxIDIwMy45NjNRNDA0Ljk4OSAyMDUuMzk4IDQwNS43MTkgMjA4Ljg2MkExNjkgMTY5IDAgMCAxIDI2MS4xODEgNDA5LjY2N1EyNTcuNjY1IDQxMC4wNzQgMjU1LjU0NSA0MDguMjY1TDI0Mi42NTAgMzk3LjI2MVEyNDAgMzk1IDIzNy4zNTAgMzk3LjI2MUwyMjQuNDU1IDQwOC4yNjVRMjIyLjMzNSA0MTAuMDc0IDIxOC44MTkgNDA5LjY2N0ExNjkgMTY5IDAgMCAxIDc0LjI4MSAyMDguODYyUTc1LjAxMSAyMDUuMzk4IDc3LjM5OSAyMDMuOTYzTDkxLjkyOCAxOTUuMjI3UTk0LjkxMyAxOTMuNDMyIDkzLjYxMCAxOTAuMjAyTDg3LjI2OSAxNzQuNDgwUTg2LjIyNiAxNzEuODk1IDg3LjcyOCAxNjguNjkwWiIgc3Ryb2tlLXdpZHRoPSI0IiBvcGFjaXR5PSIuNTYiLz4KICA8L2c+CiAgPHBhdGggZD0iTTg3LjMyNyAxOTAuODkyIDgzLjg1NyAxODMuOTMxIDc2Ljg5NiAxODcuNDAxIDgwLjM2NiAxOTQuMzYyWk0zOTIuNjczIDE5MC44OTIgMzk2LjE0MyAxODMuOTMxIDQwMy4xMDQgMTg3LjQwMSAzOTkuNjM0IDE5NC4zNjJaTTI0MCA0MDMgMjM0LjUwMCA0MDguNTAwIDI0MCA0MTQgMjQ1LjUwMCA0MDguNTAwWiIgZmlsbD0iI0Y0RkRGRiIgb3BhY2l0eT0iLjkwIi8+Cjwvc3ZnPgo="); opacity:.78; filter:drop-shadow(0 0 5px rgba(221,249,255,.24)); pointer-events:none; } #chief-charms{max-width:none;background:radial-gradient(ellipse 58% 58% at 50% 43%,rgba(142,229,255,.38) 0,rgba(79,180,222,.22) 42%,transparent 78%),linear-gradient(180deg,#184d7d 0,#236b9b 38%,#16476f 100%);color:#fff} #chief-charms .section-head{position:relative;max-width:1240px;margin-inline:auto;justify-content:center;text-align:center;padding-inline:64px} #chief-charms .section-head>.back{position:absolute;left:0;top:4px;background:#8edfff;border-color:#d8f7ff;color:#15557e;box-shadow:0 5px 0 #397faa} #chief-charms .section-head>div{max-width:760px;margin-inline:auto} #chief-charms .section-head p:last-child{color:#d4efff} #chief-charms .section-head .eyebrow{color:#80dcff} #chief-charms h1,#chief-charms h2,#chief-charms button,#chief-charms strong,#chief-charms small{font-family:var(--site-font);letter-spacing:.01em} #chief-charms .charm-workspace{border-color:rgba(183,232,255,.34);background:radial-gradient(ellipse 58% 62% at 50% 48%,rgba(197,246,255,.34),rgba(78,174,215,.14) 45%,rgba(7,39,78,.28) 82%);box-shadow:inset 0 0 105px rgba(2,35,72,.3),0 18px 50px rgba(3,27,56,.25)} #chief-charms #charmResult{max-width:900px;margin:18px auto 0;padding:14px 18px 20px;background:rgba(8,43,79,.9);border:2px solid rgba(131,203,240,.46);border-radius:26px;box-shadow:inset 0 1px rgba(255,255,255,.18),0 14px 35px rgba(1,22,48,.36)} #chief-charms #charmResult h2{margin:0 0 14px;padding:9px;text-align:center;border-radius:16px;background:linear-gradient(#4b8dc3,#3977ae);color:#fff;font-size:20px;text-shadow:0 2px 2px #16466d} .charm-cost-grid{grid-template-columns:repeat(3,minmax(120px,180px));justify-content:center} .upgrade-resource-guides .resource-item{border-color:#79c8ef;background:linear-gradient(145deg,#e8f8ff,#368bc5)} .upgrade-resource-designs .resource-item{border-color:#c59bf4;background:linear-gradient(145deg,#f0dcff,#7250b9)} .upgrade-resource-secrets .resource-item{border-color:#ffe38b;background:linear-gradient(145deg,#fff4b9,#bf711c)} .resource-item.material-skin{ background: radial-gradient(circle at 34% 24%,rgba(255,233,180,.7),transparent 36%), linear-gradient(145deg,#e9ac69 0,#c9793e 52%,#9c5128 100%); border-color:#f5b873; box-shadow: inset 0 0 0 3px rgba(255,218,164,.38), inset 0 -8px 14px rgba(111,48,18,.2), 0 6px 12px rgba(0,15,39,.35); overflow:visible; } .resource-item.material-skin img{display:block;width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(3,35,61,.32))} /* Skins P6 des six pièces d'équipement du Chef. */ .gear-skin-p6{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(23,35,45,.3))} .gear-orbit .orbit-node>span .gear-skin-p6,.gear-orbit .target-item>span .gear-skin-p6{height:calc(100% - 2px)} .gear-orbit .center-item .gear-skin-p6{width:86%;height:86%;margin:auto} .charm-gear-selector>span .gear-skin-p6{width:72px;height:72px;margin:auto} #chief-charms .charm-gear-selector[data-charm-gear="cane"]>span .gear-skin-p6{transform:scale(1.2)} #chief-charms .charm-gear-selector[data-charm-gear="ring"]>span .gear-skin-p6{transform:scale(1.68)} #chief-charms .charm-gear-selector[data-charm-gear="pants"]>span .gear-skin-p6{transform:scale(1.3)} @media(max-width:760px){.charm-gear-selector>span .gear-skin-p6{width:57px;height:57px}} @media(max-width:520px){.charm-gear-selector>span .gear-skin-p6{width:44px;height:44px}} @media(max-width:520px){.charm-cost-grid{grid-template-columns:repeat(3,1fr)}} /* Couronne d'équipements : visuels seuls dans des cases rouges façon WOS. */ #chief-gear .gear-orbit .orbit-pair:nth-child(1){left:92px;right:auto;top:54px} #chief-gear .gear-orbit .orbit-pair:nth-child(4){left:auto;right:92px;top:54px} #chief-gear .gear-orbit .orbit-pair:nth-child(2){left:22px;right:auto;top:308px} #chief-gear .gear-orbit .orbit-pair:nth-child(5){left:auto;right:22px;top:308px} #chief-gear .gear-orbit .orbit-pair:nth-child(3){left:92px;right:auto;top:562px} #chief-gear .gear-orbit .orbit-pair:nth-child(6){left:auto;right:92px;top:562px} #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"], #chief-gear .gear-orbit .center-item[class*="skin-"]{ background: radial-gradient(circle at 34% 24%,rgba(255,154,143,.48),transparent 38%), linear-gradient(145deg,#b46463 0,#a54c48 55%,#902d26 100%); border-color:#e17373; color:#fff; box-shadow:inset 0 0 0 3px rgba(255,190,174,.24),inset 0 -9px 15px rgba(75,5,24,.3),0 7px 17px rgba(3,27,56,.32); } #chief-gear .gear-orbit .target-item[class*="skin-"]{border-color:#e17373;background:radial-gradient(circle at 34% 24%,rgba(255,190,153,.55),transparent 38%),linear-gradient(145deg,#b46463,#a54c48 55%,#902d26)} #chief-gear .gear-orbit .orbit-current>span, #chief-gear .gear-orbit .target-item>span{background:transparent;border:0} #chief-gear .gear-orbit .orbit-center h2, #chief-charms .charm-triad>h2, #chief-charms .charm-gear-selector>span>small{display:none} #chief-charms .charm-workspace .charm-gear-selector>span{ background: radial-gradient(circle at 34% 24%,rgba(255,154,143,.5),transparent 38%), linear-gradient(145deg,#b46463 0,#a54c48 55%,#902d26 100%); border-color:#e17373; box-shadow:inset 0 0 0 3px rgba(255,190,174,.22),0 8px 20px rgba(4,39,70,.3); } #chief-charms .charm-workspace .charm-gear-selector:hover>span, #chief-charms .charm-workspace .charm-gear-selector.selected>span{border-color:#ffd0aa;box-shadow:0 0 0 5px rgba(255,126,104,.28),0 10px 25px rgba(4,39,70,.34)} @media(max-width:760px){ #chief-gear .gear-orbit .orbit-pair:nth-child(1){left:38px;top:38px} #chief-gear .gear-orbit .orbit-pair:nth-child(4){right:38px;top:38px} #chief-gear .gear-orbit .orbit-pair:nth-child(2){left:0;top:264px} #chief-gear .gear-orbit .orbit-pair:nth-child(5){right:0;top:264px} #chief-gear .gear-orbit .orbit-pair:nth-child(3){left:38px;top:490px} #chief-gear .gear-orbit .orbit-pair:nth-child(6){right:38px;top:490px} } @media(max-width:520px){ #chief-gear .gear-orbit .orbit-pair:nth-child(1){left:6px;top:24px} #chief-gear .gear-orbit .orbit-pair:nth-child(4){right:6px;top:24px} #chief-gear .gear-orbit .orbit-pair:nth-child(2){left:-9px;top:226px} #chief-gear .gear-orbit .orbit-pair:nth-child(5){right:-9px;top:226px} #chief-gear .gear-orbit .orbit-pair:nth-child(3){left:6px;top:428px} #chief-gear .gear-orbit .orbit-pair:nth-child(6){right:6px;top:428px} } /* Profondeur et lumière des cases, calées sur la référence corail P2. */ #chief-gear .gear-orbit{ isolation:isolate; background: radial-gradient(circle at 50% 47%,rgba(239,246,255,.82) 0,rgba(154,220,247,.4) 24%,rgba(68,153,203,.17) 48%,transparent 70%), radial-gradient(ellipse at 50% 50%,rgba(136,222,255,.24),transparent 74%); box-shadow:inset 0 0 120px rgba(1,30,70,.38),inset 0 0 40px rgba(168,235,255,.24),0 22px 55px rgba(2,25,57,.32); } #chief-gear .gear-orbit:before, #chief-gear .gear-orbit:after{ content:""; position:absolute; left:50%;top:50%; border-radius:50%; pointer-events:none; z-index:0; transform:translate(-50%,-50%); } #chief-gear .gear-orbit:before{width:72%;height:82%;border:2px solid rgba(190,240,255,.28);box-shadow:0 0 34px rgba(131,222,255,.18),inset 0 0 34px rgba(131,222,255,.12)} #chief-gear .gear-orbit:after{width:49%;height:60%;border:1px solid rgba(231,251,255,.26);box-shadow:0 0 50px rgba(197,241,255,.22)} #chief-gear .gear-orbit .orbit-pair, #chief-gear .gear-orbit .orbit-center{z-index:2} #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"], #chief-gear .gear-orbit .center-item[class*="skin-"]{ position:relative; background: linear-gradient(160deg,rgba(255,255,255,.42) 0 8%,transparent 29%), radial-gradient(circle at 50% 72%,#ffd4d2 0,#ef8d8c 38%,#d95058 70%,#9f283b 100%); border:4px solid #ef6e6c; border-radius:19px; box-shadow: inset 0 0 0 3px rgba(255,190,187,.66), inset 0 -14px 19px rgba(123,24,44,.26), 0 0 0 2px rgba(131,27,46,.22), 0 8px 13px rgba(31,20,45,.3), 0 0 22px rgba(255,102,108,.34); transition:transform .2s,filter .2s,box-shadow .2s; } #chief-gear .gear-orbit .orbit-current[class*="skin-"]{width:72px;height:72px} #chief-gear .gear-orbit .target-item[class*="skin-"]{width:82px;height:82px;border-color:#ff8176;box-shadow:inset 0 0 0 3px rgba(255,205,194,.74),inset 0 -14px 19px rgba(123,24,44,.22),0 0 0 2px rgba(134,26,43,.2),0 10px 17px rgba(31,20,45,.34),0 0 30px rgba(255,112,101,.48)} #chief-gear .gear-orbit .center-item[class*="skin-"]{border-color:#ff9b84;box-shadow:inset 0 0 0 4px rgba(255,211,196,.75),inset 0 -17px 22px rgba(123,24,44,.24),0 12px 24px rgba(17,25,51,.36),0 0 42px rgba(255,129,108,.55)} #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current, #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item{transform:translateY(-4px) scale(1.08);filter:saturate(1.12) brightness(1.06);box-shadow:inset 0 0 0 3px rgba(255,222,207,.8),0 13px 22px rgba(31,20,45,.38),0 0 38px rgba(255,121,105,.68)} #chief-gear .gear-orbit .orbit-chevron{color:#e9fbff;font-size:30px;text-shadow:0 0 10px #82dcff,0 3px 4px rgba(4,35,67,.65)} #chief-gear .gear-orbit .gear-skin-p6{filter:drop-shadow(0 7px 6px rgba(43,10,18,.42)) saturate(1.08) contrast(1.04)} #chief-charms .charm-workspace .charm-gear-selector>span{ background: linear-gradient(160deg,rgba(255,255,255,.42) 0 8%,transparent 29%), radial-gradient(circle at 50% 72%,#ffd4d2 0,#ef8d8c 38%,#d95058 70%,#9f283b 100%); border:4px solid #ef6e6c; box-shadow:inset 0 0 0 3px rgba(255,190,187,.65),inset 0 -13px 18px rgba(123,24,44,.24),0 8px 14px rgba(31,20,45,.3),0 0 24px rgba(255,102,108,.34); } #chief-charms .charm-workspace .charm-gear-selector.selected>span{transform:translateY(-3px) scale(1.08);border-color:#ff9c83;box-shadow:inset 0 0 0 3px rgba(255,220,204,.8),0 12px 21px rgba(31,20,45,.36),0 0 38px rgba(255,124,104,.66)} @media(max-width:520px){ #chief-gear .gear-orbit .orbit-current[class*="skin-"]{width:52px;height:52px} #chief-gear .gear-orbit .target-item[class*="skin-"]{width:60px;height:60px} #chief-gear .gear-orbit:before{width:83%;height:82%} #chief-gear .gear-orbit:after{width:54%;height:58%} } /* Palette WOS : rouge corail et fondu rose pâle dans le coin inférieur gauche. */ #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"], #chief-gear .gear-orbit .center-item[class*="skin-"], #chief-charms .charm-workspace .charm-gear-selector>span{ background: radial-gradient(ellipse 108% 66% at 8% 100%,rgba(255,229,235,.96) 0,rgba(255,218,226,.9) 18%,rgba(255,204,213,.78) 36%,rgba(250,177,187,.56) 55%,rgba(238,120,133,.28) 73%,transparent 92%), linear-gradient(180deg,#902d26 0,#a95250 44%,#d79b9b 69%,#f3c3c3 100%); border-color:#e17373; box-shadow: inset 10px -14px 22px rgba(255,241,243,.3), inset 0 10px 17px rgba(103,12,25,.22), 0 0 0 2px rgba(112,18,29,.24), 0 9px 15px rgba(31,10,25,.34), 0 0 24px rgba(220,55,63,.38); } #chief-gear .gear-orbit .target-item[class*="skin-"], #chief-gear .gear-orbit .center-item[class*="skin-"], #chief-charms .charm-workspace .charm-gear-selector.selected>span{ border-color:#e17373; box-shadow: inset 11px -16px 24px rgba(255,244,245,.34), inset 0 10px 17px rgba(103,12,25,.2), 0 0 0 2px rgba(112,18,29,.22), 0 11px 19px rgba(31,10,25,.38), 0 0 32px rgba(224,62,68,.48); } /* Skins de talismans extraits des planches de référence. */ /* Sélection d'équipement : cadre plus fin et mise en avant dorée. */ #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"], #chief-gear .gear-orbit .center-item[class*="skin-"]{ border-width:1px; } #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current{ border-color:#ffe36f; filter:saturate(1.06) brightness(1.1); box-shadow: inset 0 0 0 1px rgba(255,249,205,.8), inset 0 -10px 16px rgba(255,190,45,.12), 0 12px 22px rgba(31,20,45,.36), 0 0 5px 2px #fff2a0, 0 0 14px 6px rgba(255,215,70,.92), 0 0 30px 12px rgba(255,174,24,.58); } #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item{ border-color:#ff765f; filter:saturate(1.05) brightness(1.04); box-shadow: inset 0 0 0 1px rgba(255,178,151,.65), 0 10px 18px rgba(31,20,45,.34), 0 0 18px rgba(239,29,38,.45); } /* Gear actif dans l'écran Talismans. */ #chief-charms .charm-workspace .charm-gear-selector>span, #chief-charms .charm-workspace .charm-gear-selector:hover>span, #chief-charms .charm-workspace .charm-gear-selector:focus-visible>span, #chief-charms .charm-workspace .charm-gear-selector.selected>span{ border-width:3px !important; border-style:solid; border-color:#e17373; } #chief-charms .charm-workspace .charm-gear-selector.selected>span{ border-width:3.5px !important; border-color:#e17373; box-shadow: 0 10px 20px rgba(31,20,45,.34), 0 0 6px 2px rgba(255,244,170,.95), 0 0 16px 7px rgba(255,211,55,.82), 0 0 34px 13px rgba(255,169,22,.46); } .charm-triad .triad-level .charm-skin{width:58px;height:58px;margin:0 auto 3px;transform:none;border:0;outline:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;box-shadow:none;filter:drop-shadow(0 5px 5px rgba(3,35,61,.32))} .charm-triad .triad-level.target .charm-skin{width:68px;height:68px} .charm-workspace .charm-gear-selector>i .charm-thumb{display:block;width:27px;height:27px;border:0;outline:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;box-shadow:none;filter:drop-shadow(0 2px 2px rgba(3,35,61,.35))} .charm-triad .triad-level.selected .charm-skin{ filter: drop-shadow(1px 0 0 #ffe36f) drop-shadow(-1px 0 0 #ffe36f) drop-shadow(0 1px 0 #ffe36f) drop-shadow(0 -1px 0 #ffe36f) drop-shadow(0 0 5px rgba(255,226,85,.95)) drop-shadow(0 0 11px rgba(255,174,24,.62)) drop-shadow(0 5px 5px rgba(3,35,61,.32)); } @media(max-width:520px){.charm-triad .triad-level .charm-skin{width:45px;height:45px}.charm-triad .triad-level.target .charm-skin{width:53px;height:53px}.charm-workspace .charm-gear-selector>i .charm-thumb{width:20px;height:20px}} /* Sélecteur de niveaux : palette bleue accordée à l'écran principal. */ #levelPicker, #levelPicker.charm-level-picker{ color:#fff; background: radial-gradient(ellipse 78% 58% at 50% 38%,rgba(105,211,246,.28),transparent 72%), linear-gradient(180deg,#236b9b 0,#1b5c89 48%,#123f68 100%); border:1px solid rgba(151,225,250,.58); box-shadow:0 30px 100px rgba(0,15,35,.72),inset 0 0 48px rgba(4,38,72,.28); } #levelPicker .eyebrow{color:#91e3ff;text-shadow:0 2px 4px rgba(4,39,70,.7)} #levelPicker h2{color:#fff;text-shadow:0 2px 4px rgba(4,39,70,.72)} #levelPicker .dialog-close{ color:#e9faff; background:#0b2d4e; border:1px solid #70c9e8; box-shadow:0 4px 10px rgba(0,21,48,.34); } #levelPicker .level-choice{ color:#f2fbff; background:linear-gradient(145deg,#438fba 0,#2a739f 48%,#19547f 100%); border-color:#76c9e8; box-shadow:inset 0 1px rgba(255,255,255,.18),0 5px 12px rgba(2,29,57,.28); } #levelPicker .level-choice:hover{ color:#fff; background:linear-gradient(145deg,#58acd2 0,#3387b3 52%,#1d6592 100%); border-color:#b1ecff; box-shadow:0 0 12px rgba(126,222,255,.48),0 7px 16px rgba(2,29,57,.34); } #levelPicker .level-choice.active{ color:#fff; background:linear-gradient(145deg,#4aa2cb 0,#287ba8 52%,#185b87 100%); border-color:#ffe36f; box-shadow:0 0 5px 2px rgba(255,244,170,.9),0 0 15px 6px rgba(255,201,45,.54),0 7px 16px rgba(2,29,57,.34); } #levelPicker .charm-level-choice b{color:#fff;text-shadow:0 2px 3px rgba(2,29,57,.72)} #levelPicker .charm-level-choice.active b{color:#fff7c2} /* Sous-niveaux WOS : cadre doré, segments bruns et progression verte. */ #chief-charms .charm-progress, #levelPicker .charm-progress{ height:13px; gap:2px; padding:1px; border:2px solid #e9bd5b; border-radius:5px; background:#8b5d30; box-shadow:inset 0 1px rgba(255,239,166,.48),0 1px 3px rgba(54,28,11,.42); } #chief-charms .charm-progress>span, #levelPicker .charm-progress>span{ min-width:2px; border:0; border-radius:2px; background:linear-gradient(180deg,#9b713d 0,#875d30 52%,#70451f 100%); box-shadow:inset 0 1px rgba(224,169,90,.38),inset 0 -1px rgba(69,35,13,.32); } #chief-charms .charm-progress>span.filled, #levelPicker .charm-progress>span.filled{ border:0; background:linear-gradient(180deg,#8ed14b 0,#65b637 58%,#4c942b 100%); box-shadow:inset 0 1px rgba(205,246,126,.58),inset 0 -1px rgba(47,105,24,.28),0 0 4px rgba(113,205,61,.42); } #chief-charms .charm-progress.compact{ height:7px; gap:1px; padding:0; border-width:1.5px; border-radius:3px; } /* Matériaux : dégradé cuivre vers pêche pâle de la référence WOS. */ #chief-charms #charmResult .resource-item.material-skin{ border-color:#eba16e; background:linear-gradient(180deg,#935b2d,#f2ceaf); box-shadow:0 6px 12px rgba(0,15,39,.35); } /* Un seul talisman par niveau, avec sélection directe du sous-niveau. */ #levelPicker .charm-level-group{cursor:default} #levelPicker .charm-level-group.disabled{opacity:.35;filter:grayscale(.55)} #levelPicker .picker-substep-panel{ display:block; width:100%; margin-top:2px; padding:5px 6px 6px; border:1px solid rgba(125,207,237,.5); border-radius:8px; background:rgba(129,207,235,.24); box-shadow:inset 0 1px rgba(226,248,255,.18),0 2px 5px rgba(1,20,43,.16); } #levelPicker .picker-substep-panel>small{display:none} #levelPicker .picker-substeps{ display:flex; width:100%; height:13px; gap:2px; padding:1px; border:2px solid #e9bd5b; border-radius:5px; background:#8b5d30; box-shadow:inset 0 1px rgba(255,239,166,.48),0 1px 3px rgba(54,28,11,.42); font-style:normal; } #levelPicker .picker-substep{ flex:1; min-width:4px; padding:0; border:0; border-radius:2px; background:linear-gradient(180deg,#9b713d 0,#875d30 52%,#70451f 100%); box-shadow:inset 0 1px rgba(224,169,90,.38),inset 0 -1px rgba(69,35,13,.32); cursor:pointer; } #levelPicker .picker-substep.filled{background:linear-gradient(180deg,#8ed14b 0,#65b637 58%,#4c942b 100%);box-shadow:inset 0 1px rgba(205,246,126,.58),0 0 4px rgba(113,205,61,.42)} #levelPicker .picker-substep.preview-filled:not(:disabled){background:linear-gradient(180deg,#b8eb67 0,#7dcc47 58%,#59a632 100%);box-shadow:inset 0 1px rgba(226,255,164,.72),0 0 6px rgba(166,239,93,.64)} #levelPicker .picker-substep.preview-target:not(:disabled){outline:2px solid #fff4a8;outline-offset:1px} #levelPicker .picker-substep.active{outline:2px solid #fff4a8;outline-offset:1px} #levelPicker .picker-substep:hover:not(:disabled){background:linear-gradient(180deg,#b8eb67,#78c944);box-shadow:0 0 6px rgba(166,239,93,.72)} #levelPicker .picker-substep:disabled{opacity:.28;cursor:not-allowed} /* Défilement global accordé à la page Talismans, sans débordement horizontal. */ html,body{width:100%;max-width:100%;overflow-x:hidden} body,.view,main,section,.panel,dialog,form{min-width:0} img,svg,canvas,video{max-width:100%} .timeline{flex-wrap:wrap;justify-content:center;overflow-x:hidden} .level-picker-grid{overflow-x:hidden;overflow-y:auto} *{scrollbar-width:thin;scrollbar-color:#69c8e9 #0a2949} *::-webkit-scrollbar{width:11px;height:0} *::-webkit-scrollbar-track{background:linear-gradient(180deg,#071d36,#0d3558);border-left:1px solid rgba(142,221,249,.14)} *::-webkit-scrollbar-thumb{border:2px solid #0a2949;border-radius:10px;background:linear-gradient(180deg,#91e3ff 0,#4eb4de 48%,#287eae 100%);box-shadow:inset 0 1px rgba(255,255,255,.42),0 0 6px rgba(99,205,240,.34)} *::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#b9efff 0,#68caec 48%,#3494c2 100%)} *::-webkit-scrollbar-corner{background:#0a2949} /* DA verrouillée Talismans, déclinée uniquement sur Équipement et Chaudière. */ #furnace, #chief-gear{ max-width:none; color:#fff; background: radial-gradient(ellipse 58% 58% at 50% 43%,rgba(142,229,255,.38) 0,rgba(79,180,222,.22) 42%,transparent 78%), linear-gradient(180deg,#184d7d 0,#236b9b 38%,#16476f 100%); } #furnace h1,#furnace h2,#furnace button,#furnace strong,#furnace small,#furnace label, #chief-gear h1,#chief-gear h2,#chief-gear button,#chief-gear strong,#chief-gear small{ font-family:var(--site-font); letter-spacing:.01em; } #furnace .section-head, #chief-gear .section-head{position:relative;max-width:1240px;margin-inline:auto;justify-content:center;text-align:center;padding-inline:64px} #furnace .section-head>.back, #chief-gear .section-head>.back{position:absolute;left:0;top:4px;background:#8edfff;border-color:#d8f7ff;color:#15557e;box-shadow:0 5px 0 #397faa} #furnace .section-head>div, #chief-gear .section-head>div{max-width:760px;margin-inline:auto} #furnace .section-head p:last-child, #chief-gear .section-head p:last-child{color:#d4efff} #furnace .section-head .eyebrow, #chief-gear .section-head .eyebrow{color:#80dcff} #furnace .furnace-stage, #furnace .timeline, #furnace #stockMode, #furnace #furnaceResult{ border:2px solid rgba(131,203,240,.46); background:rgba(8,43,79,.88); box-shadow:inset 0 1px rgba(255,255,255,.16),0 14px 35px rgba(1,22,48,.34); } #furnace .furnace-stage{ background: radial-gradient(circle at 50% 46%,rgba(197,246,255,.38),rgba(78,174,215,.15) 44%,rgba(7,39,78,.32) 80%), rgba(8,43,79,.78); } #furnace .furnace-art{background:linear-gradient(145deg,#397fa7,#102f50);border-color:#8edfff;box-shadow:0 0 24px rgba(110,220,255,.72),0 12px 28px rgba(1,23,49,.42)} #furnace .furnace-art:after{border-color:#69afd0} #furnace .chimney{background:#285f82;border-color:#8ed5ee} #furnace .furnace-art span{background:#0b3157;border-color:#8edfff;color:#fff;box-shadow:0 4px 12px rgba(1,20,43,.36)} #furnace .before-after{padding:9px 15px;border:1px solid rgba(148,215,246,.35);border-radius:16px;background:rgba(8,40,76,.58);box-shadow:inset 0 1px rgba(255,255,255,.12)} #furnace .before-after small{color:#9eddf7} #furnace .before-after strong{color:#fff;text-shadow:0 2px 3px rgba(1,24,49,.8)} #furnace .before-after>span{color:#e9fbff;font-size:26px;text-shadow:0 0 10px #82dcff} #furnace .mode-switch{border:1px solid rgba(131,203,240,.4);background:rgba(8,43,79,.88);box-shadow:inset 0 1px rgba(255,255,255,.13),0 7px 18px rgba(1,22,48,.28)} #furnace .mode-switch button{color:#cfeeff;font-weight:850} #furnace .mode-switch button:hover{background:rgba(91,177,220,.24);color:#fff} #furnace .mode-switch button.active{color:#fff;background:linear-gradient(180deg,#4b9fd0,#287cac);box-shadow:0 0 0 1px rgba(168,226,252,.42),0 4px 12px rgba(1,26,54,.34)} #furnace .level-node{color:#d9f4ff;border-color:rgba(134,207,241,.46);background:linear-gradient(145deg,#245f8d,#17466e);box-shadow:inset 0 1px rgba(255,255,255,.12),0 6px 14px rgba(1,23,49,.28)} #furnace .level-node small{color:#9eddf7} #furnace .level-node:hover{border-color:#8edfff;background:linear-gradient(145deg,#347dab,#1d5882)} #furnace .level-node.in-range{border-color:#63cff3;background:linear-gradient(145deg,#348dbc,#21658f)} #furnace .level-node.active{border-color:#ffe36f;background:linear-gradient(145deg,#4aa2cb,#287ba8);box-shadow:0 0 5px 2px rgba(255,244,170,.88),0 0 15px 6px rgba(255,201,45,.46),0 7px 16px rgba(2,29,57,.34)} #furnace .data-note{color:#b9def0;text-align:center} #furnace #furnaceResult{max-width:900px;margin:18px auto 0;padding:14px 18px 20px;border-radius:26px} #furnace #furnaceResult h2{margin:0 0 14px;padding:9px;text-align:center;border-radius:16px;background:linear-gradient(#4b8dc3,#3977ae);color:#fff;font-size:20px;text-shadow:0 2px 2px #16466d} #furnace #furnaceResult .eyebrow{color:#80dcff;text-align:center} #furnace .resource{border-color:rgba(131,203,240,.42);background:linear-gradient(145deg,rgba(51,119,169,.82),rgba(16,60,99,.92));box-shadow:inset 0 1px rgba(255,255,255,.13),0 5px 12px rgba(1,22,48,.22)} #furnace .resource span{color:#aee2f7} #furnace .resource strong{color:#fff} #furnace .steps{border-color:rgba(139,207,237,.3)} #furnace .steps summary{color:#8edfff} #furnace .step{color:#d8effa;border-color:rgba(139,207,237,.2)} #furnace .stock-panel label{color:#cfeeff} #furnace .stock-panel input{color:#fff;border-color:rgba(142,215,246,.5);background:rgba(7,36,69,.72)} #furnace .primary{background:linear-gradient(180deg,#58b9e3,#267eb4);box-shadow:0 5px 0 #185b87,0 8px 18px rgba(1,22,48,.28)} #chief-gear .gear-orbit{border-width:2px;border-color:rgba(183,232,255,.34)} #chief-gear #chiefResult{border-color:rgba(131,203,240,.46);background:rgba(8,43,79,.9)} #chief-gear #chiefResult .upgrade-resource strong{color:#fff} #chief-gear #chiefResult .upgrade-resource small{color:#b9def0} @media(max-width:600px){ #furnace .section-head,#chief-gear .section-head{padding-inline:52px} #furnace .section-head>.back,#chief-gear .section-head>.back{left:4px} } #t12 .t12-page-panel{margin-top:0} /* Verrou final du visuel central Équipement : détouré, sans aucune case. */ #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{ width:150px!important; height:150px!important; padding:0!important; background:none!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; } #chief-gear .gear-orbit .gear-center-item .gear-skin-p6{ width:100%!important; height:100%!important; background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; } @media(max-width:760px){ #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{width:120px!important;height:120px!important} } @media(max-width:520px){ #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{width:96px!important;height:96px!important} } /* Aucun ovale décoratif derrière le visuel central Équipement. */ #chief-gear .gear-orbit::before, #chief-gear .gear-orbit::after{ content:none!important; display:none!important; } /* Cases Équipement alignées sur les cases de gear validées dans Talismans. */ #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"]{ width:94px; height:94px; padding:0; border:3px solid #e17373; border-radius:22px; color:#fff; background: radial-gradient(ellipse 108% 66% at 8% 100%,rgba(255,229,235,.96) 0,rgba(255,218,226,.9) 18%,rgba(255,204,213,.78) 36%,rgba(250,177,187,.56) 55%,rgba(238,120,133,.28) 73%,transparent 92%), linear-gradient(180deg,#902d26 0,#a95250 44%,#d79b9b 69%,#f3c3c3 100%); box-shadow: inset 10px -14px 22px rgba(255,241,243,.3), inset 0 10px 17px rgba(103,12,25,.22), 0 0 0 2px rgba(112,18,29,.24), 0 9px 15px rgba(31,10,25,.34), 0 0 24px rgba(220,55,63,.38); } #chief-gear .gear-orbit .orbit-current>span, #chief-gear .gear-orbit .target-item>span{ display:grid; place-items:center; width:100%; height:72px; margin:0; background:transparent; border:0; } #chief-gear .gear-orbit .orbit-current .gear-skin-p6, #chief-gear .gear-orbit .target-item .gear-skin-p6{ width:72px; height:72px; margin:auto; } #chief-gear .gear-orbit .orbit-current>small, #chief-gear .gear-orbit .target-item>small{ display:block; height:16px; margin:0; color:#fff; font-size:8px; font-weight:900; line-height:16px; text-shadow:0 2px 3px rgba(76,12,24,.72); } #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current{ border-color:#e17373; box-shadow: 0 10px 20px rgba(31,20,45,.34), 0 0 6px 2px rgba(255,244,170,.95), 0 0 16px 7px rgba(255,211,55,.82), 0 0 30px 12px rgba(255,174,24,.48); } @media(max-width:760px){ #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"]{width:74px;height:74px;border-radius:18px} #chief-gear .gear-orbit .orbit-current>span, #chief-gear .gear-orbit .target-item>span{height:57px} #chief-gear .gear-orbit .orbit-current .gear-skin-p6, #chief-gear .gear-orbit .target-item .gear-skin-p6{width:57px;height:57px} #chief-gear .gear-orbit .orbit-current>small, #chief-gear .gear-orbit .target-item>small{height:13px;line-height:13px;font-size:7px} } @media(max-width:520px){ #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"]{width:58px;height:58px;border-radius:14px} #chief-gear .gear-orbit .orbit-current>span, #chief-gear .gear-orbit .target-item>span{height:44px} #chief-gear .gear-orbit .orbit-current .gear-skin-p6, #chief-gear .gear-orbit .target-item .gear-skin-p6{width:44px;height:44px} #chief-gear .gear-orbit .orbit-current>small, #chief-gear .gear-orbit .target-item>small{height:10px;line-height:10px;font-size:6px} } /* Marqueurs de rang WOS : palier en haut à gauche, étoiles en bas à gauche. */ #chief-gear .gear-orbit .orbit-current>small.gear-level-markers, #chief-gear .gear-orbit .target-item>small.gear-level-markers{ position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; color:#ffe641; font-family:inherit; line-height:1; text-align:left; text-shadow:0 2px 2px rgba(80,24,10,.95),0 0 4px rgba(0,0,0,.72); pointer-events:none; z-index:3; } #chief-gear .gear-orbit .gear-rank{ position:absolute; top:6px; left:7px; font-size:15px; font-weight:950; letter-spacing:-.03em; } #chief-gear .gear-orbit .gear-stars{ position:absolute; left:7px; bottom:6px; color:#ffe641; font-size:13px; font-style:normal; font-weight:950; letter-spacing:-1px; } @media(max-width:760px){ #chief-gear .gear-orbit .gear-rank{top:5px;left:5px;font-size:12px} #chief-gear .gear-orbit .gear-stars{left:5px;bottom:5px;font-size:11px} } @media(max-width:520px){ #chief-gear .gear-orbit .gear-rank{top:4px;left:4px;font-size:10px} #chief-gear .gear-orbit .gear-stars{left:4px;bottom:4px;font-size:9px} } /* Sélecteur visuel Actuel / Objectif de la page Équipement. */ .skin-green{--skin-a:#64cf62;--skin-b:#175722} .skin-blue{--skin-a:#68b9ff;--skin-b:#173f75} .gear-level-skin{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(15,22,34,.34))} #chief-gear .gear-orbit .orbit-current .gear-level-skin, #chief-gear .gear-orbit .target-item .gear-level-skin{width:72px;height:72px;margin:auto} #chief-gear .gear-orbit .gear-center-item .gear-level-skin{width:100%;height:100%;margin:0;object-fit:contain;filter:drop-shadow(0 8px 9px rgba(7,24,40,.35));animation:gear-center-float 3.6s ease-in-out infinite} #levelPicker.gear-level-picker{max-width:820px;background:linear-gradient(180deg,#effbff,#cde5f1)} #levelPicker.gear-level-picker .level-picker-grid{grid-template-columns:repeat(6,minmax(92px,1fr));gap:10px;padding:4px;max-height:65vh} #levelPicker.gear-level-picker .gear-level-choice{ position:relative; display:grid; place-items:center; aspect-ratio:1; min-height:0; padding:7px; overflow:hidden; border:3px solid var(--skin-a); border-radius:18px; color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--skin-a) 38%,#fff),var(--skin-b)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 6px 13px rgba(4,31,52,.24); } #levelPicker.gear-level-picker .gear-level-choice:hover{ color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--skin-a) 52%,#fff),var(--skin-b)); border-color:color-mix(in srgb,var(--skin-a) 64%,#fff); transform:translateY(-2px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),0 9px 17px rgba(4,31,52,.32); } #levelPicker.gear-level-picker .gear-level-choice.active{ color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--skin-a) 50%,#fff),var(--skin-b)); border-color:#ffe66d; box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),0 0 8px 3px rgba(255,230,109,.82),0 8px 17px rgba(4,31,52,.3); } .gear-choice-visual{display:grid;place-items:center;width:90%;height:90%} .gear-choice-visual .gear-level-skin{width:100%;height:100%;object-fit:contain} .gear-choice-markers{position:absolute;inset:0;pointer-events:none;text-shadow:0 2px 2px rgba(38,20,0,.92),0 0 3px rgba(38,20,0,.7)} .gear-choice-rank{position:absolute;top:5px;left:7px;color:#ffe22d;font-size:17px;font-weight:950;letter-spacing:-.04em} .gear-choice-stars{position:absolute;left:6px;bottom:5px;color:#ffd532;font-size:14px;font-style:normal;font-weight:950;letter-spacing:-1px} @media(max-width:760px){ #levelPicker.gear-level-picker .level-picker-grid{grid-template-columns:repeat(4,minmax(76px,1fr));gap:8px} #chief-gear .gear-orbit .orbit-current .gear-level-skin, #chief-gear .gear-orbit .target-item .gear-level-skin{width:57px;height:57px} } @media(max-width:520px){ #levelPicker.gear-level-picker .level-picker-grid{grid-template-columns:repeat(3,minmax(72px,1fr));gap:7px} .gear-choice-rank{top:4px;left:5px;font-size:14px} .gear-choice-stars{left:5px;bottom:4px;font-size:11px} #chief-gear .gear-orbit .orbit-current .gear-level-skin, #chief-gear .gear-orbit .target-item .gear-level-skin{width:44px;height:44px} } /* Palettes plus franches et fonds dynamiques pour toutes les cases Équipement. */ .skin-green{--skin-a:#4fd45a;--skin-b:#12652b} .skin-blue{--skin-a:#43aaff;--skin-b:#174b98} .skin-epic{--skin-a:#a557f2;--skin-b:#571c9e} .skin-mythic{--skin-a:#ffb32f;--skin-b:#a84c08} .skin-red{--skin-a:#e17373;--skin-b:#902d26} #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"]{ opacity:1; border-color:color-mix(in srgb,var(--skin-a) 78%,#fff)!important; background: radial-gradient(circle at 48% 30%,color-mix(in srgb,var(--skin-a) 78%,#fff) 0,color-mix(in srgb,var(--skin-a) 66%,var(--skin-b)) 48%,var(--skin-b) 100%)!important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), inset 0 -12px 18px color-mix(in srgb,var(--skin-b) 62%,transparent), 0 8px 17px rgba(3,27,49,.32)!important; } #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current[class*="skin-"], #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item[class*="skin-"]{ filter:saturate(1.1) contrast(1.05); box-shadow: inset 0 0 0 3px rgba(255,255,255,.4), 0 13px 22px rgba(18,25,43,.36), 0 0 31px color-mix(in srgb,var(--skin-a) 72%,transparent)!important; } #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"]{ border-color:color-mix(in srgb,var(--skin-a) 80%,#fff); background:linear-gradient(145deg,color-mix(in srgb,var(--skin-a) 76%,#fff),var(--skin-b) 88%); filter:saturate(1.06) contrast(1.03); } #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"]:hover{ background:linear-gradient(145deg,color-mix(in srgb,var(--skin-a) 88%,#fff),color-mix(in srgb,var(--skin-b) 88%,#071522)); } #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"].active{ border-color:#ffe45f; background:linear-gradient(145deg,color-mix(in srgb,var(--skin-a) 84%,#fff),var(--skin-b)); } #levelPicker.gear-level-picker .gear-level-max{grid-column:1/-1;margin:12px 0;padding:22px;border:1px solid #79cbe7;border-radius:15px;background:#dff5fc;color:#155b79;text-align:center;font-weight:900} /* Cases originales des quatre matériaux d'amélioration d'équipement. */ #chief-gear .gear-material-skin{ width:84px; height:84px; padding:0; border:0; border-radius:18px; background:transparent; box-shadow:none; overflow:visible; } #chief-gear .gear-material-skin img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,15,39,.35))} @media(max-width:600px){#chief-gear .gear-material-skin{width:64px;height:64px}} /* Les sprites HD sont déjà éclairés : on conserve uniquement les ombres de relief. */ #chief-gear .gear-orbit .gear-level-skin, #chief-charms .charm-gear-selector .gear-level-skin, #levelPicker.gear-level-picker .gear-level-skin{ filter:drop-shadow(0 5px 5px rgba(15,22,34,.34))!important; } #chief-gear .gear-orbit .gear-center-item .gear-level-skin{ opacity:.78; filter:drop-shadow(0 8px 9px rgba(7,24,40,.35))!important; } /* Passe mobile dédiée à l'Équipement du Chef. Ces règles n'interviennent jamais sur la composition desktop validée. */ @media(max-width:540px){ #chief-gear .upgrade-grid, #chief-gear .gear-orbit{ width:100%; min-width:0; max-width:100%; } #chief-gear .gear-orbit{ height:clamp(416px,126vw,480px); min-height:0; margin-top:10px; overflow:hidden; } #chief-gear .gear-orbit .orbit-center{ width:min(45vw,168px); min-height:min(45vw,168px); } #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{ width:min(45vw,168px)!important; height:min(45vw,168px)!important; opacity:.78; z-index:1; } #chief-gear .gear-orbit .orbit-pair{ width:min(46vw,150px); height:70px; gap:1px; z-index:3; } #chief-gear .gear-orbit .orbit-current[class*="skin-"]{width:68px;height:68px;border-radius:14px} #chief-gear .gear-orbit .target-item[class*="skin-"]{width:68px;height:68px;border-radius:14px} #chief-gear .gear-orbit .orbit-current>span, #chief-gear .gear-orbit .target-item>span{height:45px} #chief-gear .gear-orbit .orbit-current .gear-skin-p6, #chief-gear .gear-orbit .target-item .gear-skin-p6, #chief-gear .gear-orbit .orbit-current .gear-level-skin, #chief-gear .gear-orbit .target-item .gear-level-skin{width:45px;height:45px} #chief-gear .gear-orbit .orbit-current>small, #chief-gear .gear-orbit .target-item>small{height:10px;line-height:10px;font-size:6px} #chief-gear .gear-orbit .orbit-chevron{flex:0 0 11px;width:11px;font-size:19px;line-height:1;text-align:center} #chief-gear .gear-orbit .gear-rank{top:3px;left:4px;font-size:9px} #chief-gear .gear-orbit .gear-stars{left:4px;bottom:3px;font-size:8px} /* Les six paires restent intégralement dans le viewport, sans espace vide excessif. */ #chief-gear .gear-orbit .orbit-pair:nth-child(1){left:max(2px,env(safe-area-inset-left));top:16px} #chief-gear .gear-orbit .orbit-pair:nth-child(4){right:max(2px,env(safe-area-inset-right));top:16px} #chief-gear .gear-orbit .orbit-pair:nth-child(2){left:max(0px,env(safe-area-inset-left));top:calc(50% - 30px)} #chief-gear .gear-orbit .orbit-pair:nth-child(5){right:max(0px,env(safe-area-inset-right));top:calc(50% - 30px)} #chief-gear .gear-orbit .orbit-pair:nth-child(3){left:max(2px,env(safe-area-inset-left));top:auto;bottom:16px} #chief-gear .gear-orbit .orbit-pair:nth-child(6){right:max(2px,env(safe-area-inset-right));top:auto;bottom:16px} /* Vraie modale mobile : deux grandes cartes et un seul défilement vertical interne. */ #levelPicker.gear-level-picker{ width:calc(100% - 20px); max-width:none; max-height:calc(100dvh - 20px); margin:auto; border-radius:22px; overflow:hidden; } #levelPicker.gear-level-picker form{ display:flex; flex-direction:column; max-height:calc(100dvh - 20px); min-height:0; padding:18px 13px calc(14px + env(safe-area-inset-bottom)); } #levelPicker.gear-level-picker h2{padding-right:38px;margin:3px 0 12px;font-size:clamp(22px,7vw,28px)} #levelPicker.gear-level-picker .dialog-close{top:12px;right:12px;z-index:2} #levelPicker.gear-level-picker .level-picker-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); flex:1 1 auto; min-height:0; max-height:none; gap:8px; padding:2px 2px 6px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; } #levelPicker.gear-level-picker .gear-level-choice{ width:100%; min-width:0; aspect-ratio:1.16; padding:5px; border-width:3px; border-radius:15px; } #levelPicker.gear-level-picker .gear-choice-visual{width:86%;height:86%} #levelPicker.gear-level-picker .gear-choice-rank{top:4px;left:5px;font-size:14px} #levelPicker.gear-level-picker .gear-choice-stars{left:5px;bottom:4px;font-size:11px} #levelPicker.gear-level-picker .gear-level-max{margin:6px 0;padding:16px} } @media(max-width:360px){ #chief-gear .gear-orbit{height:416px} #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{width:54px!important;height:54px!important} #chief-gear .gear-orbit .orbit-pair{width:min(46vw,150px)} #chief-gear .gear-orbit .orbit-current[class*="skin-"]{width:68px;height:68px} #chief-gear .gear-orbit .target-item[class*="skin-"]{width:68px;height:68px} #chief-gear .gear-orbit .orbit-current>span, #chief-gear .gear-orbit .target-item>span{height:45px} #chief-gear .gear-orbit .orbit-current .gear-skin-p6, #chief-gear .gear-orbit .target-item .gear-skin-p6, #chief-gear .gear-orbit .orbit-current .gear-level-skin, #chief-gear .gear-orbit .target-item .gear-level-skin{width:45px;height:45px} #chief-gear .gear-orbit .orbit-pair:nth-child(1), #chief-gear .gear-orbit .orbit-pair:nth-child(4){top:12px} #chief-gear .gear-orbit .orbit-pair:nth-child(3), #chief-gear .gear-orbit .orbit-pair:nth-child(6){bottom:12px} } /* Le sélecteur Gear reprend exactement le gabarit de sélection des Talismans. Les skins, rangs et étoiles restent ceux des équipements. */ #levelPicker.gear-level-picker{ max-width:720px; background: radial-gradient(ellipse 78% 58% at 50% 38%,rgba(105,211,246,.28),transparent 72%), linear-gradient(180deg,#236b9b 0,#1b5c89 48%,#123f68 100%); } #levelPicker.gear-level-picker .level-picker-grid{ grid-template-columns:repeat(5,minmax(92px,1fr)); gap:10px; padding:3px; max-height:65vh; } #levelPicker.gear-level-picker .gear-level-choice{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:138px; aspect-ratio:auto; padding:8px 7px 10px; border-radius:11px; } #levelPicker.gear-level-picker .gear-choice-visual{width:78px;height:78px} @media(max-width:600px){ #levelPicker.gear-level-picker{ width:calc(100% - 30px); max-height:none; overflow:visible; } #levelPicker.gear-level-picker form{ display:block; max-height:none; padding:28px; } #levelPicker.gear-level-picker h2{padding-right:0;margin-block:.83em;font-size:1.5em} #levelPicker.gear-level-picker .dialog-close{top:15px;right:15px} #levelPicker.gear-level-picker .level-picker-grid{ grid-template-columns:repeat(3,minmax(82px,1fr)); gap:7px; padding:3px; /* 65vh, mais jamais plus que la hauteur visible (Safari : barres du navigateur déduites), moins l'en-tête et les marges de la fenêtre (~175 px) : la fenêtre entière reste à l'écran. */ max-height:min(65vh,calc(100dvh - 205px)); overflow-x:hidden; overflow-y:auto; } #levelPicker.gear-level-picker .gear-level-choice{min-height:122px} #levelPicker.gear-level-picker .gear-choice-visual{width:66px;height:66px} #levelPicker.gear-level-picker .gear-choice-rank{top:5px;left:7px;font-size:17px} #levelPicker.gear-level-picker .gear-choice-stars{left:6px;bottom:5px;font-size:14px} } /* Les deux sélecteurs de niveaux gardent leur page en arrière-plan immobile. */ body.level-picker-open{ position:fixed; top:var(--level-picker-page-offset,0); left:0; right:0; width:100%; overflow:hidden; overscroll-behavior:none; } /* La gouttière et le retrait droit empêchent la scrollbar de recouvrir les cartes. */ #levelPicker .level-picker-grid{ scrollbar-gutter:stable; margin-right:-10px; padding-right:14px; overscroll-behavior:contain; } /* Talismans mobile : paires actuel/objectif compactes et de taille homogène. */ @media(max-width:540px){ #chief-charms .charm-triad .triad-pair{gap:1px} #chief-charms .charm-triad .triad-pair>span{width:12px;font-size:22px} #chief-charms .charm-triad .triad-level.current, #chief-charms .charm-triad .triad-level.target{width:60px;height:92px} #chief-charms .charm-triad .triad-level.current .charm-skin, #chief-charms .charm-triad .triad-level.target .charm-skin{width:53px;height:53px} /* Les deux équipements médians restent entièrement dans la zone visible. */ #chief-charms .charm-workspace .charm-gear-selector:nth-child(2){left:4px;top:220px} #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){right:4px;top:214px} } /* Essai mobile : équipement flottant derrière les cases et gouttière du sélecteur. */ @media(max-width:540px){ #chief-gear .gear-orbit .orbit-center{ width:76%; min-height:0; aspect-ratio:1; z-index:1; opacity:.25; } #chief-gear .gear-orbit .gear-center-item[class*="skin-"]{ width:100%!important; height:auto!important; aspect-ratio:1; opacity:1!important; } #chief-gear .gear-orbit .gear-center-item .gear-level-skin{opacity:1!important} } @media(max-width:600px){ #levelPicker.gear-level-picker .level-picker-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-right:-10px; padding:3px 14px 3px 3px; scrollbar-gutter:stable; } #levelPicker.gear-level-picker .gear-level-choice{min-width:0} #levelPicker.gear-level-picker .gear-choice-visual{max-width:100%} } /* Harmonisation avec la présentation Talismans. */ #chief-charms .charm-triad .triad-level.current{width:72px;height:92px} #chief-charms .charm-triad .triad-level.current .charm-skin{width:68px;height:68px} @media(max-width:540px){ #chief-charms .charm-triad .triad-level.current .charm-skin{width:53px;height:53px} } #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current[class*="skin-"], #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item[class*="skin-"]{ box-shadow: 0 10px 20px rgba(31,20,45,.34), 0 0 6px 2px rgba(255,244,170,.95), 0 0 16px 7px rgba(255,211,55,.82), 0 0 34px 13px rgba(255,169,22,.46)!important; } /* Desktop : mêmes ancrages que les cases Équipement de Talismans. Les sélecteurs Talismans mesurent 112 × 142 px ; leur case est centrée avec 9 px de retrait horizontal et 6 px au-dessus. */ @media(min-width:761px){ #chief-gear .gear-orbit .orbit-pair{ width:225px; height:142px; padding:6px 0 0 9px; gap:5px; justify-content:flex-start; align-items:flex-start; bottom:auto; } #chief-gear .gear-orbit .orbit-pair .orbit-current, #chief-gear .gear-orbit .orbit-pair .target-item{flex:0 0 94px} #chief-gear .gear-orbit .orbit-pair .orbit-chevron{ flex:0 0 18px; width:18px; height:94px; display:grid; place-items:center; } #chief-gear .gear-orbit .orbit-pair:nth-child(1){left:65px;right:auto;top:55px} #chief-gear .gear-orbit .orbit-pair:nth-child(2){left:20px;right:auto;top:295px} #chief-gear .gear-orbit .orbit-pair:nth-child(3){left:65px;right:auto;top:535px} #chief-gear .gear-orbit .orbit-pair:nth-child(4){left:auto;right:65px;top:49px} #chief-gear .gear-orbit .orbit-pair:nth-child(5){left:auto;right:20px;top:289px} #chief-gear .gear-orbit .orbit-pair:nth-child(6){left:auto;right:65px;top:529px} #chief-gear .gear-orbit .orbit-pair:nth-child(n+4){ flex-direction:row; padding:6px 9px 0 0; } #chief-gear .gear-orbit .orbit-pair:nth-child(n+4) .orbit-chevron{transform:none} } /* Retrait du contour pour les deux paires médianes, comme dans Talismans. Les règles tablet/mobile antérieures les plaçaient au ras du cadre. */ @media(max-width:760px){ #chief-gear .gear-orbit .orbit-pair:nth-child(2){left:max(9px,env(safe-area-inset-left));right:auto} #chief-gear .gear-orbit .orbit-pair:nth-child(5){right:max(9px,env(safe-area-inset-right));left:auto} } @media(max-width:360px){ #chief-gear .gear-orbit .orbit-pair:nth-child(2), #chief-gear .gear-orbit .orbit-pair:nth-child(5){width:calc((100% - 18px)/2);gap:0} #chief-gear .gear-orbit .orbit-pair:nth-child(2) .orbit-chevron, #chief-gear .gear-orbit .orbit-pair:nth-child(5) .orbit-chevron{flex-basis:8px;width:8px} } /* Taille du dessin mesurée sur la capture P5, sans dépendre du padding PNG. Ces enveloppes suivent la case complète, y compris son contour. */ #chief-gear .gear-orbit .orbit-current>span, #chief-gear .gear-orbit .target-item>span{ position:absolute; inset:-3px; width:auto!important; height:auto!important; margin:0; display:block; } #chief-charms .charm-gear-selector>span .gear-art-frame{ position:absolute; inset:-3px; display:block; pointer-events:none; } #chief-charms .charm-gear-selector.selected>span .gear-art-frame{inset:-3.5px} #levelPicker.gear-level-picker .gear-choice-visual{position:relative} #chief-gear .gear-orbit .orbit-current>span .gear-level-skin, #chief-gear .gear-orbit .target-item>span .gear-level-skin, #chief-charms .charm-gear-selector>span .gear-art-frame .gear-skin-p6, #chief-charms .charm-gear-selector>span .gear-art-frame .gear-level-skin, #levelPicker.gear-level-picker .gear-choice-visual .gear-level-skin{ position:absolute; width:var(--gear-art-width)!important; height:var(--gear-art-height)!important; left:var(--gear-art-left); top:var(--gear-art-top); margin:0!important; transform:translate(var(--gear-art-offset-x),var(--gear-art-offset-y))!important; object-fit:contain; pointer-events:none; } /* Desktop : colonne centrale uniforme pour réserver les côtés aux publicités. */ @media(min-width:761px){ #chief-gear .gear-orbit, #chief-charms .charm-workspace, #chief-gear #chiefResult, #chief-charms #charmResult{ width:100%; max-width:900px; margin-inline:auto; } } /* Same segmented sub-level selection as Talismans, inside each gear card. */ #levelPicker.gear-level-picker .gear-choice-art{position:relative;display:grid;place-items:center;width:100%;min-width:0;flex:1;min-height:78px} #levelPicker.gear-level-picker .gear-level-group{cursor:default;overflow:visible} #levelPicker.gear-level-picker .gear-level-group.disabled{opacity:.35;filter:grayscale(.55)} #levelPicker.gear-level-picker .gear-level-group .picker-substep-panel{flex:none;margin-top:4px} @media(max-width:600px){#levelPicker.gear-level-picker .gear-choice-art{min-height:66px}} /* Current and target gear show the selected sub-level below their card. */ #chief-gear .gear-orbit .gear-progress{ position:absolute;left:3px;right:3px;bottom:-17px; display:flex;height:13px;gap:2px;padding:1px; border:2px solid #e9bd5b;border-radius:5px;background:#8b5d30; box-shadow:inset 0 1px rgba(255,239,166,.48),0 1px 3px rgba(54,28,11,.42); font-style:normal; } #chief-gear .gear-orbit .gear-progress>span{ flex:1;min-width:0;border-radius:2px; background:linear-gradient(180deg,#9b713d 0,#875d30 52%,#70451f 100%); box-shadow:inset 0 1px rgba(224,169,90,.38),inset 0 -1px rgba(69,35,13,.32); } #chief-gear .gear-orbit .gear-progress>span.filled{ background:linear-gradient(180deg,#8ed14b 0,#65b637 58%,#4c942b 100%); box-shadow:inset 0 1px rgba(205,246,126,.58),inset 0 -1px rgba(47,105,24,.28),0 0 4px rgba(113,205,61,.42); } @media(max-width:540px){ #chief-gear .gear-orbit .gear-progress{height:10px;bottom:-14px;border-width:1.5px;gap:1px} #chief-gear .gear-orbit .orbit-pair:nth-child(3), #chief-gear .gear-orbit .orbit-pair:nth-child(6){bottom:20px} } /* Clicking the gear chooses stage zero; the track contains only stages 1+. */ #levelPicker.gear-level-picker .gear-zero-choice{ display:grid;place-items:center;flex:1;align-self:stretch;min-width:0; margin:0;padding:0;border:0;border-radius:7px;background:transparent; color:inherit;font:inherit;cursor:pointer; } #levelPicker.gear-level-picker .gear-zero-choice:focus-visible{ outline:2px solid #fff4a8;outline-offset:2px; } #levelPicker.gear-level-picker .gear-zero-choice:disabled{opacity:.35;cursor:not-allowed} #levelPicker.gear-level-picker .gear-zero-choice:not(:disabled):hover{ background:rgba(255,255,255,.08); } /* Visuel central Équipement : la transparence dépend du périphérique. Exception : une fenêtre desktop de 540 px ou moins prend la mise en page mobile (visuel derrière les cases) et donc la même transparence que sur mobile. */ @media(hover:hover) and (pointer:fine) and (min-width:541px){ #chief-gear .gear-orbit .orbit-center, #chief-gear .gear-orbit .gear-center-item[class*="skin-"], #chief-gear .gear-orbit .gear-center-item .gear-level-skin{opacity:1!important} } @media(hover:none), (pointer:coarse){ #chief-gear .gear-orbit .orbit-center{opacity:.25!important} #chief-gear .gear-orbit .gear-center-item[class*="skin-"], #chief-gear .gear-orbit .gear-center-item .gear-level-skin{opacity:1!important} } @media(min-width:541px) and (max-width:760px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(2){top:240px} #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){top:234px} #chief-charms .charm-triad .triad-charm{width:160px} #chief-charms .charm-triad .triad-charm-1{left:125px} #chief-charms .charm-triad .triad-charm-2{left:-5px} #chief-charms .charm-triad .triad-charm-3{right:-5px} } /* Les deux équipements latéraux du milieu restent exactement sur le même axe. */ @media(max-width:540px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(2), #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){top:220px} } @media(min-width:541px) and (max-width:760px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(2), #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){top:240px} } /* Cases Équipement : même relief WOS que les cases Talismans. Le rouge conserve strictement sa palette validée ; les autres paliers reprennent leur couleur propre, avec une lumière blanche interne et un contour porté par la nuance la plus sombre de la case. */ #chief-gear .gear-orbit .orbit-current.skin-green, #chief-gear .gear-orbit .target-item.skin-green{--gear-case-light:#4fd45a;--gear-case-mid:#2d9b43;--gear-case-dark:#12652b} #chief-gear .gear-orbit .orbit-current.skin-blue, #chief-gear .gear-orbit .target-item.skin-blue{--gear-case-light:#43aaff;--gear-case-mid:#287bc9;--gear-case-dark:#174b98} #chief-gear .gear-orbit .orbit-current.skin-epic, #chief-gear .gear-orbit .target-item.skin-epic{--gear-case-light:#a557f2;--gear-case-mid:#7937bd;--gear-case-dark:#571c9e} #chief-gear .gear-orbit .orbit-current.skin-mythic, #chief-gear .gear-orbit .target-item.skin-mythic{--gear-case-light:#ffb32f;--gear-case-mid:#d77b14;--gear-case-dark:#a84c08} #chief-gear .gear-orbit .orbit-current.skin-green, #chief-gear .gear-orbit .target-item.skin-green, #chief-gear .gear-orbit .orbit-current.skin-blue, #chief-gear .gear-orbit .target-item.skin-blue, #chief-gear .gear-orbit .orbit-current.skin-epic, #chief-gear .gear-orbit .target-item.skin-epic, #chief-gear .gear-orbit .orbit-current.skin-mythic, #chief-gear .gear-orbit .target-item.skin-mythic{ border-color:var(--gear-case-dark)!important; background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.48),transparent 38%), linear-gradient(145deg,var(--gear-case-light) 0,var(--gear-case-mid) 55%,var(--gear-case-dark) 100%)!important; box-shadow: inset 0 0 0 3px rgba(255,255,255,.24), inset 0 -9px 15px color-mix(in srgb,var(--gear-case-dark) 72%,transparent), 0 7px 17px rgba(3,27,56,.32)!important; } #chief-gear .gear-orbit .orbit-current.skin-red, #chief-gear .gear-orbit .target-item.skin-red{ border-color:#e17373!important; background: radial-gradient(circle at 34% 24%,rgba(255,154,143,.48),transparent 38%), linear-gradient(145deg,#b46463 0,#a54c48 55%,#902d26 100%)!important; box-shadow:inset 0 0 0 3px rgba(255,190,174,.24),inset 0 -9px 15px rgba(75,5,24,.3),0 7px 17px rgba(3,27,56,.32)!important; } #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current[class*="skin-"], #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item[class*="skin-"]{ box-shadow: inset 0 0 0 3px rgba(255,255,255,.4), 0 13px 22px rgba(18,25,43,.36), 0 0 31px color-mix(in srgb,var(--skin-a) 72%,transparent)!important; } /* Dégradé diagonal validé pour les cases Équipement : blanc bas-gauche, couleur profonde haut-droite, avec le contour sur la nuance finale. */ #chief-gear .gear-orbit .orbit-current.skin-green, #chief-gear .gear-orbit .target-item.skin-green{--gear-case-pale:#dfffe0;--gear-case-base:#65d66a;--gear-case-dark:#12652b} #chief-gear .gear-orbit .orbit-current.skin-blue, #chief-gear .gear-orbit .target-item.skin-blue{--gear-case-pale:#dcefff;--gear-case-base:#5db2ff;--gear-case-dark:#174b98} #chief-gear .gear-orbit .orbit-current.skin-epic, #chief-gear .gear-orbit .target-item.skin-epic{--gear-case-pale:#f1dfff;--gear-case-base:#b268f3;--gear-case-dark:#571c9e} #chief-gear .gear-orbit .orbit-current.skin-mythic, #chief-gear .gear-orbit .target-item.skin-mythic{--gear-case-pale:#fff1ce;--gear-case-base:#ffc456;--gear-case-dark:#a84c08} #chief-gear .gear-orbit .orbit-current.skin-red, #chief-gear .gear-orbit .target-item.skin-red{--gear-case-pale:#f3c3c3;--gear-case-base:#b46463;--gear-case-dark:#902d26} #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"]{ border-color:var(--gear-case-dark)!important; background:linear-gradient(to top right,#fff 0%,var(--gear-case-pale) 22%,var(--gear-case-base) 58%,var(--gear-case-dark) 100%)!important; box-shadow:0 7px 17px rgba(3,27,56,.32)!important; } #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current[class*="skin-"], #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item[class*="skin-"]{ box-shadow: 0 13px 22px rgba(18,25,43,.36), 0 0 31px color-mix(in srgb,var(--skin-a) 72%,transparent)!important; } /* Ajustement validé : reflet blanc concentré dans le seul coin bas-gauche. */ #chief-gear .gear-orbit .orbit-current.skin-green, #chief-gear .gear-orbit .target-item.skin-green{--gear-case-border:#27883c} #chief-gear .gear-orbit .orbit-current.skin-blue, #chief-gear .gear-orbit .target-item.skin-blue{--gear-case-border:#2869b4} #chief-gear .gear-orbit .orbit-current.skin-epic, #chief-gear .gear-orbit .target-item.skin-epic{--gear-case-border:#571c9e} #chief-gear .gear-orbit .orbit-current.skin-mythic, #chief-gear .gear-orbit .target-item.skin-mythic{--gear-case-border:#c76a12} #chief-gear .gear-orbit .orbit-current.skin-red, #chief-gear .gear-orbit .target-item.skin-red{--gear-case-border:#e17373} #chief-gear .gear-orbit .orbit-current[class*="skin-"], #chief-gear .gear-orbit .target-item[class*="skin-"]{ border-color:var(--gear-case-border)!important; background:linear-gradient(to top right,#fff 0%,var(--gear-case-pale) 10%,var(--gear-case-base) 36%,var(--gear-case-dark) 100%)!important; } /* Modale Équipement uniquement : les choix de niveau reprennent exactement le dégradé des cases de la page Équipement. */ #levelPicker.gear-level-picker .gear-level-choice.skin-green{--picker-case-pale:#dfffe0;--picker-case-base:#65d66a;--picker-case-dark:#12652b;--picker-case-border:#27883c} #levelPicker.gear-level-picker .gear-level-choice.skin-blue{--picker-case-pale:#dcefff;--picker-case-base:#5db2ff;--picker-case-dark:#174b98;--picker-case-border:#2869b4} #levelPicker.gear-level-picker .gear-level-choice.skin-epic{--picker-case-pale:#f1dfff;--picker-case-base:#b268f3;--picker-case-dark:#571c9e;--picker-case-border:#571c9e} #levelPicker.gear-level-picker .gear-level-choice.skin-mythic{--picker-case-pale:#fff1ce;--picker-case-base:#ffc456;--picker-case-dark:#a84c08;--picker-case-border:#c76a12} #levelPicker.gear-level-picker .gear-level-choice.skin-red{--picker-case-pale:#f3c3c3;--picker-case-base:#b46463;--picker-case-dark:#902d26;--picker-case-border:#e17373} #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"]{ border-color:var(--picker-case-border)!important; background:linear-gradient(to top right,#fff 0%,var(--picker-case-pale) 10%,var(--picker-case-base) 36%,var(--picker-case-dark) 100%)!important; box-shadow:0 7px 17px rgba(3,27,56,.32)!important; } #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"].active{ border-color:#ffe45f!important; box-shadow:0 0 8px 3px rgba(255,230,109,.82),0 8px 17px rgba(4,31,52,.3)!important; } /* Équipement : halo de sélection identique à celui du gear actif Talisman. */ #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current[class*="skin-"], #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item[class*="skin-"]{ border-width:3.5px!important; border-color:#e17373!important; filter:none!important; box-shadow: 0 10px 20px rgba(31,20,45,.34), 0 0 6px 2px rgba(255,244,170,.95), 0 0 16px 7px rgba(255,211,55,.82), 0 0 34px 13px rgba(255,169,22,.46)!important; } /* Modale Équipement : l’encadrement des sous-niveaux suit la couleur de la carte parente, au lieu de la palette bleue générique. */ #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"] .picker-substep-panel{ border-color:color-mix(in srgb,var(--picker-case-border) 78%,#fff)!important; background:color-mix(in srgb,var(--picker-case-base) 24%,transparent)!important; box-shadow:inset 0 1px rgba(255,255,255,.24),0 2px 5px rgba(1,20,43,.16)!important; } #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"] .picker-substeps{ border-color:var(--picker-case-border)!important; background:color-mix(in srgb,var(--picker-case-dark) 72%,#352014)!important; } /* Équipement : le halo n’altère jamais la couleur du contour de rareté. */ #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="from"] .orbit-current[class*="skin-"], #chief-gear .gear-orbit .orbit-pair.selected[data-selected-direction="to"] .target-item[class*="skin-"]{ border-color:var(--gear-case-border)!important; } /* Modale Équipement : la boîte de fond reste colorée par palier ; la barre segmentée conserve le style doré/brun de Talisman. */ #levelPicker.gear-level-picker .gear-level-choice[class*="skin-"] .picker-substeps{ border-color:#e9bd5b!important; background:#8b5d30!important; box-shadow:inset 0 1px rgba(255,239,166,.48),0 1px 3px rgba(54,28,11,.42)!important; } /* Talismans mobile : les deux sélecteurs inférieurs se rapprochent légèrement du centre. */ @media(max-width:540px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(3){left:13px} #chief-charms .charm-workspace .charm-gear-selector:nth-child(6){right:13px} } /* Talismans mobile : le cadre global descend sous les sous-niveaux inférieurs, sans déplacer les deux blocs du bas. */ @media(max-width:520px){ #chief-charms .charm-workspace{height:584px} } /* Talismans mobile : chaque paire gauche/droite partage strictement le même axe horizontal. */ @media(max-width:520px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(4){top:25px} #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){top:220px} #chief-charms .charm-workspace .charm-gear-selector:nth-child(6){top:451px} } @media(min-width:521px) and (max-width:540px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(4){top:35px} #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){top:220px} #chief-charms .charm-workspace .charm-gear-selector:nth-child(6){top:481px} } /* Verrouillage mobile : une même ordonnée est imposée aux deux colonnes. */ @media(max-width:520px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(1), #chief-charms .charm-workspace .charm-gear-selector:nth-child(4){top:25px!important} #chief-charms .charm-workspace .charm-gear-selector:nth-child(2), #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){top:220px!important} #chief-charms .charm-workspace .charm-gear-selector:nth-child(3), #chief-charms .charm-workspace .charm-gear-selector:nth-child(6){top:451px!important} } @media(min-width:521px) and (max-width:540px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(1), #chief-charms .charm-workspace .charm-gear-selector:nth-child(4){top:35px!important} #chief-charms .charm-workspace .charm-gear-selector:nth-child(2), #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){top:220px!important} #chief-charms .charm-workspace .charm-gear-selector:nth-child(3), #chief-charms .charm-workspace .charm-gear-selector:nth-child(6){top:481px!important} } /* Talismans mobile : les quatre visuels de la rangée basse partagent une grille stricte. La cible ne change plus la taille ni l'axe du visuel, du niveau ou de la jauge. */ @media(max-width:520px){ #chief-charms .charm-triad .triad-pair{ height:74px; align-items:flex-start; } #chief-charms .charm-triad .triad-level, #chief-charms .charm-triad .triad-level.target{ box-sizing:border-box; display:grid; grid-template-rows:45px 12px 5px; align-content:start; justify-items:center; width:62px; height:74px; padding:0; } #chief-charms .charm-triad .triad-level .charm-skin, #chief-charms .charm-triad .triad-level.target .charm-skin{ width:45px; height:45px; margin:0; } #chief-charms .charm-triad .triad-level b{ display:block; height:12px; margin:0; line-height:12px; } #chief-charms .charm-triad .triad-level .charm-progress{ align-self:start; width:54px; height:5px; margin:0; } #chief-charms .charm-triad .triad-pair>span{ align-self:center; } } /* Talismans mobile : alignement optique du récapitulatif et des projections. Chaque miniature réserve la même hauteur, y compris sans sous-niveau. */ @media(max-width:520px){ #chief-charms .charm-workspace .charm-gear-selector>i .mini-charm{ display:grid; grid-template-rows:20px 4px; align-content:start; justify-items:center; height:25px; gap:1px; } #chief-charms .charm-workspace .charm-gear-selector>i .mini-charm .charm-thumb{ width:20px; height:20px; } #chief-charms .charm-workspace .charm-gear-selector>i .mini-charm .charm-progress.compact{ width:24px; height:3px; margin:1px 0 0; } /* Actuel et objectif utilisent le gabarit de l'actuel, sans exception. */ #chief-charms .charm-triad .triad-level, #chief-charms .charm-triad .triad-level.target{ grid-template-rows:45px 12px 13px; width:62px; height:74px; } #chief-charms .charm-triad .triad-level .charm-skin, #chief-charms .charm-triad .triad-level.target .charm-skin{ width:45px; height:45px; } /* La jauge conserve le cadre doré et les segments réels du sélecteur. */ #chief-charms .charm-triad .triad-level .charm-progress{ box-sizing:border-box; align-self:start; width:54px; height:13px; margin:0; padding:1px; gap:2px; border:2px solid #e9bd5b; border-radius:5px; background:#8b5d30; box-shadow:inset 0 1px rgba(255,239,166,.48),0 1px 3px rgba(54,28,11,.42); } } /* Talismans mobile : une jauge vide conserve la ligne des miniatures ; la projection cible reprend exactement le gabarit de l'actuel. */ #chief-charms .charm-progress.compact.empty{visibility:hidden} @media(max-width:520px){ #chief-charms .charm-triad .triad-level.current, #chief-charms .charm-triad .triad-level.target{ width:62px!important; height:74px!important; grid-template-rows:45px 12px 13px!important; } #chief-charms .charm-triad .triad-level.current .charm-skin, #chief-charms .charm-triad .triad-level.target .charm-skin{ display:block; width:45px!important; height:45px!important; margin:0!important; transform:none!important; } #chief-charms .charm-triad .triad-level .charm-progress{ box-sizing:border-box; width:54px!important; height:13px!important; min-height:13px; padding:1px!important; gap:2px!important; margin:0!important; border:2px solid #e9bd5b!important; border-radius:5px!important; background:#8b5d30!important; } } /* Talismans mobile : positions miroir explicites et jauges compactes restaurées. */ @media(max-width:540px){ #chief-charms .charm-workspace .charm-gear-selector:nth-child(2){left:4px!important;right:auto!important} #chief-charms .charm-workspace .charm-gear-selector:nth-child(5){right:4px!important;left:auto!important} #chief-charms .charm-workspace .charm-gear-selector:nth-child(3){left:13px!important;right:auto!important} #chief-charms .charm-workspace .charm-gear-selector:nth-child(6){right:13px!important;left:auto!important} #chief-charms .charm-workspace .charm-gear-selector>i .mini-charm{ display:grid;grid-template-rows:20px 7px;justify-items:center; align-content:start;height:28px;gap:1px; } #chief-charms .charm-workspace .charm-gear-selector>i .mini-charm .charm-progress.compact{ box-sizing:border-box;display:flex;width:24px;height:7px!important; min-height:7px;margin:0!important;padding:0;gap:1px; border:1.5px solid #e9bd5b;border-radius:3px; background:#8b5d30; box-shadow:inset 0 1px rgba(255,239,166,.48),0 1px 3px rgba(54,28,11,.42); } #chief-charms .charm-workspace .charm-gear-selector>i .mini-charm .charm-progress.compact>span{ flex:1;min-width:0;border:0;border-radius:2px; } } /* Only the enlarged mobile control is styled; compact bars remain unchanged. */ #sublevelZoom{padding:8px;background:transparent;border:0;border-radius:0;box-shadow:none;width:min(360px,calc(100vw - 24px));max-width:calc(100vw - 24px);overflow:visible} #sublevelZoom::backdrop{background:rgba(2,15,29,.38);backdrop-filter:none} #sublevelZoom .zoom-substeps{display:flex;gap:6px;padding:6px;border:3px solid #e9bd5b;border-radius:12px;background:#8b5d30;box-shadow:inset 0 1px rgba(255,239,166,.48),0 3px 12px #0018} #sublevelZoom .picker-substep{flex:1;min-width:44px;min-height:52px;padding:0;border:0;border-radius:5px;color:#fff;font-size:18px;background:linear-gradient(180deg,#9b713d,#875d30 52%,#70451f);box-shadow:inset 0 1px rgba(224,169,90,.38);touch-action:manipulation} #sublevelZoom .picker-substep.filled{background:linear-gradient(180deg,#8ed14b,#65b637 58%,#4c942b)} #sublevelZoom .picker-substep.active{outline:3px solid #fff4a8;outline-offset:1px} #sublevelZoom .picker-substep:disabled{opacity:.28} #sublevelZoom .zoom-substeps{touch-action:none;user-select:none;-webkit-user-select:none} @keyframes sublevelPending{0%,100%{filter:brightness(1)}50%{filter:brightness(.5)}} #sublevelZoom .picker-substep.pending{background:linear-gradient(180deg,#8ed14b,#65b637 58%,#4c942b);animation:sublevelPending 1.2s ease-in-out infinite} @media(prefers-reduced-motion:reduce){#sublevelZoom .picker-substep.pending{animation:none;filter:brightness(.65)}} /* Nine-step talismans use the available mobile width without overflowing. */ #sublevelZoom:has(.picker-substep:nth-child(9)){width:min(600px,calc(100vw - 16px));max-width:calc(100vw - 16px);padding:4px} #sublevelZoom .zoom-substeps:has(.picker-substep:nth-child(9)){gap:3px} #sublevelZoom .zoom-substeps:has(.picker-substep:nth-child(9)) .picker-substep{flex:1 1 0;min-width:0;min-height:64px}