/* Карточка HTML-Стройки на главной хаба — в стиле самого квеста. Всё ограничено .qc-html. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.qc-html {
  --qc-bg: #0e1120; --qc-panel: #161a2c; --qc-panel2: #1d2237; --qc-panel3: #242a44; --qc-line: #2a3050;
  --qc-text: #e9ecf5; --qc-muted: #8e95ad; --qc-accent: #f16529; --qc-accent2: #e44d26; --qc-warn: #ffd43b; --qc-ok: #51cf66;
  box-sizing: border-box; height: 100%;
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
  border: 1px solid var(--qc-line); border-radius: 16px;
  color: var(--qc-text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background-color: var(--qc-panel);
  background-image:
    linear-gradient(rgba(42, 48, 80, .45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 48, 80, .45) 1px, transparent 1px);
  background-size: 26px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
  transition: transform .15s, box-shadow .15s;
}
.qc-html:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(241, 101, 41, .35); }
.qc-html *, .qc-html *::before, .qc-html *::after { box-sizing: border-box; }

.qc-html-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qc-html-brand { font-family: "Press Start 2P", ui-monospace, monospace; font-size: 13px; letter-spacing: .5px; color: var(--qc-accent); text-shadow: 0 2px 0 #7a2a0e; }
.qc-html-tag { font-size: 12px; color: var(--qc-muted); background: var(--qc-panel3); padding: 3px 10px; border-radius: 20px; }

.qc-html-wall { display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--qc-bg); border: 1px solid var(--qc-line); border-radius: 10px; overflow: hidden; }
.qc-html-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.qc-html-row.shift { transform: translateX(-4.5%); margin-right: -9%; grid-template-columns: repeat(10, 1fr); }
.qc-html-row i { display: block; height: 14px; border-radius: 2px; background: var(--qc-panel3); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.qc-html-row i.on { background: var(--qc-accent2); box-shadow: inset 0 -3px 0 #a8391b, inset 0 2px 0 rgba(255, 255, 255, .18); }
.qc-html-row i.on:nth-child(3n) { background: var(--qc-accent); }

.qc-html-desc { margin: 0; color: #d6d9e6; }
.qc-html-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--qc-muted); font-size: 13.5px; }
.qc-html-stats b { color: var(--qc-text); }

.qc-html-progress { display: flex; align-items: center; gap: 10px; }
.qc-html-bar { flex: 1; height: 12px; background: var(--qc-panel3); border: 1px solid var(--qc-line); border-radius: 8px; overflow: hidden; }
.qc-html-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--qc-accent2), var(--qc-warn)); border-radius: 8px; }
.qc-html-progress span { font-weight: 700; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.qc-html-mine { background: rgba(81, 207, 102, .12); border: 1px solid rgba(81, 207, 102, .4); color: #b2f2bb; border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.qc-html-mine b { color: var(--qc-ok); }

.qc-html-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.qc-html-btn { flex: 1; text-align: center; text-decoration: none; font-weight: 700; color: #fff; background: var(--qc-accent); border: 1px solid var(--qc-accent2); border-radius: 10px; padding: 12px 16px; box-shadow: 0 4px 0 #b53a17; transition: transform .1s, box-shadow .1s, background .15s; }
.qc-html-btn:hover { background: #ff7a3d; }
.qc-html-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b53a17; }
.qc-html-link { text-decoration: none; font-size: 18px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--qc-line); background: var(--qc-panel2); }
.qc-html-link:hover { background: var(--qc-panel3); }