.xi-main{max-width:1080px;padding-top:30px;padding-bottom:50px;min-height:70vh}.xi-intro{max-width:690px;margin-bottom:24px}.xi-intro h1{font-size:clamp(34px,6vw,50px);letter-spacing:-1.5px;line-height:1.1;margin:12px 0}.xi-intro p,.xi-about p{color:var(--muted)}.xi-filters{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.xi-filters label{flex:1;min-width:140px;font-size:13px}.xi-filters input,.xi-filters select{width:100%;display:block;margin-top:6px;min-height:46px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px}.xi-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.xi-card{padding:22px;background:var(--card);border:1px solid var(--border);border-radius:12px;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,transform .15s}.xi-card:hover{border-color:#7996ed;transform:translateY(-2px)}.xi-card strong{font-size:21px}.xi-card p{margin:0;color:var(--muted)}.xi-card small{color:#F29D50}.xi-card .xi-play{margin-top:auto;font-weight:650}.xi-toolbar,.xi-status,.xi-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.xi-toolbar{justify-content:space-between}.xi-status{justify-content:space-between;background:var(--card);padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14px}.xi-status strong{font-size:20px}.xi-match{margin:22px 0}.xi-match h2{font-size:clamp(25px,4vw,34px);line-height:1.2;margin:10px 0}.xi-match p{margin:8px 0}.xi-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);gap:24px;align-items:start}.xi-pitch{isolation:isolate;position:relative;display:flex;flex-direction:column-reverse;justify-content:space-around;min-height:560px;padding:25px 10px;background:repeating-linear-gradient(0deg,#153d37 0px,#153d37 75px,#19443d 75px,#19443d 150px);border:1px solid #426d61;border-radius:12px;overflow:hidden;gap:28px}.xi-pitch:before{content:'';position:absolute;z-index:-1;inset:14px;border:1px solid #799b8166;background:linear-gradient(transparent calc(50% - .5px),#799b8166 50%,transparent calc(50% + .5px))}.xi-pitch:after{content:'';position:absolute;z-index:-1;width:110px;height:110px;border:1px solid #799b8166;border-radius:50%;top:calc(50% - 55px);left:calc(50% - 55px)}.xi-row{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));gap:6px}.xi-slot{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 1px;background:none;border:0;color:#fff;line-height:1.25;min-height:62px;text-align:center}.xi-slot .xi-shirt{width:34px;height:33px;border-radius:8px 8px 6px 6px;background:#253f49;border:1px solid #92b3ac;color:#e1eee9;display:grid;place-items:center;font-size:12px;font-weight:700}.xi-slot .xi-name{max-width:100%;overflow-wrap:anywhere;font-size:13px;font-weight:600;background:#122e2cdd;padding:4px;border-radius:5px}.xi-slot.found .xi-shirt{background:#cae8bd;color:#183020;border-color:#d9f6cd}.xi-slot.missed .xi-shirt{background:#b98554;color:#101c2d;border-color:#f0b57d}.xi-slot.found .xi-name:before{content:'✓ ';color:#c4efb4}.xi-slot.missed .xi-name:before{content:'– ';color:#ffd0a4}.xi-slot.selected{outline:2px solid #f29d50;border-radius:7px}.xi-slot.found{animation:xi-found .2s ease-out}.xi-form-panel{background:var(--card);border:1px solid var(--border);padding:22px;border-radius:12px}.xi-form-panel label{display:block;font-size:18px;font-weight:650;margin-bottom:10px}.xi-input-wrap{position:relative}.xi-input-wrap input{width:100%;min-height:50px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:16px}.xi-suggestions{position:absolute;z-index:5;left:0;right:0;top:100%;max-height:230px;overflow:auto;background:#223650;border:1px solid #6681a5;border-radius:8px;box-shadow:0 8px 15px #0003;padding:5px;margin:4px 0;list-style:none}.xi-suggestions li{padding:11px;cursor:pointer;border-radius:5px}.xi-suggestions li[aria-selected=true],.xi-suggestions li:hover{background:#335487}.xi-form-panel .primary{width:100%;margin-top:12px}.xi-feedback{min-height:48px;margin:14px 0;color:var(--muted)}.xi-feedback[data-kind=correct]{color:#b7e7a4}.xi-feedback[data-kind=wrong]{color:#ffb9af}.xi-hint-panel{border-top:1px solid var(--border);padding-top:15px;margin-top:18px}.xi-hint-panel p{font-size:14px}.xi-result{padding:24px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:20px}.xi-result h2{font-size:40px;margin:0}.xi-result .xi-actions{margin-top:18px}.xi-statistics{padding:16px 0;color:var(--muted)}.xi-about{border-top:1px solid var(--border);padding:20px 0;margin-top:34px}.xi-about summary{cursor:pointer}.xi-copy{width:100%;height:150px;background:var(--bg);color:var(--text);margin-top:14px}.xi-pagination{display:flex;justify-content:center;gap:14px;align-items:center;margin:26px 0}.xi-caption{font-size:12px;color:var(--muted);margin-top:8px}.xi-start{padding:25px;border:1px solid var(--border);border-radius:12px;background:var(--card);max-width:640px}.xi-start label{display:flex;align-items:center;gap:10px;margin:20px 0}.xi-start input{width:21px;height:21px}.xi-source{font-size:13px;margin-top:25px}.xi-resume{padding:16px 0}.xi-main button,.xi-main .primary,.xi-main .secondary{min-height:44px}.xi-main dialog{max-width:420px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:26px}.xi-main dialog::backdrop{background:#0008}@keyframes xi-found{from{transform:translateY(3px)}to{transform:none}}@media(max-width:760px){.xi-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.xi-layout{grid-template-columns:minmax(0,1fr)}.xi-form-panel{order:-1;padding:16px}.xi-pitch{min-height:510px}.xi-hint-panel{margin-top:10px;padding-top:8px}.xi-intro{margin-bottom:18px}.xi-main{padding-top:22px}.xi-slot .xi-name{font-size:13px}.xi-status{gap:8px}.xi-status span{font-size:12px}}@media(max-width:420px){.xi-main{padding-left:14px;padding-right:14px}.xi-cards{grid-template-columns:1fr}.xi-pitch{padding:22px 5px;min-height:500px}.xi-row{gap:2px}.xi-filters{gap:8px}.xi-card{padding:18px}}@media(prefers-reduced-motion:reduce){.xi-slot.found,.xi-card{animation:none;transition:none}}
