:root{color:#f8fbff;background:#14161b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed}.app-shell{min-height:100vh;padding:24px;background:linear-gradient(135deg,#0e1218f5,#18272af5,#301f28f5),#14161b}.top-bar,.workspace,.site-footer,.message-slot,.message{width:min(1400px,100%);margin-right:auto;margin-left:auto}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 20px}.brand-lockup{display:flex;align-items:center;gap:16px;min-width:0}.brand-sprites{display:flex;align-items:center;flex:0 0 auto}.brand-sprites .sprite-art,.brand-sprites .sprite-placeholder{margin-left:-8px;border-color:#ffffff5c;box-shadow:0 10px 18px #00000038}.brand-sprites .sprite-art:first-child,.brand-sprites .sprite-placeholder:first-child{margin-left:0}h1,h2,h3,p{margin:0}h1{font-size:32px;line-height:1;letter-spacing:0}.brand-lockup p,.section-heading p,.queue-summary small,.site-footer,.matched-player span{color:#b9c4ca}.queue-count,.state-pill,.dirty-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border:1px solid rgba(255,255,255,.18);border-radius:999px;white-space:nowrap}.queue-count{padding:0 14px;background:#080a0e94}.queue-count span:first-of-type{min-width:24px;color:#72f1d6;font-weight:800;text-align:right}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:18px;align-items:start}.side-stack{display:grid;gap:18px;min-width:0}.setup-surface,.search-surface,.how-it-works{border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#10141be6;box-shadow:0 18px 40px #0000003d}.setup-surface{min-width:0;padding:18px}.search-surface,.how-it-works{padding:18px}.how-it-works .section-heading{margin-bottom:10px}.how-it-works ol{display:grid;gap:8px;margin:0;padding-left:22px;color:#dbe4e8}.how-it-works li{padding-left:2px}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.section-heading h2{font-size:22px;line-height:1.15}.dirty-pill,.state-pill{min-width:82px;padding:0 12px;color:#ffdf6e;background:#ffd2401f;font-size:14px;font-weight:700;text-transform:capitalize}.state-pill.waiting{color:#72f1d6;background:#55d6be1f}.state-pill.matched{color:#ff8ac7;background:#ff5ba61f}.field-label{display:block;margin-bottom:8px;color:#dbe4e8;font-weight:700}.setup-controls{display:grid;grid-template-columns:minmax(240px,480px) auto;gap:12px;align-items:end;margin-bottom:18px}.username-field{min-width:0}.username-input{width:min(480px,100%);height:46px;margin-bottom:18px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;background:#ffffff14;outline:none}.username-field .username-input{width:100%;margin-bottom:0}.username-input:focus{border-color:#72f1d6;box-shadow:0 0 0 3px #72f1d624}.sprite-grid{overflow-x:auto;padding-bottom:8px}.sprite-grid-header,.sprite-row{display:grid;grid-template-columns:minmax(140px,180px) repeat(4,minmax(138px,1fr));min-width:760px}.sprite-grid-header{gap:10px;padding:0 10px 8px;color:#b9c4ca;font-size:13px;font-weight:800;text-transform:uppercase}.sprite-row{gap:10px;padding:10px;border-top:1px solid rgba(255,255,255,.1)}.sprite-row:last-child{border-bottom:1px solid rgba(255,255,255,.1)}.sprite-name{display:flex;align-items:center;gap:10px;min-width:0;color:#fff;font-weight:800}.sprite-name span{overflow-wrap:anywhere}.variant-cell{display:grid;grid-template-rows:78px auto auto;gap:8px;min-height:160px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff0e}.variant-title{color:#f8fbff;font-size:14px;font-weight:800;text-align:center}.sprite-art,.sprite-placeholder{display:block;width:100%;height:78px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#20272b}.sprite-art{object-fit:contain}.sprite-art.compact,.sprite-placeholder.compact{width:42px;height:42px;flex:0 0 42px}.sprite-placeholder{display:flex;align-items:center;justify-content:center;padding:8px;color:#14161b;background:linear-gradient(135deg,#ffdf6e,#72f1d6 52%,#ff8ac7);font-size:12px;font-weight:900;text-align:center;overflow-wrap:anywhere}.sprite-placeholder.compact{padding:4px;font-size:8px;line-height:1.1}.variant-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice-button,.primary-action,.secondary-action,.danger-action,.icon-button{border:0;border-radius:8px;font-weight:800}.choice-button{min-width:0;min-height:36px;padding:0 8px;color:#dbe4e8;background:#ffffff1a}.choice-button.offer.selected{color:#10141b;background:#72f1d6}.choice-button.want.selected{color:#10141b;background:#ffdf6e}.choice-button:disabled{opacity:.38}.sprite-grid.locked .choice-button:disabled{opacity:.52;color:#8f9aa0;background:#ffffff12}.sprite-grid.locked .choice-button.selected:disabled{color:#10141b;opacity:1;box-shadow:inset 0 0 0 2px #10141b47}.sprite-grid.locked .choice-button.offer.selected:disabled{background:#5dbfae}.sprite-grid.locked .choice-button.want.selected:disabled{background:#d5b951}.action-bar,.setup-actions,.queue-actions{display:flex;flex-wrap:wrap;gap:10px}.action-bar,.queue-actions{margin-top:18px}.primary-action,.secondary-action,.danger-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;white-space:nowrap}.primary-action{color:#10141b;background:#72f1d6}.secondary-action{color:#fff;background:#ffffff1f}.danger-action{color:#fff;background:#bb325f}.primary-action.full{width:100%}.primary-action:disabled,.secondary-action:disabled,.danger-action:disabled{opacity:.48}.message-slot{min-height:58px}.message-slot:not(.active){pointer-events:none}.message{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:14px;padding:10px 14px;border-radius:8px;font-weight:700}.message.error{color:#fff;background:#bb325fe0}.message.success{color:#10141b;background:#72f1d6e6}.queue-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}.queue-summary>div{display:grid;grid-template-columns:24px 1fr;gap:4px 8px;align-items:center;min-height:86px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#ffffff0f}.queue-summary span{font-size:24px;font-weight:900}.queue-summary small{grid-column:1 / -1;font-size:13px}.match-result{display:grid;gap:16px}.matched-player{display:grid;gap:4px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}.matched-player strong{font-size:24px;overflow-wrap:anywhere}.selection-list{display:grid;gap:10px}.selection-list h3{font-size:16px}.selection-chips{display:flex;flex-wrap:wrap;gap:8px}.selection-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:48px;padding:6px 10px 6px 6px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff14;font-weight:800}.selection-chip span{overflow-wrap:anywhere}.site-footer{display:flex;align-items:flex-start;gap:8px;padding:18px 0 0;font-size:13px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:18px;background:#05080cad}.presence-modal{width:min(420px,100%);padding:18px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:#171c22;box-shadow:0 24px 60px #0000006b}.presence-modal p{margin:8px 0 16px;color:#cfd8dd}.modal-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:#fff;background:#ffffff1a}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:960px){.workspace{grid-template-columns:1fr}}@media(max-width:640px){.app-shell{padding:14px}.top-bar{align-items:flex-start;flex-direction:column}h1{font-size:26px}.setup-surface,.search-surface,.how-it-works{padding:14px}.setup-controls,.queue-summary{grid-template-columns:1fr}.primary-action,.secondary-action,.danger-action{width:100%}}