/* =====================================================================
   ATLAS · Skin Studio — spieler.css
   Bereich „Spieler“ (Suche und Profile). Baut auf info.css auf:
   gleiche Farben, Karten und Knöpfe. Zuerst fürs Handy gebaut.
   ===================================================================== */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
canvas.kopf,canvas.mini,canvas.cape,.figur-flach{image-rendering:pixelated;image-rendering:crisp-edges}

/* Reiter in der Kopfzeile */
.bar .tabs{display:flex;gap:4px;margin-right:auto;margin-left:18px;min-width:0;overflow-x:auto;scrollbar-width:none}
.bar .tabs::-webkit-scrollbar{display:none}
.bar .tabs a{white-space:nowrap;flex:none}
.bar .tabs .kurz{display:none}
.bar .tabs a{position:relative;padding:8px 12px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--dim);text-decoration:none}
.bar .tabs a:hover{color:var(--text);background:var(--hi)}
.bar .tabs a[aria-current="page"]{color:var(--text);background:var(--card);box-shadow:inset 0 1px 0 var(--hi)}
.bar .tabs a[aria-current="page"]::after{content:'';position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--green-text)}
.bar .lang{font-size:14px;font-weight:600;color:var(--dim);text-decoration:none}
.bar .lang:hover{color:var(--text)}
/* Sprachmenü (Seiten in mehr als zwei Sprachen, z. B. Werkzeuge) – ohne Skript */
.bar .sprachen{position:relative;flex:none}
.bar .sprachen summary{list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--dim);padding:7px 10px;border-radius:10px;
  white-space:nowrap}
.bar .sprachen summary::-webkit-details-marker{display:none}
.bar .sprachen summary::after{content:'';display:inline-block;margin-left:7px;border:4.5px solid transparent;border-top-color:currentColor;
  transform:translateY(2px)}
.bar .sprachen summary:hover,.bar .sprachen[open] summary{color:var(--text);background:var(--hi)}
.bar .sprachen ul{position:absolute;right:0;top:42px;z-index:6;list-style:none;min-width:160px;padding:6px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.bar .sprachen a{display:block;padding:7px 10px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.bar .sprachen a:hover{background:var(--card)}
.bar .sprachen a[aria-current]{color:var(--green-text)}
.bar .sprachen .kurz{display:none}

.spieler{padding:28px 20px 56px}
.kopfbereich{padding:18px 0 22px}
.kopfbereich h1{font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.015em;margin:8px 0 12px}
.kopfbereich .lead{margin-bottom:20px}

/* Suche */
.suche{position:relative;max-width:560px;margin-bottom:18px}
.suche-feld{display:flex;gap:8px}
.suche-feld input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font:inherit;font-size:16.5px;box-shadow:inset 0 1px 0 var(--hi)}
.suche-feld input:focus{outline:2px solid var(--green-text);outline-offset:1px}
.suche-feld .btn{height:48px}
.vorschlaege{position:absolute;z-index:4;left:0;right:0;top:54px;list-style:none;padding:6px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.vorschlaege li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text);font-weight:600}
.vorschlaege li:hover,.vorschlaege li.aktiv{background:var(--card)}
.vorschlaege canvas{width:24px;height:24px;border-radius:4px;background:var(--line)}

/* Profil */
.profil{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:26px;align-items:center;padding:22px;margin-bottom:16px}
.figur{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:radial-gradient(closest-side,rgba(127,211,92,.14),transparent),linear-gradient(180deg,var(--hi),transparent 70%);
  border:1px solid var(--line)}
.figur canvas.figur-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.figur canvas.figur-canvas:active{cursor:grabbing}
.figur .figur-flach{display:block;width:50%;height:auto;margin:10% auto}
.figur noscript img{width:60%;margin:20% auto;image-rendering:pixelated}
.figur .leer{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center}
.profil-info h1{font-size:clamp(30px,5.5vw,48px);line-height:1.05;letter-spacing:-.01em;margin:6px 0 10px;word-break:break-all}
.frueher{color:var(--gold);margin-bottom:8px}
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin:14px 0 18px}
.fakten div{min-width:0}
.fakten dt{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.fakten dd{color:var(--text);overflow-wrap:anywhere}
.fakten code{font:500 13.5px/1.5 ui-monospace,Consolas,monospace;color:var(--dim)}
.kopieren{margin-left:6px;padding:2px 8px;border-radius:7px;border:1px solid var(--line);background:var(--hi);color:var(--dim);
  font:600 12.5px/1.6 inherit;cursor:pointer}
.kopieren:hover{color:var(--text)}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px}
button.btn{cursor:pointer;font-family:inherit}

/* Karten unten */
.spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.spalten .card,.pruefen,.varianten{padding:20px}
.card h2{font-size:20px;margin-bottom:12px}
.hinweis{font-size:13.5px;color:var(--mute);margin-top:12px}
.leer{color:var(--mute)}
/* Capes auf Profil- und Cape-Seiten */
.capes-frueher{display:flex;flex-wrap:wrap;gap:12px}
.cape-box.frueher{gap:10px}
.cape-box.frueher canvas{width:40px;height:64px}
.cape-box .cape-info{font-size:13.5px;color:var(--dim)}
h3.klein,h2.klein{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.cape-gruppe,.capes-hinweis{padding:20px;margin-bottom:16px}
.cape-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.cape-kachel{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:12px;background:var(--hi);
  border:1px solid transparent;text-decoration:none;color:var(--text);text-align:center}
.cape-kachel:hover{border-color:var(--line)}
.cape-kachel canvas{width:60px;height:96px;border-radius:4px}
.cape-kachel b{font-size:14px;line-height:1.25}
.cape-kachel span{font-size:12px;color:var(--mute)}
.cape-profil{grid-template-columns:auto 1fr;align-items:start}
.cape-gross{display:grid;place-items:center;padding:18px 28px;border-radius:16px;border:1px solid var(--line);
  background:radial-gradient(closest-side,rgba(127,211,92,.12),transparent),linear-gradient(180deg,var(--hi),transparent 70%)}
.cape-gross canvas{width:120px;height:192px;border-radius:6px}
/* Befehle & Formate */
.formate{display:grid;gap:12px}
.formate div{min-width:0}
.formate dt{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.formate dd{display:flex;align-items:flex-start;gap:6px}
.formate code{font:500 12.5px/1.5 ui-monospace,Consolas,monospace;color:var(--dim);overflow-wrap:anywhere;min-width:0}
.formate .kopieren{flex:none;margin-left:0}
.ausblenden{text-align:center;font-size:13px;margin:0 0 6px}
.ausblenden a{color:var(--mute)}
.ausblenden a:hover{color:var(--text)}
.fehler{color:#ff8a93}
.frei{color:var(--green-text);font-weight:700}
.vergeben{color:var(--gold);font-weight:700}
.pruefen{margin-bottom:16px}
.pruefen .suche-feld{max-width:460px}
.pruef-ergebnis{margin-top:12px;min-height:1px}

.namen{list-style:none;display:grid;gap:8px}
.namen li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:9px 12px;border-radius:10px;background:var(--hi)}
.namen li b{font-size:16px}
.namen li span{font-size:13.5px;color:var(--mute)}
.namen li.jetzt{outline:1px solid rgba(127,211,92,.45)}
.namen .marke{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-text)}

.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.skins a.skin{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:12px;
  background:var(--hi);border:1px solid transparent;text-decoration:none;color:var(--mute);font-size:12px}
.skins a.skin:hover{border-color:var(--line);color:var(--text)}
.skins a.skin.jetzt span{color:var(--green-text);font-weight:700}
.skins a.skin.gewaehlt{border-color:var(--green-text)}
.skins canvas.mini{width:48px;height:96px}

.cape-box{display:flex;align-items:center;gap:16px}
.cape-box canvas{width:60px;height:96px;border-radius:4px}
.cape-box div{display:grid}
.cape-box span{font-size:13.5px;color:var(--mute)}

.leute{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.leute a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--hi);
  color:var(--text);text-decoration:none;font-weight:600;font-size:14.5px;overflow:hidden}
.leute a:hover{background:var(--line)}
.leute span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leute canvas{flex:none;width:32px;height:32px;border-radius:5px;background:var(--line)}

.varianten{margin-bottom:16px}
.varianten[hidden]{display:none}
.varianten-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px}
.variante{display:grid;place-items:center;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:var(--hi);cursor:pointer}
.variante:hover{border-color:var(--green-text)}
.variante canvas{width:48px;height:96px;image-rendering:pixelated}

@media (max-width:720px){
  .profil{grid-template-columns:1fr;padding:16px}
  .figur{max-width:320px;width:100%;margin:0 auto}
  .bar .tabs{margin-left:8px}
  .bar .tabs a{padding:8px 9px;font-size:14px}
}
@media (max-width:620px){
  .bar .tabs .voll{display:none}
  .bar .tabs .kurz{display:inline}
}
@media (max-width:520px){
  .bar .sprachen .voll{display:none}
  .bar .sprachen .kurz{display:inline}
  .bar .sprachen summary{padding:7px 8px}
}
@media (max-width:420px){
  .bar .lang{display:none}
  .logo-text{display:none}
  .bar-in{gap:8px}
  .bar .tabs{gap:2px;margin-left:4px;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .bar .tabs a{padding:8px 7px;font-size:13.5px}
}