/* Community capes: the cape grid (cards from cosmetics.css), the submit form and your submissions. */

.community { padding-bottom: 96px; }
.community-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.community .loading { grid-column: 1 / -1; display: grid; place-items: center; padding: 48px 0; }
.community .more { margin: 24px auto 0; display: flex; }

/* ---- cards */
.cm-card { --r: #4fd1c5; }
.cm-card .thumb { display: grid; place-items: center; aspect-ratio: 4 / 5;
  background: radial-gradient(circle at 50% 40%, rgba(79, 209, 197, 0.14), transparent 70%), var(--raised); }
.cm-card .thumb img { width: auto; height: 82%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.cm-card .by { display: block; margin-top: 2px; font-size: 13px; color: var(--dim); }
.cm-card .desc { margin-top: 6px; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-card .row { margin-top: 12px; }
.cm-card .row .btn { padding: 8px 13px 10px; font-size: 13.5px; }
.like { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; font: 400 11.5px/1 var(--pixel); color: var(--muted);
  border: 1px solid var(--line2); border-radius: 2px; transition: color 0.15s, border-color 0.15s; }
.like svg.i { width: 15px; height: 15px; }
.like:hover { color: var(--text); border-color: var(--muted); }
.like.on { color: #ff6fae; border-color: rgba(255, 111, 174, 0.45); }
.like.on svg.i { fill: currentColor; }
.flag { position: absolute; z-index: 1; top: 10px; left: 10px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted);
  background: rgba(7, 8, 15, 0.8); border: 1px solid var(--line2); border-radius: 2px; opacity: 0; transition: opacity 0.15s, color 0.15s; }
.flag svg.i { width: 15px; height: 15px; }
.cm-card:hover .flag, .flag:focus-visible { opacity: 1; }
.flag:hover { color: var(--bad); }

/* ---- submit */
.submit h2 { max-width: 640px; }
.submit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-top: 36px; align-items: start; }
.steps { list-style: none; counter-reset: step; padding: 8px 26px; }
.steps li { counter-increment: step; position: relative; display: grid; gap: 6px; padding: 18px 0 18px 44px; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 18px; width: 28px; height: 28px; display: grid; place-items: center;
  font: 400 13px/1 var(--pixel); color: #1a1004; background: var(--lumen); }
.steps b { font-size: 16px; }
.steps span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.steps .dl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.sw { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; }
.gold-sw { background: #f6c25b; }
.blue-sw { background: #5a64b8; }

.submit-form { padding: 24px; }
.signin-gate { display: grid; justify-items: start; gap: 14px; color: var(--muted); }
.form-body { display: grid; gap: 14px; }
.drop { position: relative; display: grid; place-items: center; min-height: 220px; padding: 16px; cursor: pointer; text-align: center;
  background: var(--raised); border: 1px dashed var(--line2); border-radius: var(--radius); transition: border-color 0.15s; }
.drop:hover, .drop.over { border-color: var(--lumen); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop canvas { height: 190px; width: auto; aspect-ratio: 10 / 16; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.drop-text { display: grid; justify-items: center; gap: 6px; color: var(--muted); }
.drop-text svg.i { width: 26px; height: 26px; color: var(--lumen); }
.drop-text b { color: var(--text); }
.drop-text small { color: var(--dim); }
.file-note { min-height: 1em; font-size: 13.5px; color: var(--muted); }
.file-note.bad, .form-error { color: var(--bad); font-size: 14px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.field small { font-weight: 500; color: var(--dim); }
.field input { height: 42px; padding: 0 12px; background: var(--void); border: 1px solid var(--line2); border-radius: var(--radius); outline: none; }
.field input:focus { border-color: var(--lumen); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--lumen); }
.form-body > .btn { justify-self: start; }

/* ---- your capes */
.mine { margin-top: 40px; }
.mine h3 { font-size: 20px; }
.mine-list { display: grid; gap: 8px; margin-top: 14px; }
.mine-row { display: flex; align-items: center; gap: 16px; padding: 10px 14px; }
.mine-row img { width: 40px; height: 64px; object-fit: contain; image-rendering: pixelated; background: var(--raised); flex-shrink: 0; }
.mine-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mine-info b { font-size: 15.5px; }
.mine-info .meta { flex-basis: 100%; font-size: 13.5px; color: var(--muted); }

/* ---- report dialog */
.report { width: min(440px, calc(100% - 32px)); margin: auto; padding: 26px; color: var(--text); border: 1px solid var(--line2); }
.report::backdrop { background: rgba(4, 4, 10, 0.78); }
.report h3 { font-size: 22px; }
.report p { margin-top: 6px; color: var(--muted); }
.reasons { display: grid; gap: 8px; margin: 18px 0 14px; }
.reasons label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; font-size: 14.5px; cursor: pointer; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); }
.reasons label:has(input:checked) { border-color: var(--lumen); }
.reasons input { accent-color: var(--lumen); }
.report-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 860px) {
  .submit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .steps { padding: 4px 16px; }
  .submit-form { padding: 16px; }
}

/* ---- template diagram (step 1) */
.cape-map { width: min(100%, 360px); margin: 6px 0 2px; overflow: visible; }
.cape-map text { font: 400 1.25px/1 var(--pixel); text-anchor: middle; fill: #1a1004; }
.cape-map text.sub { font: 600 .95px/1 var(--body); opacity: .8; }
.cape-map text.light { fill: #f1ebdd; }
.cape-map text.out { fill: var(--muted); }
.cape-map .tick { fill: none; stroke: var(--dim); stroke-width: .12; }
.mine-info .meta.earned { color: var(--good); }

/* ---- cape editor */
.editor { margin-top: 36px; padding: 22px; }
.ed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ed-head h3 { font-size: 20px; }
.ed-head p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.ed-size { display: flex; border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden; }
.ed-size button { padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ed-size button[aria-pressed="true"] { color: #1a1004; background: var(--lumen); }
.ed-body { display: grid; grid-template-columns: auto minmax(0, 1fr) 240px; gap: 16px; margin-top: 18px; align-items: start; }
.ed-tools { display: grid; gap: 6px; }
.ed-tools button { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 17px; line-height: 1; color: var(--muted);
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); transition: color .15s, border-color .15s; }
.ed-tools button span { font-size: 13px; font-weight: 600; }
.ed-tools button:hover { color: var(--text); }
.ed-tools button[aria-pressed="true"] { color: var(--text); border-color: var(--lumen); background: rgba(246, 194, 91, .1); }
.ed-tools hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.ed-canvas-wrap { min-width: 0; display: grid; place-items: center; padding: 10px; background: var(--void); border: 1px solid var(--line); border-radius: var(--radius); }
#ed-canvas { display: block; touch-action: none; cursor: crosshair; image-rendering: pixelated; }
#ed-canvas[data-tool="picker"] { cursor: copy; }
#ed-canvas[data-tool="fill"] { cursor: cell; }
.ed-side { display: grid; gap: 14px; }
.ed-preview { position: relative; height: 280px; background: radial-gradient(circle at 50% 70%, rgba(246, 194, 91, .14), transparent 65%), var(--raised); border: 1px solid var(--line); border-radius: var(--radius); }
.ed-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.ed-colors { display: grid; gap: 10px; }
.ed-current { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ed-current input { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line2); border-radius: var(--radius); background: none; cursor: pointer; }
.ed-swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.ed-swatches button { aspect-ratio: 1; background: var(--c); border: 1px solid rgba(255, 255, 255, .12); border-radius: 2px; }
.ed-swatches button[aria-pressed="true"] { outline: 2px solid var(--lumen); outline-offset: 1px; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ed-actions #ed-use { margin-left: auto; }
.ed-open { position: relative; overflow: hidden; cursor: pointer; }
.ed-open input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

@media (max-width: 980px) {
  .ed-body { grid-template-columns: 1fr; }
  .ed-tools { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .ed-tools hr { display: none; }
  .ed-tools button span { display: none; }
  .ed-side { grid-template-columns: 200px 1fr; }
  .ed-preview { height: 220px; }
}
@media (max-width: 520px) {
  .editor { padding: 14px; }
  .ed-side { grid-template-columns: 1fr; }
  .ed-actions #ed-use { margin-left: 0; width: 100%; }
}
.ed-actions .ed-fit { align-self: center; font-size: 13px; }
.ed-brush { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.ed-brush span { grid-column: 1 / -1; font: 400 10.5px/1 var(--pixel); text-transform: uppercase; color: var(--dim); }
.ed-brush button { justify-content: center; padding: 6px 0; font: 400 11px/1 var(--pixel); }
@media (max-width: 980px) {
  .ed-brush { display: flex; align-items: center; margin: 0; }
  .ed-brush span { display: none; }
  .ed-brush button { padding: 8px 10px; }
}

/* Animated (partner) capes: a tag in the bottom left of the card picture. */
.cm-card .badge.anim { position: absolute; z-index: 1; left: 10px; bottom: 10px; background: rgba(7, 8, 15, 0.8); color: var(--lumen); }
.mine-info .badge.anim { color: var(--lumen); }

/* Animated upload preview: the GIF itself, playing, cropped to the cape's outside. */
.preview-anim { position: relative; height: 190px; aspect-ratio: 10 / 16; overflow: hidden; border-radius: 3px; pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.preview-anim img { position: absolute; image-rendering: pixelated; }
/* Cape layout: the outside starts 1 texel in (1/10 of the front's width, 1/16 of its height). */
.preview-anim img.layout { width: 640%; height: 200%; left: -10%; top: -6.25%; }
.preview-anim img.picture { inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }