/* Team-Builder */
@font-face { font-family: 'Heavitas'; src: url('../uploads/HEAVITAS.TTF') format('truetype'); font-weight: 400; font-display: block; }
@layer qmbase{
:root {
    --ink: #0A0A0A;
    --paper: #FFFFFF;
    --bone: #F4F4F0;
    --yellow: #F8EC27;
    --grey: #8C8C86;
    --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --display: 'Heavitas', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
body { margin: 0; font-family: var(--sans); background: #0A0A0A; }
a { color: #0A0A0A; text-decoration: none; }
a:hover { color: #6B6410; }
button, select, input { font-family: inherit; }
button { cursor: pointer; }
[data-qm-card] { transition: transform 0.24s cubic-bezier(0.2,0.9,0.3,1), opacity 0.18s ease, box-shadow 0.18s ease; }
[data-qm-card][data-dragging] { opacity: 0.45; transform: scale(0.97); }
[data-qm-drop][data-over] { box-shadow: inset 0 0 0 3px var(--yellow); }
[data-qm-picked] { box-shadow: 0 0 0 3px var(--yellow); }
@media (max-width: 860px) {
    [data-qm-tbgrid] { grid-template-columns: 1fr !important; }
  }
}
.qlw{margin: 20px 0 0;font-family: var(--display);font-size: 54px;line-height: 0.98;font-weight: 400;text-transform: uppercase;color: var(--paper)}
.qlx{display: inline-block;margin-top: 28px;background: var(--yellow);padding: 16px 30px;font-size: 14px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--ink)}
.qly{display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 20px}
.qlz{margin: 16px 0 0;font-family: var(--display);font-size: 50px;line-height: 0.98;font-weight: 400;text-transform: uppercase;color: var(--paper)}
.qm0{margin: 12px 0 0;font-size: 16px;letter-spacing: 0.08em;text-transform: uppercase;color: rgba(250,250,247,0.45)}
.qm1{display: block;font-family: var(--display);font-size: 15px;line-height: 1;text-transform: uppercase}
.qm2{display: block;margin-top: 6px;font-size: 12px;opacity: 0.75}
.qm3{background: rgba(250,250,247,0.05);border-top: 4px solid var(--yellow);padding: 20px 20px 24px}
.qm5{margin-top: 12px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 10px}
.qm6{display: flex;align-items: center;gap: 9px;border: 0;background: transparent;padding: 0}
.qm7{margin: 12px 0 0;font-size: 14px;line-height: 1.45;color: rgba(250,250,247,0.45)}
.qm8{margin-top: 14px;display: flex;flex-wrap: wrap;gap: 7px}
.qm9{flex: 1 1 92px;min-width: 0;border: 1px solid rgba(250,250,247,0.2);background: rgba(250,250,247,0.05);padding: 7px 8px;font-size: 12px;color: rgba(250,250,247,0.8)}
.qma{flex: none;text-align: right;cursor: help}
.qmb{margin: 3px 0 0;font-size: 9px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: rgba(250,250,247,0.4)}
.qmc{margin-top: 7px;display: flex;flex-wrap: wrap;gap: 6px}
.qmd{border: 2px solid rgba(250,250,247,0.25);background: rgba(250,250,247,0.07);border-radius: 999px;padding: 5px 12px;font-size: 11px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: var(--paper)}
.qme{margin-top: 8px;display: flex;flex-wrap: wrap;gap: 6px}
.qmf{margin-top: 6px;display: flex;flex-wrap: wrap;gap: 6px}
.qmg{display: inline-flex;align-items: center;gap: 5px;border: 2px solid #4CC38A;border-radius: 999px;background: rgba(76,195,138,0.12);padding: 4px 11px;font-size: 11px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: #4CC38A}
.qmh{display: inline-flex;align-items: center;gap: 5px;border: 2px solid #E2574C;border-radius: 999px;background: rgba(226,87,76,0.12);padding: 4px 11px;font-size: 11px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;color: #E2574C}
.qmi{flex: 1;min-width: 0;box-sizing: border-box;border: 2px solid rgba(250,250,247,0.2);background: rgba(250,250,247,0.05);padding: 10px 12px;font-size: 14px;color: var(--paper)}
.qmj{flex: none;border: 0;background: var(--yellow);padding: 10px 18px;font-size: 13px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--ink)}
.qmk{margin: 6px 0 0;font-size: 12px;line-height: 1.4;color: rgba(250,250,247,0.45)}
.qml{margin-top: 16px;display: flex;flex-direction: column;gap: 8px}
.qmm{flex: 1;min-width: 0}
.qmn{margin-top: 8px;display: flex;flex-wrap: wrap;align-items: center;gap: 8px}
.qmo{margin: 6px 0 0;font-size: 12px;letter-spacing: 0.06em;color: rgba(250,250,247,0.35)}
.qmp{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 12px}
.qmq{margin: 0;font-family: var(--display);font-size: 22px;line-height: 1;text-transform: uppercase;color: var(--paper)}
.qms{display: flex;gap: 4px;border-radius: 999px;background: rgba(250,250,247,0.06);padding: 4px}
.qmt{margin-top: 18px;display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 18px}
.qmu{flex: 1;min-width: 0;border: 0;border-bottom: 2px solid rgba(250,250,247,0.18);background: transparent;padding: 4px 0;font-family: var(--display);font-size: 19px;line-height: 1.2;text-transform: uppercase;color: var(--paper)}
.qmv{margin-top: 12px;width: 100%;box-sizing: border-box;border: 1px solid rgba(250,250,247,0.2);background: rgba(250,250,247,0.05);padding: 7px 8px;font-size: 13px;color: rgba(250,250,247,0.8)}
.qmw{margin-top: 8px;width: 100%;box-sizing: border-box;border: 1px solid rgba(250,250,247,0.2);background: rgba(250,250,247,0.05);padding: 7px 8px;font-size: 13px;color: rgba(250,250,247,0.8)}
.qmx{margin-top: 14px;display: flex;flex-direction: column;gap: 7px}
.qmy{margin: 0;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 15px;font-weight: 700;color: var(--paper)}
.qmz{justify-self: center;border: 2px solid #4CC38A;border-radius: 999px;padding: 2px 0;width: 100%;text-align: center;font-size: 10px;font-weight: 700;letter-spacing: 0.04em;color: #4CC38A}
.qn0{margin: 0;text-align: right;font-family: var(--display);font-size: 13px;line-height: 1;color: rgba(250,250,247,0.5)}
.qn1{margin-top: 12px;display: flex;align-items: baseline;justify-content: space-between;gap: 12px;border-top: 1px solid rgba(250,250,247,0.12);padding-top: 10px}
.qn2{display: flex;align-items: baseline;gap: 14px}
.qn3{margin: 0;font-size: 12px;letter-spacing: 0.08em;text-transform: uppercase;cursor: help;color: rgba(250,250,247,0.4)}
.qn4{font-family: var(--display);font-size: 15px;color: var(--yellow)}
.qn5{font-family: var(--display);font-size: 15px;color: var(--paper)}
.qn6{margin-top: 26px;display: flex;flex-wrap: wrap;align-items: center;gap: 16px}
.qn7{position: fixed;inset: 0;z-index: 300;background: rgba(10,10,10,0.8);display: flex;align-items: center;justify-content: center;padding: 24px}
.qn8{box-sizing: border-box;width: 100%;max-width: 560px;max-height: 86vh;overflow-y: auto;background: #141410;border-top: 4px solid var(--yellow);padding: 26px 26px 30px}
.qn9{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;flex: none;padding: 0;border: 2px solid rgba(250,250,247,0.28);border-radius: 999px;background: transparent;font-size: 20px;line-height: 1;color: var(--paper)}
.qna{margin-top: 20px;display: flex;flex-direction: column;gap: 16px}
.qnb{display: flex;align-items: baseline;justify-content: space-between;gap: 12px}
.qnc{margin: 0;font-size: 13px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;color: var(--paper)}
.qne{border: 1px solid rgba(250,250,247,0.18);border-radius: 999px;padding: 4px 11px;font-size: 12px;color: rgba(250,250,247,0.7)}
.qnf{box-sizing: border-box;width: 100%;max-width: 480px;background: #141410;border-top: 4px solid var(--yellow);padding: 26px 26px 30px}
.qng{display: flex;align-items: flex-start;justify-content: space-between;gap: 16px}
.qnh{margin: 0;font-family: var(--display);font-size: 20px;line-height: 1.1;text-transform: uppercase;color: var(--paper)}
.qni{display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;flex: none;padding: 0;border: 2px solid rgba(250,250,247,0.28);border-radius: 999px;background: transparent;font-size: 18px;line-height: 1;color: var(--paper)}
.qnj{margin-top: 16px;display: flex;flex-wrap: wrap;gap: 9px}
.qnk{margin-top: 20px;border: 0;background: var(--yellow);padding: 13px 26px;font-size: 13px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--ink)}
.qnl{position: fixed;right: 24px;bottom: 24px;z-index: 280;width: min(380px, calc(100vw - 48px));background: #141410;border-top: 5px solid var(--yellow);padding: 22px 24px 24px;box-shadow: 0 18px 50px rgba(0,0,0,0.5)}
.qnm{margin: 0;font-size: 12px;font-weight: 700;letter-spacing: 0.16em;text-transform: uppercase;color: var(--yellow)}
.qnn{margin: 10px 0 0;font-family: var(--display);font-size: 22px;line-height: 1.05;text-transform: uppercase;color: var(--paper)}
.qno{width: 32px;height: 32px;flex: none;padding: 0;border: 2px solid rgba(250,250,247,0.22);background: transparent;font-size: 16px;line-height: 1;color: rgba(250,250,247,0.7)}
.qnp{margin: 14px 0 0;font-size: 15px;line-height: 1.5;color: rgba(250,250,247,0.72)}
.qnq{margin-top: 18px;border: 0;background: var(--yellow);padding: 13px 24px;font-size: 13px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--ink)}
.qnr{position: fixed;inset: 0;z-index: 310;background: rgba(10,10,10,0.82);display: flex;align-items: flex-end;justify-content: center;padding: 12px}
.qns{box-sizing: border-box;width: 100%;max-width: 560px;max-height: 86vh;overflow-y: auto;border-radius: 26px;background: #161613;border: 1px solid rgba(248,236,39,0.35);padding: 24px 22px 24px}
.qnt{margin: 8px 0 0;font-size: 15px;line-height: 1.5;color: rgba(250,250,247,0.7)}
.qnu{display: flex;gap: 12px;align-items: flex-start;border-radius: 16px;background: rgba(248,236,39,0.08);padding: 13px 14px}
.qnv{flex: none;display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 50%;background: var(--yellow);font-size: 14px;font-weight: 700;line-height: 1;color: var(--ink)}
.qnw{margin: 0;font-size: 15px;line-height: 1.45;color: var(--paper)}
.qny{flex: 1 1 160px;border: 2px solid rgba(250,250,247,0.3);border-radius: 999px;background: transparent;padding: 14px 18px;font-size: 13px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;cursor: pointer;color: var(--paper)}
.qnz{flex: 1 1 160px;border: 0;border-radius: 999px;background: #8B3FE8;padding: 16px 18px;font-size: 13px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;cursor: pointer;color: #FFFFFF}
.qo0{margin: 16px 0 0;font-size: 16px;line-height: 1.5;color: rgba(250,250,247,0.7)}
.qo1{margin: 18px 0 0;padding: 18px;background: rgba(250,250,247,0.06);font-family: ui-monospace, Menlo, monospace;font-size: 13px;line-height: 1.6;color: var(--paper);white-space: pre-wrap}

/* Mobile-first pass: rounded, roomier, stacked */
.qlw,.qlz{font-size: clamp(34px, 9vw, 54px)}
.qlx,.qmj,.qnk,.qnq{border-radius: 999px}
.qm9,.qmi,.qmv,.qmw{border-radius: 12px}
.qm3,.qm9,.qmd,.qmi,.qms,.qmv,.qmw,.qn8,.qnf,.qnl,.qns,.qo1{border-radius: 20px}
.qm3{border-radius: 22px}
@media (max-width: 860px){
  [data-qm-tbgrid]{grid-template-columns: minmax(0, 1fr) !important;gap: 18px !important}
  [data-qm-tbgrid] > *{min-width: 0}
}
@media (max-width: 560px){
  .qly{flex-direction: column;align-items: stretch}
  .qm9,.qmi,.qmv,.qmw{min-height: 44px;font-size: 15px}
  .qmj,.qnk,.qnq,.qlx{min-height: 44px}
}