.offside-explorer{max-width:1020px;margin:35px auto 70px}.offside-heading{margin:30px 0}.offside-heading h1{margin-bottom:16px;font-size:clamp(2.4rem,5vw,4rem)}.offside-heading p{max-width:700px;font-size:1.1rem}.offside-play{border:1px solid var(--border);background:var(--card);border-radius:12px;overflow:hidden}.offside-pitch-heading{color:#fff;background:#163e40;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:18px 24px;font-size:.95rem;display:flex}.offside-field{aspect-ratio:1000/620;isolation:isolate;position:relative}.offside-field svg{width:100%;height:100%;display:block}.offside-line-label{color:#ffdf91;white-space:nowrap;background:#163e40;padding:2px 6px;font-size:clamp(.75rem,2vw,1rem);font-weight:700;position:absolute;top:2%;left:72%;transform:translate(-50%)}.offside-marker,.offside-attacker,.offside-ball{justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.offside-marker{aspect-ratio:1;color:#182d31;border:2px solid #fff;border-radius:50%;width:clamp(28px,5vw,46px);font-size:clamp(.7rem,2vw,1rem);font-weight:700}.offside-defender{background:#e8b66b}.offside-keeper{background:#ede5ce}.offside-ball{color:#fff;text-shadow:0 1px 3px #000;font-size:28px}.offside-attacker{color:#fff;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;background:#1765d1;border:3px solid #fff;border-radius:50%;width:48px;height:48px;font-size:18px;font-weight:700;box-shadow:0 3px 12px #0005}.offside-attacker:active{cursor:grabbing}.offside-attacker:focus-visible{outline-offset:4px;outline:4px solid #ffe08a}.offside-center{background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;bottom:7px}.offside-legend{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:12px 22px;padding:18px 24px;font-size:.9rem;display:flex}.offside-legend span{align-items:center;gap:7px;display:flex}.offside-legend b{border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;font-size:.75rem;display:inline-flex}.legend-attacker{color:#fff;background:#1765d1}.legend-defender{background:#e8b66b}.legend-keeper{background:#ede5ce}.offside-controls{padding:24px}.offside-controls label{flex-wrap:wrap;justify-content:space-between;gap:10px;font-weight:700;display:flex}.offside-controls label span{font-weight:400}.offside-controls input{accent-color:#1765d1;cursor:pointer;width:100%;height:44px;display:block}.offside-controls p{color:var(--muted-foreground);font-size:.9rem}.offside-presets{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.offside-presets button{min-height:44px}.offside-result{border-top:1px solid var(--border);color:#173f37;background:#e1ede6;padding:24px}.offside-result.offside{color:#633a12;background:#fff0d5}.offside-result.level{color:#163c64;background:#e2edf9}.offside-result h2{margin:0 0 8px;font-size:1.8rem}.offside-result p{max-width:800px;margin:0}.offside-notes{max-width:780px;margin-top:36px}.offside-notes h2{font-size:2rem}.offside-notes .meta{margin-top:20px}@media (max-width:600px){.offside-explorer{margin-top:24px}.offside-controls,.offside-result,.offside-legend,.offside-pitch-heading{padding:16px}.offside-pitch-heading{font-size:.85rem}.offside-attacker{width:44px;height:44px}.offside-legend{gap:10px;font-size:.8rem}}