/* Creator reference: isolated from the other menus and the match HUD. */
body:has(.pe-reference){--lime:#c5f64c;--fam:Arial,Helvetica,sans-serif}
body:has(.pe-reference) .alpha-panel :is(button,input,h2,h5,label,span,b){text-shadow:none}
body:has(.pe-reference) #game{background:repeating-linear-gradient(121deg,transparent 0 148px,#0c453828 148px 179px,transparent 179px 235px),radial-gradient(ellipse at 35% 0,#073a30,#001b19 75%)}
body:has(.pe-reference) #court,body:has(.pe-reference) #menuBackdrop,body:has(.pe-reference) #game>header,body:has(.pe-reference) #controllerStatus,body:has(.pe-reference) .corner-brand{display:none!important}
body:has(.pe-reference) .alpha-panel{--fam:Arial,Helvetica,sans-serif;inset:10px 12px 8px!important;padding:0;overflow:hidden;scrollbar-gutter:auto}
.alpha-panel .menu:has(.pe-reference){display:flex;flex-direction:column;height:100%;min-height:0;max-width:none;width:100%;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:hidden}
.alpha-panel .menu:has(.pe-reference) .scr-head{flex:none;min-height:34px;margin:0 0 7px!important;gap:12px;align-items:center}
.alpha-panel .menu:has(.pe-reference) .scr-head h2{font-size:clamp(20px,2vw,31px);line-height:1.05;margin:3px 0 0;text-transform:uppercase;letter-spacing:.025em}
.alpha-panel .menu:has(.pe-reference) .scr-title .chip{padding:2px 9px;font-size:8px;line-height:1.1;letter-spacing:.02em;border-radius:4px}
.alpha-panel .menu:has(.pe-reference) .back{min-height:32px;padding:7px 12px;font-size:10px}
.alpha-panel .menu:has(.pe-reference) .back-pill{min-height:30px;height:30px;padding:0 10px;font-size:9px;gap:5px;letter-spacing:.02em}
.alpha-panel .menu:has(.pe-reference) .back-pill>span{width:16px;height:16px}
.alpha-panel .menu:has(.pe-reference) .scr-head{max-height:42px}
.alpha-panel .menu:has(.pe-reference) .scr-title{padding:0}
.alpha-panel .menu:has(.pe-reference) .scr-title .chip{display:table;margin:0}
.alpha-panel .menu:has(.pe-reference) .tab-body{flex:1;min-height:0;display:flex;flex-direction:column}
.alpha-panel .menu:has(.pe-reference) .player-editor.pe-reference{grid-template-columns:minmax(270px,36.5fr) minmax(0,63fr);gap:12px;height:auto!important;min-height:0!important;flex:1;overflow:hidden}
.pe-reference .pe-stage{padding:5px;gap:7px;border:1px solid #22544960;border-radius:10px;box-shadow:none;min-height:0;height:auto}
.pe-reference .pe-stage .cs-team{border-radius:9px;border:1px solid #b96c27;box-shadow:0 0 12px #ff993418;overflow:hidden}
.pe-reference .pe-stage .cs-names{min-height:31px;padding:5px 10px;background:#06100fe8}
.pe-reference .pe-stage .cs-name b{font-size:clamp(17px,1.65vw,25px)!important;line-height:1.1}
.pe-reference .pe-stage .cs-rating{padding:7px 10px;margin:0 6px 5px;border-radius:6px;background:#001018e8;min-height:42px}
.pe-reference .cs-rating>div>span{font-size:9px;letter-spacing:.04em}
.pe-reference .cs-rating .cs-sq{font-size:22px;width:38px;height:36px}
.pe-reference .pe-view{gap:7px;justify-content:center;padding-bottom:0}
.alpha-panel .pe-reference button.pe-vb,.pe-reference .pe-rot{min-height:28px;padding:0 10px;font-size:8px;letter-spacing:.06em;box-shadow:none;gap:5px;white-space:nowrap}
.alpha-panel .pe-reference button.pe-vb svg{width:13px;height:13px}
.pe-reference .pe-vb span{display:inline}
.alpha-panel .pe-reference .pe-rot button.pe-arrow{min-height:24px;padding:0 3px;font-size:16px}
.pe-reference .pe-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;padding:8px;border:1px solid #24564b66;border-radius:9px;background:#00231f45;min-height:0}
.pe-reference .pe-namerow{gap:9px}
.pe-reference .e-name{font-size:10px;letter-spacing:.025em}
.pe-reference .e-name input{margin-top:3px;min-height:30px;height:30px;border-radius:7px;padding:0 11px;font-size:11px;background:#001c19;border-color:#2b625969}
.alpha-panel .pe-reference .e-name input{min-height:30px;height:30px;padding:0 10px;box-sizing:border-box;font:700 11px var(--fam)}
.alpha-panel .pe-reference button.pe-random{min-height:30px;height:30px;padding:0 14px;border-radius:7px;font-size:9px;letter-spacing:.06em;gap:7px}
.alpha-panel .pe-reference button.pe-random svg{width:15px;height:15px}
.pe-reference .pe-cats{grid-template-columns:repeat(9,minmax(0,1fr));border-radius:7px;padding:2px;border-color:#24564b55;background:#001b1880}
.alpha-panel .pe-reference button.pe-cat{min-height:49px;padding:5px 2px;gap:5px;font-size:clamp(7px,.64vw,10px);letter-spacing:.015em}
.pe-reference .pe-cat svg{width:19px;height:19px}
.alpha-panel .pe-reference button.pe-cat.on{border-radius:6px;box-shadow:inset 0 0 0 1px var(--lime);color:var(--lime);background:linear-gradient(#789c3c2e,#3a632114)}
.pe-reference .pe-body{display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden}
.pe-reference .gp850.gpc-face{padding:0;gap:10px;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr)!important;grid-template-rows:1.1fr 1fr 1fr!important}
.pe-reference .gp850 .bd-box{border-color:#27544860;background:#001b18bd;border-radius:7px;padding:9px 10px 7px}
.pe-reference .gp850 .bd-box h5{font-size:clamp(10px,1vw,14px)!important;letter-spacing:.035em;margin:0 0 8px;line-height:1.1;flex-wrap:wrap;gap:5px}
.pe-reference .gp850 .gp-row{gap:7px}
.alpha-panel .pe-reference button.pk{border-radius:6px;border:1px solid #395b5145;background:#092522;box-shadow:none}
.alpha-panel .pe-reference button.pk.on{border:1px solid var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 10px #c5f64c15}
.alpha-panel .pe-reference button.pk:is(:hover,:focus-visible){transform:none;border-color:var(--lime)}
.pe-reference .gp850 .pk .pk-img{background:linear-gradient(125deg,#18312e,#102320);border-radius:5px;min-height:0}
.pe-reference .gp850.gpc-face .pk .pk-img img{object-fit:cover;object-position:center}
.pe-reference .gp850.gpc-face :is(.gp-eyes,.gp-brows,.gp-mouth) .pk-img img{object-fit:cover}
.pe-reference .gp850.gpc-face .gp-nose .pk-img img{object-fit:cover}
.pe-reference .gp850 .pk .pk-name{font-size:clamp(9px,.79vw,12px)!important;line-height:1.1;letter-spacing:.015em;padding:5px 2px;background:#001b19;color:#f1f4ed;flex:none}
.pe-reference .pk-check{width:19px;height:19px;top:4px;right:4px;box-shadow:0 1px 4px #0009;border:1px solid #152921}
.pe-reference .pk-check::after{left:6px;top:3px;width:5px;height:8px;border-width:0 2px 2px 0}
.pe-reference .gp850 .gp-pills{gap:3px;flex-wrap:nowrap;margin-left:auto}
.pe-reference .gp850 .gp-pills span{font-size:8px;letter-spacing:.01em}
.alpha-panel .pe-reference .gp850 .gp-pill{padding:3px 5px;font-size:9px}
.pe-reference .pe-foot{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px;min-width:0;padding:7px 2px 0;border-top:1px solid #28564b60}
.pe-reference .pe-foot>.pe-colrow{flex:1 1 230px;min-width:0;display:block}
.pe-reference .pe-colors{padding:0;border:0;background:none;border-radius:0}
.pe-reference .pe-colors h5{font-size:9px;line-height:1.1;letter-spacing:.05em;margin:0 0 6px}
.pe-reference .pe-sw{gap:4px;flex-wrap:wrap;overflow:visible;padding:2px}
.alpha-panel .pe-reference .pe-sw button.sw{width:20px;height:20px;min-height:20px;border:1px solid #ffffff26;border-radius:4px!important;box-shadow:inset 0 -2px 4px #0003}
.alpha-panel .pe-reference .pe-sw button.sw.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.pe-reference .pe-actions{flex:none;margin-left:auto;gap:6px}
.alpha-panel .pe-reference .pe-actions button{min-height:38px;padding:0 15px;border-radius:8px;font-size:10px;letter-spacing:.03em}
.pe-reference .e-status{font-size:10px}
.pe-reference .pe-foot:has(.e-status)>.pe-colrow{flex-basis:100%}
.pe-reference .pe-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:9px}
.pe-reference .pe-scroll{scrollbar-color:#638c604d #001b18}
.pe-reference :is(button,input):focus-visible{outline:2px solid #e5ff93;outline-offset:3px}
@media(max-height:720px){
 .pe-reference .pe-panel{gap:7px;padding:6px}.pe-reference .gp850.gpc-face{gap:8px}
 .pe-reference .gp850 .bd-box{padding:7px 8px 5px}.pe-reference .gp850 .bd-box h5{margin-bottom:6px}
 .alpha-panel .pe-reference button.pe-cat{min-height:43px}.pe-reference .pe-cat svg{width:16px;height:16px}
 .alpha-panel .pe-reference .pe-sw button.sw{width:17px;height:17px;min-height:17px}.pe-reference .pe-sw{gap:3px}
 .pe-reference .pe-foot{padding-top:5px}.pe-reference .pe-colors h5{font-size:8px}
 .alpha-panel .pe-reference .pe-actions button{min-height:34px;padding:0 12px;font-size:9px}
}
@media(max-width:950px){
 .alpha-panel .menu:has(.pe-reference) .player-editor.pe-reference{grid-template-columns:minmax(215px,32fr) minmax(0,68fr);gap:7px}
 .pe-reference .pe-view{gap:3px}.alpha-panel .pe-reference button.pe-vb{padding:0 7px}.pe-reference .pe-rot{padding:0 4px}
 .pe-reference .pe-vb span{display:none}.pe-reference .gp850 .gp-pills span{display:none}
 .pe-reference .pe-foot>.pe-colrow{flex-basis:100%}
}
@media(max-width:700px),(max-height:480px){
 body:has(.pe-reference) .alpha-panel{overflow:auto!important}
 .alpha-panel .menu:has(.pe-reference){height:auto;overflow:visible}
 .alpha-panel .menu:has(.pe-reference) .player-editor.pe-reference{display:flex;flex-direction:column;overflow:visible;flex:none}
 .pe-reference .pe-stage{height:420px;flex:none}.pe-reference .pe-panel{min-height:580px}
 .pe-reference .gp850.gpc-face{min-height:360px!important}
 .pe-reference .pe-cats{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* (8.58) the colours in one row, as in the user's picture: the swatches share the width of the row */
.pe-reference .pe-sw{flex-wrap:nowrap!important;gap:3px}
.alpha-panel .pe-reference .pe-sw button.sw{flex:1 1 0;min-width:0;width:auto;max-width:24px;aspect-ratio:1;height:auto;min-height:0}

/* (8.59) VISO as in the user's picture: two columns - TESTA, OCCHI, SOPRACCIGLIA (+ the colours) | MASCELLA, NASO, LABBRA and the save buttons */
.pe823 .vf859.vf859{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-rows:minmax(0,1.42fr) minmax(0,.82fr) minmax(0,1.3fr);grid-auto-flow:row;gap:10px;flex:1;min-height:0;overflow:hidden;padding:0}
.pe823 .vf859.vf859 .vf-box{display:flex;flex-direction:column;min-height:0;border:1px solid #27544860;background:#001b18bd;border-radius:8px;padding:9px 10px 9px}
.pe823 .vf859.vf859 .vf-box.off{opacity:.45}
.pe823 .vf859.vf859 .vf-box h5{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:900 clamp(11px,1vw,14px)/1.1 var(--fam);letter-spacing:.035em;color:#f2f6ee}
.pe823 .vf859.vf859 .vf-box h5>span{flex:none}
.pe823 .vf859.vf859 .vf-row{display:grid;gap:8px;flex:1;min-height:0}
.pe823 .vf859.vf859 .vf-row.four{grid-template-columns:repeat(4,minmax(0,1fr))}.vf859 .vf-row.five{grid-template-columns:repeat(5,minmax(0,1fr))}.vf859 .vf-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.alpha-panel .pe823 .vf859.vf859 button.pk{display:flex;flex-direction:column;position:relative;min-height:0;height:100%;padding:3px;border-radius:7px;border:1px solid #395b5145;background:#092522;overflow:hidden}
.alpha-panel .pe823 .vf859.vf859 button.pk.on{border:1px solid var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 12px #c5f64c1c}
.alpha-panel .pe823 .vf859.vf859 button.pk:disabled{cursor:not-allowed}
.pe823 .vf859.vf859 .pk .pk-img{flex:1;min-height:0;border-radius:5px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(125deg,#18312e,#102320)}
.pe823 .vf859.vf859 .vf-head .pk-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pe823 .vf859.vf859 .vf-skin{background:linear-gradient(180deg,color-mix(in srgb,var(--skin) 88%,#fff 12%),var(--skin))!important}
.pe823 .vf859.vf859 .vf-art{width:92%;height:92%;display:block}
.pe823 .vf859.vf859 .pk .pk-name{flex:none;font:800 clamp(9px,.78vw,12px)/1.1 var(--fam);padding:5px 2px 3px;color:#f1f4ed;text-align:center;background:none}
.alpha-panel .pe823 .vf859.vf859 button.vf-txt{align-items:center;justify-content:center;background:linear-gradient(160deg,#0d2b27,#071c19);padding:6px}
.pe823 .vf859.vf859 .vf-word{font:800 clamp(11px,.95vw,15px)/1.15 var(--fam);color:#f1f4ed;text-align:center}
.pe823 .vf859.vf859 .vf-jaw .vf-row,.pe823 .vf859.vf859 .vf-nose .vf-row{align-content:center}
.alpha-panel .pe823 .vf859.vf859 .vf-jaw button.vf-txt{max-height:clamp(64px,10vh,96px);aspect-ratio:1/1;height:auto;align-self:center}
.alpha-panel .pe823 .vf859.vf859 .vf-nose button.vf-txt{max-height:clamp(46px,7.5vh,80px);height:100%}
.pe823 .vf859.vf859 .pk-check{position:absolute;width:19px;height:19px;top:4px;right:4px}
.pe823 .vf859.vf859 .gp-pills{display:flex;gap:3px;align-items:center;margin-left:auto}
.pe823 .vf859.vf859 .gp-pills span{font-size:8px;letter-spacing:.06em;color:#9fb3ab}
.pe823 .vf859.vf859 .vf-dots{display:flex;gap:4px;margin-left:auto;flex-wrap:nowrap}
.alpha-panel .pe823 .vf859.vf859 button.vf-dot{width:14px;height:14px;min-height:14px;padding:0;border-radius:50%;border:1px solid #ffffff40;background:var(--c);box-shadow:none}
.alpha-panel .pe823 .vf859.vf859 button.vf-dot.on{box-shadow:0 0 0 2px var(--lime)}
.pe823 .vf859.vf859 .vf-brows .pe-colors{flex:none;margin-top:8px;padding:0;border:0;background:none}
.pe823 .vf859.vf859 .vf-brows .pe-colors h5{font:800 9px/1 var(--fam);letter-spacing:.05em;color:#c8d3cb;margin:0 0 6px}
.pe823 .vf859.vf859 .vf-brows .pe-sw{display:flex;flex-wrap:nowrap!important;gap:3px}
.alpha-panel .pe823 .vf859.vf859 .vf-brows .pe-sw button.sw{flex:1 1 0;min-width:0;max-width:26px;aspect-ratio:1;height:auto;min-height:0;border-radius:4px!important}
/* the column order: left TESTA / OCCHI / SOPRACCIGLIA, right MASCELLA / NASO / LABBRA */
.pe823 .vf859.vf859 .vf-testa{grid-area:1/1}.vf859 .vf-eyes{grid-area:2/1}.vf859 .vf-brows{grid-area:3/1}.vf859 .vf-jaw{grid-area:1/2}.vf859 .vf-nose{grid-area:2/2}.vf859 .vf-mouth{grid-area:3/2;margin-bottom:54px}
.pe823 .vf859.vf859 .vf-mouth .vf-row{max-height:118px}
/* the save buttons under LABBRA, as in the picture */
.pe-reference .pe-panel:has(.vf859){position:relative}
.pe-reference .pe-panel:has(.vf859)>.pe-foot{position:absolute;right:8px;bottom:8px;border:0;padding:0;background:none;max-width:calc((100% - 26px)/2.62)}
.pe-reference .pe-panel:has(.vf859)>.pe-foot .e-status{display:none}
.pe-reference .pe-panel:has(.vf859) .pe-actions{width:100%;justify-content:flex-end}
.alpha-panel .pe-reference .pe-panel:has(.vf859) .pe-actions button{min-height:40px}

/* (8.59b) proportions at 1280x720 and up: TESTA shorter, SOPRACCIGLIA taller; the eye colours shrink into their header; small SPESSORE pills */
.pe823 .vf859.vf859{grid-template-rows:minmax(0,1.18fr) minmax(0,.86fr) minmax(0,1.5fr);gap:9px}
.pe823 .vf859.vf859 .vf-box{padding:8px 9px 8px}
.pe823 .vf859.vf859 .vf-box h5{margin-bottom:7px;min-width:0}
.pe823 .vf859.vf859 .vf-dots{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:2px;overflow:hidden}
.alpha-panel .pe823 .vf859.vf859 button.vf-dot{flex:0 1 13px;width:auto;min-width:5px;height:13px;min-height:13px;border-radius:3px}
.alpha-panel .pe823 .vf859.vf859 button.vf-dot.on{flex-basis:16px;min-width:16px;height:16px;border-radius:50%}
.alpha-panel .pe823 .vf859.vf859 .gp-pill{min-height:0!important;height:auto!important;padding:3px 7px!important;font:800 9px/1 var(--fam)!important;border-radius:99px!important;border:1px solid #ffffff2e!important;background:#0b2420!important;color:#dfe8e2!important;box-shadow:none!important;width:auto!important}
.alpha-panel .pe823 .vf859.vf859 .gp-pill.on{border-color:var(--lime)!important;color:var(--lime)!important;background:#1d3a1e!important}
.alpha-panel .pe823 .vf859.vf859 .vf-jaw button.vf-txt{aspect-ratio:auto;max-height:none;height:min(100%,92px)}
.alpha-panel .pe823 .vf859.vf859 button.vf-txt{padding:4px 3px}
.pe823 .vf859.vf859 .vf-word{font-size:clamp(9.5px,.8vw,14px);overflow-wrap:anywhere;hyphens:auto}
.pe823 .vf859.vf859 .vf-mouth{margin-bottom:52px}
.pe823 .vf859.vf859 .vf-mouth .vf-row{max-height:none}
.pe823 .vf859.vf859 .vf-brows .pe-colors{margin-top:6px}

/* (8.59c) the drawn tiles keep the picture's shape (wide), at the top of their group; the word buttons a fixed height */
.pe823 .vf859.vf859 :is(.vf-eyes,.vf-brows,.vf-mouth) .vf-row{align-content:start;flex:none}
.alpha-panel .pe823 .vf859.vf859 button.vf-pic{height:auto}
.pe823 .vf859.vf859 .vf-pic .pk-img{flex:none;aspect-ratio:2.5/1}
.pe823 .vf859.vf859 .vf-brows .vf-pic .pk-img{aspect-ratio:2.1/1}
.pe823 .vf859.vf859 .vf-mouth .vf-pic .pk-img{aspect-ratio:1.75/1}
.pe823 .vf859.vf859 .vf-art{width:96%;height:96%}
.pe823 .vf859.vf859 .vf-brows{justify-content:flex-start}
.pe823 .vf859.vf859 .vf-brows .pe-colors{margin-top:auto}
.alpha-panel .pe823 .vf859.vf859 .vf-jaw button.vf-txt{height:clamp(50px,9vh,104px)}
.alpha-panel .pe823 .vf859.vf859 .vf-nose button.vf-txt{height:clamp(40px,6.4vh,78px)}
.pe823 .vf859.vf859 .vf-word{overflow-wrap:normal;hyphens:none;font-size:clamp(9px,.74vw,14px);padding-top:4px}
.pe823 .vf859.vf859 .vf-jaw .vf-row,.pe823 .vf859.vf859 .vf-nose .vf-row{align-content:center;align-items:center}

.pe823 .vf859.vf859 .vf-brows .pe-colors{margin-top:10px}

/* (8.60) VISO: two columns stacked from the top - the groups one under the other with no gaps, the free space at the bottom; TESTA as words */
.pe823 .vf859.vf859{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-rows:none;align-items:start;gap:10px;overflow:auto}
.pe823 .vf859.vf859 .vf-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.pe823 .vf859.vf859 .vf-box{grid-area:auto!important;flex:none;margin-bottom:0!important}
.pe823 .vf859.vf859 .vf-row{flex:none}
.alpha-panel .pe823 .vf859.vf859 :is(.vf-testa,.vf-jaw) button.vf-txt{height:clamp(48px,7.4vh,84px)}
.alpha-panel .pe823 .vf859.vf859 .vf-nose button.vf-txt{height:clamp(44px,6.4vh,76px)}
.pe823 .vf859.vf859 .vf-brows .pe-colors{margin-top:9px}
/* CAPELLI: smaller hair tiles; the beard as plain word buttons */
.alpha-panel .pe823 .gpc-hair .gp-hairStyle .gp-row{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(68px,1fr))!important;gap:6px!important}
.alpha-panel .pe823 .gpc-hair .gp-hairStyle button.pk{height:auto!important;min-height:0!important;padding:2px!important}
.alpha-panel .pe823 .gpc-hair .gp-hairStyle .pk .pk-img{flex:none!important;aspect-ratio:1/1!important;height:auto!important;max-height:72px}
.alpha-panel .pe823 .gpc-hair .gp-hairStyle .pk .pk-img img{width:100%;height:100%;object-fit:cover}
.alpha-panel .pe823 .gpc-hair .gp-hairStyle .pk .pk-name{font-size:clamp(8px,.68vw,11px)!important;padding:3px 1px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alpha-panel .pe823 .gpc-hair .bd-box{flex:none!important}
.alpha-panel .pe823 .gpc-hair .gp-facialHair .gp-row{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;gap:7px!important}
.alpha-panel .pe823 .gpc-hair button.gp-word{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(40px,6vh,64px)!important;min-height:0;padding:4px;border-radius:7px;border:1px solid #395b5145;background:linear-gradient(160deg,#0d2b27,#071c19);box-shadow:none}
.alpha-panel .pe823 .gpc-hair button.gp-word.on{border:1px solid var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 12px #c5f64c1c}
.alpha-panel .pe823 .gpc-hair .gp-word .vf-word{font:800 clamp(10px,.82vw,14px)/1.15 var(--fam);color:#f1f4ed;text-align:center}
.alpha-panel .pe823 .gpc-hair .gp-word .pk-check{position:absolute;width:17px;height:17px;top:3px;right:3px}
.alpha-panel .pe823 .gpc-hair{justify-content:flex-start!important;gap:10px!important}

/* (8.60b) the lips' colours in their header (as the eyes'); "Naturale" marked by a ring */
.alpha-panel .pe823 .vf859.vf859 button.vf-dot.vf-nat{border:1px dashed #ffffffb0}
.pe823 .vf859.vf859 .vf-mouth h5{flex-wrap:nowrap}
.pe823 .vf859.vf859 .vf-mouth .vf-dots{max-width:70%}
/* CAPELLI: the cuts in one full row; the beard right under them */
.alpha-panel .pe823 .gpc-hair .gp-hairStyle .gp-row{grid-template-columns:repeat(var(--n,12),minmax(0,1fr))!important;gap:5px!important}
.alpha-panel .pe823 .gpc-hair .gp-hairStyle .pk .pk-img{max-height:none!important}
/* the clothes' tiles a little bigger */
.pe-reference .pe-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;gap:10px!important}

/* (8.60c) the lips' colours: under the title, two rows of the same dots; CAPELLI: the groups as tall as their content, the beard right under the cuts */
.pe823 .vf859.vf859 .vf-mouth h5{flex-wrap:wrap;row-gap:6px}
.pe823 .vf859.vf859 .vf-mouth .vf-dots{flex:1 1 100%;max-width:none;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:3px;margin-left:0}
.alpha-panel .pe823 .vf859.vf859 .vf-mouth button.vf-dot{width:100%;min-width:0;height:auto;aspect-ratio:1;min-height:0;border-radius:3px}
.alpha-panel .pe823 .vf859.vf859 .vf-mouth button.vf-dot.on{border-radius:50%;min-width:0;height:auto}
.alpha-panel .pe823 .gpc-hair{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-content:flex-start!important;grid-template-rows:none!important}
.alpha-panel .pe823 .gpc-hair>.bd-box{flex:0 0 auto!important;height:auto!important;min-height:0!important}
.alpha-panel .pe823 .gpc-hair .gp-row{flex:none!important;height:auto!important}
.alpha-panel .pe823 .gpc-hair .gp-row{grid-template-rows:none!important;grid-auto-rows:auto!important}
.alpha-panel .pe823 .gpc-hair .gp-facialHair button.pk.gp-word{height:clamp(40px,6vh,64px)!important;min-height:40px!important}

.alpha-panel .pe823 .gpc-hair .gp-row::before,.alpha-panel .pe823 .gpc-hair .gp-row::after{content:none!important;display:none!important}

.alpha-panel .pe823 .gpc-hair .gp-hairStyle .gp-row{display:flex!important;flex-wrap:nowrap!important;gap:5px!important}
.alpha-panel .pe823 .gpc-hair .gp-hairStyle .gp-row>button.pk{flex:1 1 0!important;min-width:0!important;grid-area:auto!important}

/* (8.60) ACCESSORI in one page: the hats and the glasses as small pictures, the wristbands as words */
.alpha-panel .pe823 .gpc-extras{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:10px!important;grid-template-rows:none!important}
.alpha-panel .pe823 .gpc-extras>.bd-box{flex:0 0 auto!important;height:auto!important;min-height:0!important}
.alpha-panel .pe823 .gpc-extras .gp-row{display:grid!important;grid-template-rows:none!important;grid-auto-rows:auto!important;gap:5px!important;height:auto!important;flex:none!important}
.alpha-panel .pe823 .gpc-extras .gp-row::before,.alpha-panel .pe823 .gpc-extras .gp-row::after{content:none!important;display:none!important}
.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) .gp-row{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))!important}
.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) button.pk{height:auto!important;min-height:0!important;padding:2px!important;grid-area:auto!important}
.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) .pk .pk-img{flex:none!important;aspect-ratio:1/1!important;height:auto!important;max-height:none!important}
.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) .pk .pk-img img{width:100%;height:100%;object-fit:cover}
.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) .pk .pk-name{font-size:clamp(8px,.66vw,11px)!important;padding:3px 1px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alpha-panel .pe823 .gpc-extras :is(.gp-wrist,.gp-wristStyle) .gp-row{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))!important}
.alpha-panel .pe823 .gpc-extras button.gp-word{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(36px,5.2vh,56px)!important;min-height:36px!important;padding:4px;border-radius:7px;border:1px solid #395b5145;background:linear-gradient(160deg,#0d2b27,#071c19);box-shadow:none}
.alpha-panel .pe823 .gpc-extras button.gp-word.on{border:1px solid var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 12px #c5f64c1c}
.alpha-panel .pe823 .gpc-extras .gp-word .vf-word{font:800 clamp(10px,.8vw,13px)/1.15 var(--fam);color:#f1f4ed;text-align:center}
.alpha-panel .pe823 .gpc-extras .gp-word .pk-check{position:absolute;width:16px;height:16px;top:3px;right:3px}
/* polsini side by side with their design */
.alpha-panel .pe823 .gpc-extras{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);grid-auto-rows:auto;align-content:start}
.alpha-panel .pe823 .gpc-extras>.gp-hat,.alpha-panel .pe823 .gpc-extras>.gp-glasses{grid-column:1/-1}

.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) .gp-row{display:flex!important;flex-wrap:nowrap!important;gap:4px!important}
.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) .gp-row>button.pk{flex:1 1 0!important;min-width:0!important}
.alpha-panel .pe823 .gpc-extras :is(.gp-hat,.gp-glasses) .pk .pk-name{font-size:clamp(7px,.56vw,10px)!important}
.alpha-panel .pe823 .gpc-extras>.bd-box{padding-top:7px!important;padding-bottom:7px!important}
.alpha-panel .pe823 .gpc-extras>.bd-box h5{margin-bottom:6px!important}

/* (8.63) the lips' colours as the eyes': one row of small squares in the title; the chosen one a square too */
.pe823 .vf859.vf859 .vf-mouth h5{flex-wrap:nowrap!important}
.pe823 .vf859.vf859 .vf-mouth .vf-dots{flex:1 1 auto!important;display:flex!important;grid-template-columns:none!important;max-width:none!important;margin-left:auto!important;justify-content:flex-end;gap:2px!important;overflow:hidden}
.alpha-panel .pe823 .vf859.vf859 .vf-mouth button.vf-dot{flex:0 1 13px!important;width:auto!important;min-width:4px!important;height:13px!important;min-height:13px!important;aspect-ratio:auto!important;border-radius:3px!important}
.alpha-panel .pe823 .vf859.vf859 button.vf-dot.on{flex:0 0 15px!important;width:15px!important;min-width:15px!important;height:15px!important;min-height:15px!important;border-radius:3px!important;box-shadow:0 0 0 2px var(--lime)!important}

/* (8.63b) the lips' squares never thinner than 9px: in a narrow column they go on two rows in the title */
.pe823 .vf859.vf859 .vf-mouth h5{flex-wrap:wrap!important;row-gap:5px}
.pe823 .vf859.vf859 .vf-mouth .vf-dots{flex-wrap:wrap!important;max-width:78%!important}
.alpha-panel .pe823 .vf859.vf859 .vf-mouth button.vf-dot{flex:0 0 11px!important;min-width:11px!important;width:11px!important;height:11px!important;min-height:11px!important}
.alpha-panel .pe823 .vf859.vf859 .vf-mouth button.vf-dot.on{flex-basis:13px!important;width:13px!important;min-width:13px!important;height:13px!important;min-height:13px!important}
/* the editor's buttons on one line, at the foot on the right */
.pe-reference .pe-panel:has(.vf859)>.pe-foot{max-width:none!important;left:8px}
.pe-reference .pe-panel:has(.vf859) .pe-actions{flex-wrap:nowrap}

.pe823 .vf859.vf859 .vf-mouth .vf-dots{flex:1 1 0!important;max-width:none!important;min-width:60%}
.alpha-panel button.pe-delete{margin-right:0!important}

.alpha-panel .pe823 .vf859.vf859 .vf-mouth button.vf-dot{flex-basis:10px!important;min-width:10px!important;width:10px!important}
.pe823 .vf859.vf859 .vf-mouth .vf-dots{gap:1.5px!important}

/* (8.65) "Nessuno": a grey tile with a crossed circle; the reason the wristbands are off */
.alpha-panel .pe823 .pk .pk-img.pk-none{display:grid!important;place-items:center;background:linear-gradient(160deg,#3b4446,#2a3133)!important}
.pk-none-ico{width:46%;height:46%;fill:none;stroke:#b9c3c0;stroke-width:2.2;stroke-linecap:round}
.gp-why{margin-left:auto;font:700 10px/1 var(--fam);letter-spacing:.04em;color:#ffb36b}
.alpha-panel .pe823 .gpc-extras .bd-box.off{opacity:.45}

/* (8.66) the wardrobe's sections on one page */
.pe-reference .pe-scroll .ward-sec{margin:0 0 10px;padding:8px 9px 10px;border:1px solid #27544860;background:#001b18bd;border-radius:8px}
.pe-reference .pe-scroll .ward-sec h5{margin:0 0 8px;font:900 13px/1.1 var(--fam);letter-spacing:.06em;color:#f2f6ee}

.pe-reference .pe-grid:has(>.ward-sec){display:block!important}
.pe-reference .ward-sec>.pe-grid{display:grid!important}
/* (8.68) the wardrobe: a section of twelve designs is exactly one row, whatever the screen's width (the tiles take the width); the names may take two lines */
@media(min-width:1500px){.pe-reference .ward-sec>.pe-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:8px!important}}
.pe-reference .ward-sec .pk .pk-name{display:flex;align-items:center;justify-content:center;min-height:2.5em;white-space:normal;overflow:hidden;text-overflow:clip;padding:3px 3px 4px;font-size:clamp(9.5px,.6vw,11.5px);line-height:1.1}