/* ===== vue Gemz ===== */
/* barre tri + catégories */
.tools-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin:0 0 18px}
.sort,.cats{display:flex;flex-wrap:wrap;gap:6px 18px;font:700 14px/1 var(--vt);letter-spacing:.02em}
.chip{font:inherit;letter-spacing:inherit;background:none;border:0;padding:7px 0;color:var(--dim);cursor:pointer}
.chip:hover{color:var(--ink)}
.chip[aria-pressed=true]{color:#fff;text-shadow:0 0 4px #fff,0 0 12px var(--glow)}
.chip[aria-pressed=true]::before{content:"> ";color:var(--glow)}
.cats{margin:0 0 40px;padding-bottom:16px;border-bottom:1px solid rgba(42,37,80,.6)}
.count{font-size:14px;color:var(--dim)}

/* composer */
.composer{margin:0 0 44px}
.composer .row{display:flex;gap:14px;align-items:flex-end}
.composer .row2{display:flex;gap:14px;align-items:flex-end;margin-top:6px}
.composer select{font:700 14px/1 var(--vt);color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:11px 2px;outline:none;cursor:pointer}
.composer select:focus{border-color:var(--glow)}
.composer select option{background:#0a0718;color:var(--ink)}
.notice{text-align:center;color:var(--dim);margin:0 0 44px;font-size:15px}
.notice a{color:var(--glow)}

/* feed */
.feed{display:flex;flex-direction:column;gap:52px}
.gem{position:relative}
.gem .meta{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1;color:var(--dim);margin-bottom:8px;min-height:24px;flex-wrap:wrap}
.gem .meta b{color:var(--glow);font-weight:normal}
.gem .meta .tag{font:700 12px/1 var(--vt);color:var(--ink);padding:4px 6px;background:rgba(185,166,255,.12)}
.gem .note{color:var(--ink);margin:0 0 12px;white-space:pre-wrap;word-break:break-word}
.gem .tools{margin-left:auto;display:flex;gap:6px;opacity:0;transition:opacity .15s steps(2)}
.gem:hover .tools,.gem:focus-within .tools{opacity:1}
@media (hover:none){.gem .tools{opacity:1}}
.gem .tools .btn{padding:4px;color:var(--dim)}
.gem .tools .btn:hover{color:#fff}

/* like */
.like{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font:700 14px/1 var(--vt);color:var(--dim);background:none;border:0;padding:6px 0;cursor:pointer}
.like:hover{color:#ff8fb1}
.like[aria-pressed=true]{color:#ff8fb1;text-shadow:0 0 8px rgba(255,143,177,.6)}
.like[aria-pressed=true] .ico{filter:drop-shadow(0 0 4px #ff8fb1)}
.like:disabled{cursor:default}
.like.pop .ico{animation:pop .35s steps(4)}
@keyframes pop{40%{transform:scale(1.6) translateY(-2px)}100%{transform:none}}

/* embed façon Discord, version pixel */
.embed{display:grid;grid-template-columns:1fr auto;gap:0 16px;padding:14px 16px 16px 18px;background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--glow)) 12%,transparent),transparent 45%),rgba(13,9,32,.93);
  border-left:2px solid var(--c,var(--glow));position:relative}
.embed::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s steps(3);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c,var(--glow)) 22%,transparent),transparent 55%)}
.embed:hover::after{opacity:1}
.embed .site{grid-column:1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim);margin-bottom:4px;min-width:0}
.embed .site img{width:16px;height:16px;image-rendering:pixelated}
.embed .t{grid-column:1;display:block;font-size:18px;line-height:1.2;font-weight:700;color:var(--ink);text-decoration:none;margin-bottom:6px;word-break:break-word;transition:color .15s steps(3),text-shadow .15s steps(3)}
.embed .t:hover,.embed .t:focus-visible{outline:none;color:#fff;text-shadow:0 0 8px var(--glow),0 0 20px var(--glow)}
.embed .d{grid-column:1;margin:0;color:var(--mute);font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.embed .stats{grid-column:1;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px;color:var(--mute)}
.embed .stats span{display:inline-flex;align-items:center;gap:6px}
.embed .stats .ico{color:var(--c,var(--glow))}
.embed .tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font-size:13px;color:var(--glow)}
.embed .thumb{grid-column:2;grid-row:1/span 4;width:80px;height:80px;object-fit:cover;align-self:start;position:relative;z-index:1}
.embed .big{grid-column:1/-1;margin-top:14px;display:block;overflow:hidden;position:relative}
.embed .big img{display:block;width:100%;max-height:340px;object-fit:cover;opacity:.92;transition:transform .4s steps(6)}
.embed .big::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .2s steps(3);
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.embed .big:hover::before{opacity:0}
.embed .big:hover img{transform:scale(1.02)}
.embed .big.nsfw img{filter:blur(24px) brightness(.6)}
.embed .big.nsfw::after{content:"NSFW · clic pour voir";position:absolute;inset:0;display:grid;place-items:center;font:700 14px var(--vt);color:#fff}
.empty{text-align:center;color:var(--dim);font:15px/1.6 var(--vt);margin-top:40px}
@media (max-width:560px){.embed{padding:12px 12px 14px 14px;gap:0 12px}.embed .thumb{width:56px;height:56px}.embed .t{font-size:17px}.feed{gap:44px}.composer .row2{flex-wrap:wrap}}

/* ===== vue Cloud ===== */
/* login */
/* ===== connexion / inscription ===== */
.authcard{max-width:400px;margin:4vh auto 0;padding:30px 30px 26px;background:rgba(13,9,32,.94);box-shadow:inset 0 0 0 2px var(--line),0 0 40px rgba(122,92,255,.18);position:relative}
.atitle{display:flex;align-items:center;gap:12px;margin:0 0 8px;font:600 28px/1 var(--px);color:var(--ink);letter-spacing:.06em;text-shadow:0 0 10px rgba(185,166,255,.5)}
.atitle .ico{color:var(--glow)}
.asub{margin:0 0 22px;color:var(--dim);font-size:14px;line-height:1.45}
.authtabs{margin:0 0 22px}
.authtabs .ctab{flex:1;justify-content:center}
.login{display:flex;flex-direction:column;gap:16px}
.fl{display:flex;flex-direction:column;gap:6px}
.fl span{font:600 14px/1 var(--px);color:var(--mute);letter-spacing:.04em}
.fl .field{background:rgba(185,166,255,.06);border:0;border-bottom:2px solid var(--line);padding:11px 12px}
.fl .field:focus{background:rgba(185,166,255,.1);border-color:var(--glow)}
/* remplissage auto du navigateur : pas de fond jaune */
.fl .field:-webkit-autofill,.fl .field:-webkit-autofill:hover,.fl .field:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px #17112e inset;box-shadow:0 0 0 40px #17112e inset;transition:background-color 9999s}
.fl .field:autofill{background:#17112e}
.authgo{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border:0;cursor:pointer;font:600 18px/1 var(--px);letter-spacing:.06em;
  color:#140a2a;background:var(--glow);box-shadow:inset -3px -3px 0 rgba(0,0,0,.25),inset 3px 3px 0 rgba(255,255,255,.35);transition:filter .15s steps(2)}
.authgo:hover,.authgo:focus-visible{filter:brightness(1.12) drop-shadow(0 0 10px rgba(185,166,255,.7));outline:none}
.login .hint{text-align:center;color:var(--dim);font-size:13px;margin:4px 0 0}
.login .hint:empty{display:none}
@media (max-width:560px){.authcard{padding:24px 18px 20px}.atitle{font-size:24px}}
.pending{text-align:center;max-width:420px;margin:0 auto}
.pending p:first-child{font:700 18px/1 var(--vt);color:#7ee0c3;text-shadow:0 0 10px rgba(126,224,195,.5);letter-spacing:.06em}
.pending .hint{color:var(--dim)}

/* zone de dépôt */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:38px 20px;cursor:pointer;color:var(--dim);text-align:center;
  transition:color .15s steps(3)}
/* bordure pointillée pixel : 4 dégradés répétés, animables */
.drop{--d:var(--line);background:
  repeating-linear-gradient(90deg,var(--d) 0 6px,transparent 6px 12px) 0 0/100% 2px no-repeat,
  repeating-linear-gradient(90deg,var(--d) 0 6px,transparent 6px 12px) 0 100%/100% 2px no-repeat,
  repeating-linear-gradient(0deg,var(--d) 0 6px,transparent 6px 12px) 0 0/2px 100% no-repeat,
  repeating-linear-gradient(0deg,var(--d) 0 6px,transparent 6px 12px) 100% 0/2px 100% no-repeat,
  rgba(9,7,22,.55)}
.drop:hover,.drop.over,.drop:focus-visible{--d:var(--glow);color:var(--ink);outline:none}
.drop.over{text-shadow:0 0 12px var(--glow);background-color:rgba(40,30,90,.35)}
.drop b{font:700 15px/1.4 var(--px);letter-spacing:.06em}
/* choix de la durée d'hébergement */
.ttl{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:6px;font:700 14px/1 var(--vt);letter-spacing:.02em}
.ttl button{font:inherit;letter-spacing:inherit;background:none;border:0;padding:8px 2px;color:var(--dim);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.ttl button::before{content:"";width:6px;height:6px;box-shadow:inset 0 0 0 1px currentColor}
.ttl button[aria-checked=true]{color:#fff;text-shadow:0 0 8px var(--glow)}
.ttl button[aria-checked=true]::before{background:var(--glow);box-shadow:0 0 6px var(--glow)}
.ttl button:hover{color:var(--ink)}
.ttl button.perma[aria-checked=true]{color:#ffd479;text-shadow:0 0 8px rgba(255,212,121,.6)}
.ttl button.perma[aria-checked=true]::before{background:#ffd479;box-shadow:0 0 6px #ffd479}
.files .exp{color:var(--glow)}
.files .exp.soon{color:#ff8fb1}
.files .exp.perma{color:#ffd479}
.drop small{font-size:14px}

/* progression */
.queue{display:flex;flex-direction:column;gap:10px;margin:22px 0 0}
.q{font-size:14px}
.q{display:grid;grid-template-columns:1fr auto;gap:2px 12px;color:var(--ink)}
.q .pc{font:700 13px/1.6 var(--vt);color:var(--glow)}
.q .bar{grid-column:1/-1;height:6px;position:relative;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 8px)}
.q .bar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,var(--glow) 0 6px,transparent 6px 8px);
  filter:drop-shadow(0 0 4px var(--glow));transition:width .2s steps(4)}
.q.done .bar i{background:repeating-linear-gradient(90deg,#7ee0c3 0 6px,transparent 6px 8px);filter:drop-shadow(0 0 4px #7ee0c3)}

/* liste */
.bar-top{display:flex;align-items:center;gap:16px;margin:54px 0 8px}
.bar-top .field{flex:1}
.usage{font:700 13px/1 var(--vt);color:var(--dim);white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.gauge{width:120px;height:4px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 6px);position:relative}
.gauge i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(90deg,var(--glow) 0 4px,transparent 4px 6px)}
.gauge.full i{background:repeating-linear-gradient(90deg,#ff6b8a 0 4px,transparent 4px 6px)}
.usage .free{color:#7ee0c3;text-shadow:0 0 8px rgba(126,224,195,.45)}
.usage .free.low{color:#ff6b8a;text-shadow:0 0 8px rgba(255,107,138,.45)}
.files{list-style:none;margin:0;padding:0}
.files li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;padding:12px 2px;border-bottom:1px solid rgba(42,37,80,.55)}
.files .n{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.files .n:hover{color:#fff;text-shadow:0 0 8px var(--glow)}
.files .m{grid-column:2;font-size:13px;color:var(--dim)}
.files .acts{grid-row:1/span 2;grid-column:3;display:flex;gap:4px}
.files .acts .btn{padding:6px;color:var(--dim)}
.files .acts .btn:hover{color:#fff}
.files .ico.f{opacity:.75;transition:opacity .15s steps(2)}
.files li:hover .ico.f{opacity:1;filter:drop-shadow(0 0 4px currentColor)}
.empty{text-align:center;color:var(--dim);font:15px/1.6 var(--vt);margin-top:28px}
@media (max-width:560px){.bar-top{flex-wrap:wrap}.bar-top .field{flex-basis:100%}.usage{align-items:flex-start}.drop{padding:30px 16px}}

/* ===== niveaux, verrous, badges ===== */
.lk{display:none!important}
a.locked .lk{display:block!important;color:var(--dim);height:14px!important;width:auto;opacity:.8}
a.locked{color:var(--dim)}
.lv{font:700 12px/1 var(--vt);padding:4px 6px;color:var(--ink);background:rgba(185,166,255,.12)}
.lv0{color:#ffd479;background:rgba(255,212,121,.1)}
.lv1{color:#9ab8ff;background:rgba(154,184,255,.1)}
.lv2{color:#7ee0c3;background:rgba(126,224,195,.1)}
.lv3{color:#ff8fb1;background:rgba(255,143,177,.1)}
.lv4{color:var(--glow);background:rgba(185,166,255,.15)}
.lv5{color:#fff;background:rgba(185,166,255,.25)}
.badge{font:700 12px/1 var(--vt);color:#000;background:#ffd479;padding:3px 5px;margin-left:6px;box-shadow:0 0 8px rgba(255,212,121,.6)}
.gem .meta .wait{font:700 12px/1 var(--vt);color:#ffd479;background:rgba(255,212,121,.1);padding:4px 6px}

/* ===== vue admin ===== */
.adm-panel{background:var(--panel);padding:20px 22px 22px;margin:0 0 34px;position:relative}
.adm-panel header{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.adm-panel h2{font:700 15px/1 var(--px);color:var(--ink);letter-spacing:.1em;margin:0}
.adm-desc{margin:0 0 18px;color:var(--dim);font-size:14px}
.ulist{list-style:none;margin:0;padding:0}
.ulist li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;padding:12px 0;border-top:1px solid rgba(42,37,80,.7)}
.ulist li .ico{color:var(--glow);grid-row:span 2}
.ulist li .nm{font-weight:700;font-size:17px;color:var(--ink);display:flex;align-items:center;gap:10px}
.ulist li .m{grid-column:2;color:var(--dim);font-size:13px}
.ulist li .act{grid-column:3;grid-row:1/span 2;display:flex;gap:10px;align-items:center}
.ulist li.empty{display:block;color:var(--dim);font-size:15px;border-top:0;padding:4px 0}
/* boutons d'action : contour pixel, lisibles */
.abtn{font:700 14px/1 var(--vt);padding:8px 12px;background:none;cursor:pointer;color:var(--ink);border:2px solid var(--line);display:inline-flex;align-items:center;gap:8px;transition:border-color .12s steps(2),color .12s steps(2),background .12s steps(2)}
.abtn:hover,.abtn:focus-visible{outline:none;border-color:var(--glow);color:#fff;background:rgba(185,166,255,.08)}
.abtn.ok{color:#7ee0c3;border-color:rgba(126,224,195,.45)}
.abtn.ok:hover{border-color:#7ee0c3;background:rgba(126,224,195,.1)}
.abtn.no{color:#ff8fb1;border-color:rgba(255,143,177,.35)}
.abtn.no:hover{border-color:#ff8fb1;background:rgba(255,143,177,.08)}
.abtn:disabled{opacity:.35;cursor:default}
.qg{padding:16px 0 4px;border-top:1px solid rgba(42,37,80,.7)}
.qg:first-child{border-top:0;padding-top:0}
.qg .meta{display:flex;gap:6px;font-size:14px;color:var(--dim);margin-bottom:8px}
.qg .meta b{color:var(--glow);font-weight:700}
.qg .note{color:var(--ink);margin:0 0 10px}
.qa{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 6px}
.qa label{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:14px;margin-right:auto}
.qa select,.dlg select{font:700 14px/1 var(--vt);color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--line);padding:6px 2px;cursor:pointer}
.qa select option{background:#0a0718}
.adminlink .badge{margin-left:2px}
@media (max-width:560px){.ulist li{grid-template-columns:auto 1fr}.ulist li .act{grid-column:1/-1;grid-row:auto;justify-content:flex-start;margin-top:6px}.adm-panel{padding:16px 14px}}

/* ===== fenêtre de confirmation (garde-fous) ===== */
.dlg-back{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px}
.dlg{width:min(440px,100%);background:#0b0820;padding:24px 24px 20px;box-shadow:0 0 0 2px var(--line),0 0 40px rgba(122,92,255,.25)}
.dlg h3{font:700 15px/1.4 var(--px);letter-spacing:.08em;color:#fff;margin:0 0 14px;font-weight:normal}
.dlg p{margin:0 0 12px;color:var(--mute);font-size:15px}
.dlg p b{color:#fff}
.dlg .opts{display:flex;flex-direction:column;gap:6px;margin:6px 0 14px}
.dlg .opts label{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:8px 10px;cursor:pointer;border:2px solid transparent}
.dlg .opts label:hover{border-color:var(--line)}
.dlg .opts input{grid-row:span 2;accent-color:#b9a6ff}
.dlg .opts b{font-weight:700;color:var(--ink)}
.dlg .opts small{color:var(--dim);font-size:13px}
.dlg .opts label.cur{opacity:.45;cursor:default}
.dlg .warn{color:#ffd479;font-size:14px;border-left:2px solid #ffd479;padding-left:10px}
.dlg .check{display:flex;gap:10px;align-items:flex-start;color:var(--mute);font-size:14px;margin:0 0 14px;cursor:pointer}
.dlg .field{margin:0 0 16px}
.dlg .row{display:flex;justify-content:flex-end;gap:12px}

/* ===== vue Games ===== */
/* ===== liens en tuiles (Websites, Games) ===== */
.glinks{display:flex;flex-direction:column;gap:12px}
.glink{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--panel);text-decoration:none;color:var(--ink);transition:background .15s steps(2)}
.glink .ico{color:#6fd8ff;flex:none}
.glink .ico.top{color:#ffd479;filter:drop-shadow(0 0 4px rgba(255,212,121,.6))}
.glink.top b{color:#ffe6a8}
.glink span{display:flex;flex-direction:column;gap:3px}
.glink b{font-weight:700;font-size:17px}
.glink small{color:var(--dim);font-size:13px}
.glink .go{margin-left:auto;transform:rotate(180deg);color:var(--dim)}
.glink:hover{background:rgba(185,166,255,.1)}

/* ===== onglets ===== */
.ctabs{display:flex;gap:6px;margin:0 0 14px}
.ctab{font:600 16px/1 var(--px);letter-spacing:.03em;display:inline-flex;align-items:center;padding:8px 14px;background:none;border:2px solid var(--line);color:var(--dim);cursor:pointer}
.ctab[aria-selected=true]{color:#fff;border-color:var(--glow);background:rgba(185,166,255,.08)}
.ctab:hover{color:var(--ink)}
.mtabs{justify-content:center;flex-wrap:wrap;margin:30px 0 24px}
.mtabs .badge{margin-left:8px}

/* ===== Websites (modération) ===== */
.siteform{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:16px;align-items:end}
.siteform .icopick{grid-column:1/-1}
.siteform.inline{grid-column:2/-1;margin:0;width:100%}
.ulist li.editing{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.siteform.inline .act{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
@media (max-width:560px){.siteform{grid-template-columns:1fr}}
.icopick{display:inline-flex;flex-wrap:wrap;gap:2px;align-items:center}
.icopick label{display:inline-flex;padding:8px;cursor:pointer;color:var(--dim);border:2px solid transparent}
.icopick input{position:absolute;opacity:0;pointer-events:none}
.icopick label:hover{color:var(--ic,#fff)}
.icopick label:has(input:checked){color:var(--ic,#fff);border-color:var(--ic,var(--glow))}
.icopick label:has(input:focus-visible){outline:2px solid var(--glow)}
.adm-panel header+p+ul+header{margin-top:30px}

/* ===== zone de dépôt d'image + images dans le Feed ===== */
.memedrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:96px;padding:16px;cursor:pointer;color:var(--dim);text-align:center;font-size:14px;
  background:rgba(185,166,255,.05);outline:2px dashed var(--line);outline-offset:-6px;transition:outline-color .15s steps(2),color .15s steps(2)}
.memedrop:hover,.memedrop:focus-within{outline-color:var(--glow);color:var(--ink)}
.memedrop img{max-width:100%;max-height:220px;display:block;image-rendering:auto}
.meme{display:block;margin:10px 0 0;overflow:hidden;background:#05030e}
.meme img{display:block;width:100%;max-height:560px;object-fit:contain;transition:transform .4s steps(6)}
.meme:hover img{transform:scale(1.01)}

/* ===== Feed : création de post ===== */
.postform{display:flex;flex-direction:column;gap:12px;padding:18px 20px;background:rgba(13,9,32,.93);border-left:2px solid var(--glow);margin-bottom:18px}
.postform .ptitle{font:600 20px/1.2 var(--px);letter-spacing:.02em}
.postform textarea.field{resize:vertical;min-height:70px;font-family:var(--vt)}
.postform .row2{display:flex;align-items:center;gap:16px;justify-content:flex-end;flex-wrap:wrap}
.postform .row2 select{margin-right:auto}
.gem h3.ptitle,.qg h3.ptitle{margin:4px 0 8px;font:600 21px/1.2 var(--px);color:var(--ink);letter-spacing:.02em}
.gem .meme+.embed{margin-top:10px}

/* ===== Cloud : étape 2 (durée + visibilité) ===== */
.stage{padding:20px 22px;background:rgba(13,9,32,.93);display:flex;flex-direction:column;gap:14px;border-left:2px solid var(--glow)}
.picked{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto}
.picked li{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.picked li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.picked small{color:var(--dim)}
.stage .opt{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stage .lbl{font:600 15px/1 var(--px);color:var(--dim);min-width:72px}
.stage .ttl{justify-content:flex-start;margin:0}
.stage .hint{margin:0;font-size:13px;color:var(--dim)}
.stage .acts{display:flex;justify-content:flex-end;gap:18px}
.stage .acts .glow{font-size:15px}
.files .vtag{color:#ffd479}
.files .own{color:var(--mute)}
#fview{display:flex;gap:6px;flex-wrap:wrap}
.usage{flex-direction:row;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 6px}
@media (max-width:560px){.usage{justify-content:flex-start;flex-wrap:wrap}.stage{padding:16px}}

/* ===== Tools ===== */
.wip{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;margin-top:40px;background:rgba(13,9,32,.85);text-align:center}
.wip b{font:600 54px/1 var(--px);color:#ffc861;letter-spacing:.1em;text-shadow:0 0 10px rgba(255,200,97,.6),0 0 30px rgba(255,200,97,.3);animation:wipb 1.4s steps(2) infinite}
.wip span{color:var(--dim)}
@keyframes wipb{50%{opacity:.55}}

/* ===== Friends work ===== */
.addart{display:flex;margin:0 auto 18px}
.artform{display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.art{background:rgba(13,9,32,.93);display:flex;flex-direction:column}
.art .pic{display:block;aspect-ratio:4/3;overflow:hidden;background:#05030e}
.art .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s steps(6)}
.art a.pic:hover img{transform:scale(1.03)}
.art .txt{padding:12px 14px 12px}
.art h3{margin:0 0 6px;font:600 19px/1.15 var(--px);color:var(--ink)}
.art p{margin:0 0 8px;font-size:14px;color:var(--mute);white-space:pre-line}
.art .meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:13px;color:var(--dim)}
.art .meta b{color:var(--mute)}
.art .meta a{display:inline-flex;gap:6px;align-items:center;margin-left:auto}
.art .meta .btn{padding:4px;color:var(--dim)}
.gallery .empty{grid-column:1/-1;text-align:center}

/* ===== Games : le serveur Minecraft (DA du site) ===== */
.mc{background:rgba(13,9,32,.93);margin:0 0 26px;position:relative;padding:20px 0 20px;border-left:2px solid var(--glow)}
.mc-head{display:flex;align-items:center;gap:16px;padding:0 22px 12px}
.mc-ico{width:56px;height:56px;image-rendering:pixelated;flex:none;display:grid;place-items:center;color:var(--glow);
  box-shadow:0 0 0 2px var(--line);filter:drop-shadow(0 0 6px rgba(185,166,255,.35))}
.mc-ico img{width:100%;height:100%;image-rendering:pixelated;display:block}
.mc-id{min-width:0;flex:1}
.mc-id h2{font:600 19px/1 var(--px);color:var(--ink);letter-spacing:.06em;margin:0 0 8px;text-shadow:0 0 8px rgba(185,166,255,.45)}
.mc .motd{margin:0;font-size:15px;line-height:1.4;color:var(--mute);word-break:break-word}
.mc-state{display:flex;align-items:center;gap:8px;font:600 15px/1 var(--px);color:#ff8fb1;align-self:flex-start;margin-top:2px;white-space:nowrap}
.mc .dot{width:8px;height:8px;background:#ff6b8a;box-shadow:0 0 8px #ff6b8a}
.mc.on .dot{background:#3dff9a;box-shadow:0 0 10px #3dff9a;animation:blink 1.6s steps(2) infinite}
.mc.on .mc-state{color:#3dff9a}
.mc-addr{display:flex;align-items:center;gap:12px;margin:6px 22px 18px;flex-wrap:wrap}
.mc-addr small{color:var(--dim);font-size:13px}
.mc code{font:700 16px var(--vt);color:#fff;background:rgba(185,166,255,.1);padding:7px 10px;letter-spacing:.03em}
.mc-stats{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1px;margin:0 22px 24px;background:var(--line)}
.mc-tile{background:rgba(13,9,32,.98);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mc-tile small{font-size:12px;color:var(--dim)}
.mc-tile b{font:600 22px/1 var(--px);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:flex-end;gap:8px;text-shadow:0 0 8px rgba(185,166,255,.4)}
.mc-tile.big b{font-size:30px}
.mc-tile b small{font-size:15px;color:var(--dim);text-shadow:none}
#mcVersion{flex-direction:column;align-items:flex-start;gap:4px}
#mcVersion small{font:12px/1 var(--vt);color:var(--dim)}
.mc .pbar{height:6px;position:relative;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 8px)}
.mc .pbar i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,var(--glow) 0 6px,transparent 6px 8px);filter:drop-shadow(0 0 4px var(--glow));transition:width .5s steps(8)}
/* barres de signal */
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.sig i{width:4px;background:var(--line)}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:7px}.sig i:nth-child(3){height:10px}.sig i:nth-child(4){height:13px}.sig i:nth-child(5){height:16px}
.sig.s5 i,.sig.s4 i:nth-child(-n+4),.sig.s3 i:nth-child(-n+3){background:var(--glow);box-shadow:0 0 4px rgba(185,166,255,.6)}
.sig.s2 i:nth-child(-n+2),.sig.s1 i:nth-child(1){background:#ff8fb1}
.mc-sub{font:600 16px/1 var(--px);color:var(--ink);letter-spacing:.06em;margin:0 22px 12px;display:flex;align-items:center;gap:10px}
.mc-sub span{color:var(--dim)}
.mc-players{list-style:none;margin:0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.mc-players li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;background:rgba(185,166,255,.05);min-width:0;transition:background .15s steps(2)}
.mc-players li:hover{background:rgba(185,166,255,.12)}
.mc-players img{width:44px;height:44px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--line);transition:transform .15s steps(2),box-shadow .15s steps(2)}
.mc-players li:hover img{transform:translateY(-2px);box-shadow:0 0 0 2px var(--glow),0 0 12px rgba(185,166,255,.5)}
.mc-players span{font-size:13px;font-weight:700;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-players li.more{justify-content:center;background:none;color:var(--dim)}
.mc-players li.more b{font:600 22px/1 var(--px);color:var(--mute)}
.mc-players li.none{grid-column:1/-1;background:none;align-items:flex-start;padding:0;color:var(--dim);font-size:14px}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 22px 0;padding-top:16px;border-top:1px solid rgba(42,37,80,.6)}
.mc-links{display:flex;gap:18px;flex-wrap:wrap}
.mc-btn{display:inline-flex;align-items:center;gap:10px;font:600 17px/1 var(--px);letter-spacing:.04em;color:var(--ink);text-decoration:none;padding:6px 0}
.mc-btn .ico{color:var(--glow)}
.mc .checked{font-size:12px;color:var(--dim)}
@media (max-width:560px){.mc-head{padding:0 16px 10px;gap:12px}.mc-ico{width:44px;height:44px}.mc-addr,.mc-sub,.mc-players,.mc-foot{margin-left:16px;margin-right:16px}
  .mc-stats{grid-template-columns:1fr 1fr;margin:0 16px 20px}.mc-tile.big{grid-column:1/-1}.mc-players{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}}
@keyframes blink{50%{opacity:.35}}

/* ===== Art : musique + lecteur ===== */
.atabs{margin:0}
.art .cover{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#05030e}
.art .cover img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transition:filter .3s steps(3)}
.art .cover .badge-note{position:absolute;top:10px;right:10px;color:#ff7ad9;filter:drop-shadow(0 0 6px rgba(255,122,217,.7)) drop-shadow(2px 2px 0 #000)}
.art.playing .cover img{filter:brightness(.75) saturate(1.2)}
.art.playing .cover .badge-note{animation:notebop .5s steps(2) infinite alternate}
@keyframes notebop{to{transform:translateY(-4px) rotate(-8deg)}}
.player{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:6px 12px;align-items:center;padding:12px 14px 4px;position:relative}
.player .pp{grid-row:1/span 2;width:56px;height:56px;margin-top:-34px;position:relative;z-index:1;display:grid;place-items:center;border:0;cursor:pointer;color:#140a2a;background:#ff7ad9;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.4);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  transition:filter .12s steps(2),transform .12s steps(2)}
.player .pp:hover{filter:brightness(1.12) drop-shadow(0 0 8px rgba(255,122,217,.6))}
.player .pp:active{transform:translateY(2px)}
.player .wave{height:34px;display:flex;align-items:flex-end;gap:2px;cursor:pointer;align-self:end}
.player .wave i{flex:1;height:var(--h);min-height:3px;background:#2f2862;transition:background .1s steps(1)}
.player .wave i.done{background:#ff7ad9;box-shadow:0 0 6px rgba(255,122,217,.5)}
.player .wave:hover i{background:#3d3480}.player .wave:hover i.done{background:#ffa3e6}
.player .prow{display:flex;align-items:center;gap:8px}
.player .tm{font:600 13px/1 var(--px);color:var(--dim);font-variant-numeric:tabular-nums}
.player.on .tm.cur{color:#ff7ad9}
.player .mute{margin-left:auto;order:3;background:none;border:0;color:var(--dim);cursor:pointer;padding:2px;display:grid}
.player .mute:hover{color:var(--ink)}.player .mute.off{color:#ff8fb1}
.player .dur{order:2}
.art.music .txt{padding-top:6px}

/* ===== Art : visionneuse plein écran ===== */
.art button.pic{border:0;padding:0;cursor:zoom-in;position:relative;width:100%}
.art .pic .zoom{position:absolute;right:10px;bottom:10px;color:#fff;opacity:0;transition:opacity .15s steps(2);filter:drop-shadow(2px 2px 0 #000)}
.art .pic:hover .zoom,.art .pic:focus-visible .zoom{opacity:1}
.art .cover[data-view-art]{cursor:zoom-in}
html.lb-on{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:30;background:#05030e;display:grid;place-items:center;padding:56px 70px 24px}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;height:100%;justify-content:center}
.lightbox img{width:100%;height:calc(100vh - 190px);object-fit:contain;display:block;filter:drop-shadow(0 0 30px rgba(122,92,255,.25))}   /* agrandie pour remplir l'écran */
.lightbox img.px{image-rendering:pixelated}
.lightbox figcaption{text-align:center;max-width:720px}
.lightbox figcaption b{display:block;font:600 22px/1.2 var(--px);color:var(--ink);text-shadow:0 0 10px rgba(185,166,255,.5)}
.lightbox figcaption span{font-size:13px;color:var(--dim)}
.lightbox figcaption p{margin:6px 0 0;font-size:14px;color:var(--mute);white-space:pre-line}
.lightbox figcaption p:empty{display:none}
.lb-btn{position:absolute;background:none;border:0;color:var(--mute);cursor:pointer;padding:10px;transition:color .15s steps(2),filter .15s steps(2)}
.lb-btn:hover,.lb-btn:focus-visible{color:#fff;filter:drop-shadow(0 0 8px var(--glow));outline:none}
.lb-close{top:10px;right:12px}.lb-full{top:10px;right:62px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}.lb-next{right:10px;top:50%;transform:translateY(-50%)}
.lightbox:fullscreen{padding:24px 70px}
.lightbox:fullscreen img{height:calc(100vh - 130px)}
@media (max-width:560px){.lightbox{padding:56px 10px 16px}.lb-prev,.lb-next{top:auto;bottom:10px;transform:none}}

/* ===== inscriptions ouvertes / fermées ===== */
.adm-panel header .sgstate{font:600 13px/1 var(--px);padding:4px 7px;margin-left:4px}
.sgstate.on{color:#3dff9a;background:rgba(61,255,154,.08)}
.sgstate.off{color:#ff8fb1;background:rgba(255,143,177,.1)}
.adm-panel header #signupToggle{margin-left:auto}
.closed-note{margin:0 0 18px;padding:10px 12px;font-size:13px;color:#ff8fb1;background:rgba(255,143,177,.08);border-left:2px solid #ff8fb1}

/* ===== Websites : cartes pixel art ===== */
#siteList{gap:14px}
.site-card{--ic:#6fd8ff;--b:#2f2862;position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding:14px 18px 14px 14px;
  color:var(--ink);text-decoration:none;background:var(--b);transition:transform .12s steps(2),background .12s steps(2);
  clip-path:polygon(0 6px,2px 6px,2px 4px,4px 4px,4px 2px,6px 2px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 4px) 2px,calc(100% - 4px) 4px,calc(100% - 2px) 4px,calc(100% - 2px) 6px,100% 6px,
    100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,
    6px 100%,6px calc(100% - 2px),4px calc(100% - 2px),4px calc(100% - 4px),2px calc(100% - 4px),2px calc(100% - 6px),0 calc(100% - 6px))}
/* intérieur : un 2e calque décalé de 2 px = bordure pixel, avec biseau clair en haut à gauche et sombre en bas à droite */
.site-card::before{content:"";position:absolute;inset:2px;z-index:-1;background:linear-gradient(180deg,#141030,#0c0920);clip-path:inherit;
  box-shadow:inset 2px 2px 0 rgba(185,166,255,.14),inset -2px -2px 0 rgba(0,0,0,.45)}
.site-card{isolation:isolate}
.site-card .slot{width:48px;height:48px;display:grid;place-items:center;background:color-mix(in srgb,var(--ic) 14%,#0c0920);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ic) 45%,transparent),inset 4px 4px 0 rgba(255,255,255,.05)}
.site-card .slot .ico{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ic) 70%,transparent))}
.site-card .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.site-card b{font:600 19px/1.1 var(--px);letter-spacing:.03em}
.site-card small{color:var(--mute);font-size:13px;line-height:1.35}
.site-card em{font-style:normal;font-size:11px;color:var(--dim);letter-spacing:.05em}
.site-card .num{font:600 13px/1 var(--px);color:var(--dim);align-self:start}
.site-card .go{color:var(--dim);transition:transform .12s steps(2),color .12s steps(2)}
.site-card.top b{color:#ffe6a8}
.site-card:hover,.site-card:focus-visible,.site-card.linked{transform:translateX(4px)}
.site-card:hover .go,.site-card.linked .go{color:#fff;transform:translateX(3px)}
.site-card:hover .num,.site-card.linked .num{color:#bff4ff}
@media (max-width:560px){.site-card{gap:12px;padding:12px 14px 12px 12px}.site-card .slot{width:40px;height:40px}.site-card .num{display:none}}
/* étiquette du point sur la planète */
.geo-tag{position:fixed;z-index:3;pointer-events:none;transform:translateY(-100%);display:flex;flex-direction:column;gap:2px;padding:5px 8px;
  background:rgba(10,4,16,.85);box-shadow:inset 0 0 0 1px #ff3355,0 0 12px rgba(255,51,85,.35);font:600 12px/1.2 var(--px);color:#fff;white-space:nowrap}
.geo-tag span{font:11px/1 var(--vt);color:#ff8fa3}
.geo-tag.back{opacity:.45}

/* ===== Tools : calculatrice ===== */
.calc{width:min(340px,100%)}
.calc header{display:flex;align-items:center;gap:6px;padding:12px 2px 10px;font:600 14px/1 var(--px);color:var(--mute);letter-spacing:.1em}
.calc header span{margin-right:auto}
.calc header i{width:10px;height:10px;background:var(--line)}
.calc header i:nth-of-type(1){background:#ff6b8a}.calc header i:nth-of-type(2){background:#ffd479}.calc header i:nth-of-type(3){background:#3dff9a}
.calc .screen{background:#06110c;padding:12px 14px;margin-bottom:14px;box-shadow:inset 0 0 0 2px #1d3a2c,inset 0 0 24px rgba(61,255,154,.08);min-height:92px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:6px;overflow:hidden}
.calc .expr{font:16px/1.2 var(--vt);color:#3a8f66;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:right}
.calc .expr .cc{color:#c98b4a}
.calc .res{font:600 38px/1 var(--px);color:#7dffbf;text-shadow:0 0 10px rgba(61,255,154,.5);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc .res.final{color:#cfffe6}
.calc .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.calc .keys button{height:56px;border:0;cursor:pointer;font:600 22px/1 var(--px);color:var(--ink);background:#262054;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.08);
  clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px));
  transition:filter .08s steps(1),transform .08s steps(1)}
.calc .keys button:hover{filter:brightness(1.25)}
.calc .keys button:active,.calc .keys button.hit{transform:translateY(2px);box-shadow:inset 3px 3px 0 rgba(0,0,0,.35)}
.calc .keys .fn{background:#1a1640;color:var(--mute);font-size:18px}
.calc .keys .op{background:#3a2d7a;color:#d9ccff}
.calc .keys .eq{background:var(--glow);color:#140a2a}
.calc .keys .caca{background:#6b4423;color:#ffe2b8;font-size:19px;text-shadow:2px 2px 0 rgba(0,0,0,.35)}
.calc.caca-on{animation:cacashake .3s steps(4)}
@keyframes cacashake{25%{transform:translate(-3px,1px) rotate(-1deg)}50%{transform:translate(3px,-1px) rotate(1deg)}75%{transform:translate(-2px,0)}}

/* ===== Tools : pet ===== */
.petbox{width:min(500px,100%)}
.petintro{margin:0 0 14px;color:var(--dim);font-size:13px}
.petbox header{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.petbox header span{font:600 16px/1 var(--px);color:var(--ink);letter-spacing:.08em}
.petbox header small{color:var(--dim);font-size:13px}
.petrow{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.petview{width:150px;height:150px;flex:none;display:grid;place-items:center;background:#0a0818;
  background-image:linear-gradient(45deg,#110d26 25%,transparent 25%,transparent 75%,#110d26 75%),linear-gradient(45deg,#110d26 25%,transparent 25%,transparent 75%,#110d26 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;box-shadow:inset 0 0 0 2px var(--line)}
.petview img{width:128px;height:128px;object-fit:contain;image-rendering:pixelated;animation:petbob 1.6s steps(4) infinite alternate}
@keyframes petbob{to{transform:translateY(-6px)}}
.petside{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px}
.petlist{display:flex;gap:8px;flex-wrap:wrap}
.petlist button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px;background:#1a1640;border:2px solid transparent;color:var(--mute);cursor:pointer;font:600 13px/1 var(--px)}
.petlist button img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.petlist button:hover{color:var(--ink)}
.petlist button[aria-checked=true]{border-color:var(--glow);color:#fff;background:#231d55}
.petlist button[data-pet=custom]{justify-content:center;min-width:62px}
.petlist button[data-pet=custom][aria-checked=true]{display:flex!important}
.petup{cursor:pointer;align-self:flex-start;font-size:13px}
.petbox .hint{margin:0;font-size:12px;color:var(--dim)}

/* ===== Tools : tuiles + fenêtres ===== */
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tooltile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 16px 18px;text-align:left;border:0;cursor:pointer;color:var(--ink);
  background:#141030;box-shadow:inset 0 0 0 2px var(--line),inset 4px 4px 0 rgba(185,166,255,.07),inset -4px -4px 0 rgba(0,0,0,.4);transition:transform .12s steps(2),box-shadow .12s steps(2)}
.tooltile .tico{width:56px;height:56px;display:grid;place-items:center;margin-bottom:6px;background:#1d1748;color:var(--glow);box-shadow:inset 0 0 0 2px #2f2862}
.tooltile b{font:600 18px/1.1 var(--px);letter-spacing:.03em}
.tooltile small{font-size:13px;color:var(--dim)}
.tooltile:not(.soon):hover,.tooltile:not(.soon):focus-visible{transform:translateY(-4px)}
.tooltile:not(.soon):hover .tico{color:#fff;background:#2a2166}
.tooltile.soon{cursor:default;opacity:.5}
.tooltile.soon em{position:absolute;top:12px;right:12px;font:600 11px/1 var(--px);font-style:normal;color:#ffc861;padding:3px 5px;background:rgba(255,200,97,.1)}
.toolwin-back{position:fixed;inset:0;z-index:25;background:rgba(3,1,10,.75);display:grid;place-items:center;padding:16px;overflow:auto}
.toolwin{background:#141030;box-shadow:inset 0 0 0 2px var(--line),inset 4px 4px 0 rgba(185,166,255,.08),inset -4px -4px 0 rgba(0,0,0,.4),0 0 60px rgba(122,92,255,.25);padding:0 18px 20px;max-width:100%}
.toolwin.pop{animation:winpop .22s steps(4)}
@keyframes winpop{from{transform:scale(.9);opacity:0}}
.toolwin header{display:flex;align-items:center;gap:10px;padding:12px 0 14px;font:600 15px/1 var(--px);color:var(--mute);letter-spacing:.1em}
.toolwin header span{margin-right:auto}
.toolwin header span::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--glow);box-shadow:12px 0 0 #ffd479,24px 0 0 #3dff9a;vertical-align:middle;margin-right:44px}
.twx{background:none;border:0;color:var(--dim);cursor:pointer;padding:6px;display:grid}
.twx:hover{color:#fff;filter:drop-shadow(0 0 6px var(--glow))}
/* Websites : 2 colonnes sur grand écran (moins de défilement) */
#siteList{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}

/* ===== cadre pixel commun (basse résolution, pixels de 4 px) =====
   cartes Websites, tuiles Tools, œuvres Art, panneau Minecraft, fenêtres d'outils, connexion.
   Cadre = fond de l'élément ; intérieur = ::before décalé de 4 px. Au repos : violet sombre ; au survol : blanc avec reflets rose pâle / cyan pâle */
.site-card,.tooltile,.art,.mc,.toolwin,.authcard{
  --frame:linear-gradient(135deg,#3c3478,#2a2458 50%,#3c3478);
  --fill:#110d27;
  position:relative;isolation:isolate;border:0;box-shadow:none;background:var(--frame);
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
  transition:transform .12s steps(2)}
.site-card::before,.tooltile::before,.art::before,.mc::before,.toolwin::before,.authcard::before{
  content:"";position:absolute;inset:4px;z-index:-1;pointer-events:none;background:var(--fill);
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  box-shadow:inset 4px 4px 0 rgba(255,255,255,.05),inset -4px -4px 0 rgba(0,0,0,.35)}
.mc{border-left:0}
/* survol / sélection : blanc, avec un reflet cyan pâle en haut à gauche et rose pâle en bas à droite */
.site-card:hover,.site-card:focus-visible,.site-card.linked,
.tooltile:not(.soon):hover,.tooltile:not(.soon):focus-visible,
.art:hover,.art.playing{--frame:linear-gradient(135deg,#bff4ff,#ffffff 45%,#ffffff 55%,#ffc8ec);outline:none}
.site-card.top{--frame:linear-gradient(135deg,#6a5a2a,#4a3e1c 50%,#6a5a2a)}
.site-card.top:hover,.site-card.top.linked{--frame:linear-gradient(135deg,#fff3c4,#ffffff 50%,#ffc8ec)}
.toolwin,.authcard{--frame:linear-gradient(135deg,#bff4ff,#d9d2ff 50%,#ffc8ec);--fill:#120e2a}
.site-card .slot,.tooltile .tico{clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.art .pic{margin:4px 4px 0}
.art .txt{padding:12px 16px 16px}
.art.notch{clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,
    100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,
    8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px))}