.match-page{padding:150px 0 80px;min-height:80vh}.match-page [hidden]{display:none!important}.match-heading{max-width:750px;margin-bottom:40px}.match-heading>span{color:var(--bs-primary);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}.match-heading h1{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.12;margin:16px 0 20px}.match-heading p{font-size:1.15rem;color:var(--bs-secondary-color);line-height:1.7}.match-setup{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:48px;align-items:center}.match-card{background:var(--mt-bg-secondary);border:1px solid var(--bs-border-color);border-radius:24px;padding:32px}.match-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}.match-modes label{position:relative;cursor:pointer}.match-modes input{position:absolute;opacity:0}.match-modes span{display:flex;flex-direction:column;gap:8px;border:1px solid var(--bs-border-color);border-radius:16px;padding:20px;min-height:150px;background:var(--mt-surface)}.match-modes i{color:var(--bs-primary);font-size:1.4rem}.match-modes strong{font-size:1.1rem}.match-modes small{color:var(--bs-secondary-color)}.match-modes input:checked+span{border-color:var(--bs-primary);box-shadow:0 0 0 1px var(--bs-primary)}.match-modes input:focus-visible+span{outline:3px solid var(--bs-primary);outline-offset:4px}.match-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.match-game{display:block;padding:10px 0}.match-ready,.match-empty{color:var(--bs-secondary-color);font-size:.9rem;line-height:1.6;margin:20px 0}.match-ready i{color:var(--bs-primary)}.match-explanation h2{font-size:1.5rem;line-height:1.4}.match-explanation ol{list-style:none;counter-reset:step;padding:0;margin:28px 0}.match-explanation li{counter-increment:step;display:flex;gap:16px;align-items:center;color:var(--bs-secondary-color);margin:20px 0;line-height:1.5}.match-explanation li:before{content:counter(step);border:1px solid var(--bs-border-color);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;color:var(--bs-primary)}.match-waiting-heading{display:flex;justify-content:space-between;gap:24px}.match-waiting-heading h2{margin:14px 0;font-size:1.8rem}.match-waiting-heading p{color:var(--bs-secondary-color);max-width:650px}.match-live{display:flex;gap:10px;align-items:center;color:var(--bs-primary)}.match-live i{width:8px;height:8px;border-radius:50%;background:var(--bs-primary);box-shadow:0 0 12px var(--bs-primary)}.match-occupancy{font-size:2rem;white-space:nowrap;color:var(--bs-primary)}.match-seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:28px}.match-seat{background:var(--mt-surface);border:1px solid var(--bs-border-color);border-radius:16px;padding:24px 12px;display:flex;align-items:center;text-align:center;flex-direction:column;gap:12px}.match-seat img,.match-seat-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--mt-bg-secondary);display:grid;place-items:center;font-size:1.5rem;color:var(--bs-primary)}.match-seat small{color:var(--bs-secondary-color)}.match-seat.is-empty{border-style:dashed;opacity:.75}.match-decision{padding:24px;margin-top:24px;background:var(--mt-surface);border-radius:16px}.match-decision h3{font-size:1.2rem}.match-decision p{color:var(--bs-secondary-color)}.match-countdown{color:var(--bs-primary);font-size:1.5rem;padding:24px 0 0}.match-notifications{display:flex;gap:20px;align-items:center;padding:24px 0;margin-top:24px;border-top:1px solid var(--bs-border-color)}.match-notifications>i{font-size:1.5rem;color:var(--bs-primary)}.match-notifications>div{flex:1}.match-notifications p{color:var(--bs-secondary-color);margin:8px 0;font-size:.9rem}.match-notifications small{color:var(--bs-secondary-color)}.match-secondary{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px}.match-feedback{border:1px solid var(--bs-border-color);padding:16px;border-radius:12px;background:var(--mt-surface)}
@media(max-width:767px){.match-page{padding-top:130px}.match-setup{grid-template-columns:1fr;gap:32px}.match-card{padding:24px}.match-modes{gap:12px}.match-modes span{padding:16px}.match-fields{grid-template-columns:1fr}.match-notifications{flex-wrap:wrap}.match-notifications>div{flex-basis:70%}.match-seats{grid-template-columns:repeat(2,minmax(0,1fr))}.match-waiting-heading h2{font-size:1.5rem}}