/* Achievements, Profile, Studios und Projekte (community.js). Baut auf portal.css auf (Farben, Boxen, Listen). */

/* ---------------------------------------------------------------- Abzeichen
   Sechseck mit Metall-Rahmen je Stufe, innen dunkle Fläche mit eigenem Linien-Motiv (badges.js).
   Die Stufe setzt nur Farben als Variablen, damit Abzeichen, Stufen-Text und Rahmen zusammenpassen. */
.t-bronze { --m1:#ffd2a6; --m2:#c4733a; --m3:#5e2c10; --ink:#ffc796; --core:#2d1a10; --tone:#e39a5f; }
.t-silver { --m1:#ffffff; --m2:#a9b4c3; --m3:#4a5262; --ink:#eef3f8; --core:#1f2430; --tone:#c4ccd8; }
.t-gold { --m1:#fff4b8; --m2:#e8ad2c; --m3:#7a4c00; --ink:#ffe07a; --core:#2c2108; --tone:#f1c24a; }
.t-platinum { --m1:#f2fdff; --m2:#9fe3ff; --m3:#6f62d8; --ink:#e6fbff; --core:#181d36; --tone:#a9e7ff; }

.achb { --size:56px; position:relative; display:inline-block; flex:none; width:var(--size); height:calc(var(--size) * 1.1547); vertical-align:middle;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.achb .b-rim, .achb .b-core { position:absolute; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.achb .b-rim { inset:0; background:linear-gradient(160deg, var(--m1) 0%, var(--m2) 38%, var(--m3) 62%, var(--m2) 82%, var(--m1) 100%); }
.achb .b-core { inset:calc(var(--size) * .075); display:grid; place-items:center;
  background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.16), transparent 58%), linear-gradient(180deg, var(--core), #0d0e16); }
.achb .b-core::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.1) 48%, transparent 58%); }
.achb .b-ico { width:52%; height:52%; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--tone) 55%, transparent)); }
.achb.t-platinum { filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(159,227,255,.35)); }
.achb.s { --size:30px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.achb.s .b-ico { stroke-width:2.2; }
.achb.l { --size:84px; }
/* Gesperrt: grau und gedämpft, das Motiv bleibt erkennbar. Versteckt: nur ein Fragezeichen auf grauem Grund. */
.achb.dim { filter:grayscale(1) brightness(.5) contrast(.9); opacity:.75; }
.achb.masked { --m1:#5a5f78; --m2:#34374d; --m3:#1d1f2e; --ink:#8d99ae; --tone:#8d99ae; }

/* ---------------------------------------------------------------- Liste der Achievements */
.ach-list { display:grid; gap:10px; }
.chips + .ach-list { margin-top:16px; }
.ach { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; }
.ach.done { background:linear-gradient(90deg, rgba(239,35,60,.1), var(--surface) 45%); border-color:rgba(239,35,60,.28); }
.ach.open .ach-t b { color:#c3cad6; }
.ach-t { min-width:0; }
.ach-t b { display:block; font-size:.95rem; }
.ach-t p { margin:2px 0 0; color:var(--muted); font-size:.84rem; }
.ach-m { display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:6px; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#666c84; }
.tier { color:var(--tone); }
.ach-p { display:flex; align-items:center; gap:10px; margin-top:8px; max-width:360px; }
.ach-p .meter { flex:1; height:6px; }
.ach-p small { color:var(--muted); font-size:.74rem; font-weight:700; white-space:nowrap; }
.ach-r { display:flex; gap:20px; align-items:center; text-align:right; }
.ach-date { font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); line-height:1.4; }
.ach-date time { color:var(--fg); font-size:.8rem; font-weight:600; letter-spacing:0; text-transform:none; }
.rar { display:grid; justify-items:end; min-width:78px; }
.rar b { font:400 1.7rem/1 var(--display); letter-spacing:.02em; }
.rar small { font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* Level: kleines Sechseck in Akzentfarbe, im Namen und in Kästen. */
.lvl { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:46px; height:53px; flex:none; vertical-align:middle; margin-left:6px;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background:linear-gradient(160deg, var(--imperial-red), var(--crimson) 60%, #8f0021); color:#fff;
  font-family:var(--text); text-transform:none; letter-spacing:0; }
.lvl b { font:400 1.45rem/1 var(--display); letter-spacing:.02em; }
.lvl small { font-size:.48rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-top:1px; }
.lvl-row { display:flex; gap:14px; align-items:center; }
.lvl-row .lvl { margin:0; }
.lvl-row > div b { display:block; font-size:.92rem; }
.lvl-row > div small { display:block; color:var(--muted); font-size:.78rem; }
.mini-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }

.ach-sum { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:16px 20px; margin:-6px 0 24px; background:linear-gradient(90deg, rgba(239,35,60,.12), var(--surface) 40%); border:1px solid var(--line); border-radius:var(--radius); }
.ach-sum .lvl { margin:0; width:54px; height:62px; }
.ach-sum .t { flex:1 1 280px; min-width:0; }
.ach-sum .t b { display:block; font-size:1rem; }
.ach-sum .t small { display:block; color:var(--muted); font-size:.8rem; }
.ach-sum .meter { margin-top:10px; max-width:520px; }
.ach-head { display:flex; gap:14px; align-items:center; }
.ach-head .meter { flex:1; }
.ach-head span { font-size:.8rem; font-weight:700; color:var(--muted); white-space:nowrap; }

/* Vitrine unter dem Profilkopf: die seltensten Erfolge. */
.showcase { display:flex; align-items:center; gap:24px; margin:24px 0 0; padding:16px 22px; background:linear-gradient(90deg, rgba(239,35,60,.12), var(--surface) 35%); border:1px solid var(--line); border-radius:12px; }
.showcase:hover { border-color:rgba(239,35,60,.5); color:var(--fg); }
.sc-t, .sc-p { display:grid; flex:none; }
.sc-p { text-align:right; }
.sc-t b, .sc-p b { font:400 2.4rem/1 var(--display); letter-spacing:.02em; }
.sc-t small, .sc-p small { font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.sc-b { flex:1; min-width:0; display:flex; gap:12px; justify-content:center; overflow-x:auto; scrollbar-width:none; }
.sc-i { display:grid; justify-items:center; align-content:start; gap:6px; width:96px; flex:none; text-align:center; }
.sc-i small { font-size:.7rem; color:#c3cad6; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------------------------------------------------------------- Studios */
.slogo { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:8px; font:400 1rem/1 var(--display); letter-spacing:.04em; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.slogo.l { width:76px; height:76px; border-radius:16px; font-size:1.9rem; box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
.slogo.xl { width:120px; height:120px; border-radius:24px; font-size:3rem; box-shadow:0 0 0 4px var(--bg), 0 0 0 7px var(--accent), 0 0 34px rgba(239,35,60,.55); }
.grid.studios { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.studio-card { position:relative; background:var(--card); border-radius:var(--radius); padding:24px 14px 18px; display:grid; justify-items:center; align-content:start; text-align:center; gap:6px; transition:transform .18s, box-shadow .18s; min-width:0; }
.studio-card:hover { transform:translateY(-3px); box-shadow:var(--glow); color:var(--fg); }
.studio-card .slogo { margin-bottom:8px; }
.studio-card b { font-size:.92rem; }
.studio-card small { color:var(--muted); font-size:.76rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.studio-card .n { font-size:.7rem; font-weight:700; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; }
.studio-card .pill { position:absolute; top:10px; right:10px; }
.live-n { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; }
.live-n .live-dot, .li .n .live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }

.members { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
.member { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; min-width:0; }
.member .t { flex:1; min-width:0; }
.member .t b { display:block; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member .t small { display:block; color:var(--muted); font-size:.76rem; }
.member .row-acts { margin-left:auto; gap:8px; }
.members.compact { grid-template-columns:1fr; gap:10px; }
.members.compact .member { background:none; border:0; padding:0; }

/* Knöpfe mit einer Aktion; die Meldung erscheint nur bei einem Fehler. */
.act-form { display:inline-grid; gap:6px; max-width:none; }
.act-form .form-msg:empty { display:none; }
.act-form .notice { font-size:.78rem; padding:8px 10px; white-space:normal; }
.li .row-acts { gap:8px; }
.li .act-form { flex:none; }
.box.invites { border-color:rgba(239,35,60,.55); box-shadow:var(--glow); }
.li.inv { flex-wrap:wrap; }
.li.inv .row-acts { width:100%; padding-left:46px; }

/* ---------------------------------------------------------------- Projekte */
.pill.st-development, .pill.st-playtest, .pill.st-released { background:rgba(18,19,29,.78); backdrop-filter:blur(4px); }
.pill.st-development { color:#c3cad6; }
.pill.st-playtest { color:#f1c24a; }
.pill.st-released { color:#7be0aa; }
.pill.st-development::before, .pill.st-playtest::before, .pill.st-released::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.panel .li { padding:2px 0; }
.panel form.stack { max-width:none; gap:10px; }
.edit-box summary { list-style:none; cursor:pointer; width:100%; }
.edit-box summary::-webkit-details-marker { display:none; }
.edit-box[open] summary { margin-bottom:14px; }
.edit-box form.stack { max-width:none; }
.edit-box > .act-form { margin-top:14px; }
.social-acts { display:flex; gap:10px; align-items:center; }
.social-acts:empty { display:none; }

@media (max-width:900px) {
  .ach { grid-template-columns:auto minmax(0,1fr); gap:12px 14px; padding:12px 14px; }
  .ach-r { grid-column:2; justify-content:flex-start; text-align:left; gap:16px; }
  .rar { justify-items:start; min-width:0; grid-auto-flow:column; align-items:baseline; gap:8px; }
  .rar b { font-size:1.2rem; }
  .ach-date { white-space:nowrap; }
  .ach-date br { display:none; }
  .ach-date time { margin-left:4px; }
  .showcase { flex-wrap:wrap; gap:14px 20px; padding:14px 16px; }
  .sc-b { order:3; flex:1 1 100%; justify-content:flex-start; }
  .sc-p { margin-left:auto; }
  .slogo.xl { width:96px; height:96px; font-size:2.4rem; border-radius:20px; }
  .members { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .achb { --size:46px; }
  .achb.s { --size:28px; }
  .lvl { width:40px; height:46px; }
  .lvl b { font-size:1.2rem; }
}
/* Schmale Kästen rechts: Beschriftungen der Zahlen sonst abgeschnitten („Members“, „Downloads“). */
.rail .stat-t { padding:12px 10px; }
.rail .stat-t span { letter-spacing:.03em; }
.panel h3.box-t { font:400 1.35rem/1 var(--display); letter-spacing:.04em; text-transform:uppercase; }