/* Team sheet page (in the app) */
*{box-sizing:border-box}
body{margin:0;background:#0b0b0b;color:#fff;font-family:Arial,Helvetica,sans-serif;min-height:100vh;padding-bottom:calc(96px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
.lu-w{max-width:560px;margin:0 auto;padding:18px 16px 24px}
.lu-empty{padding-top:60px;text-align:center}
.lu-empty h1{font:400 44px/1 Impact,"Arial Narrow",sans-serif;text-transform:uppercase;margin:0 0 12px}
.lu-empty p{color:#cfcfcf;line-height:1.5}
.lu-head{display:flex;align-items:center;gap:14px;padding:4px 0 14px;border-bottom:3px solid var(--kit,#ff0)}
.lu-head img{width:44px;height:auto;flex:none}
.lu-eye{color:#ff0;font:700 12px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.lu-head h1{font:400 34px/1 Impact,"Arial Narrow",sans-serif;text-transform:uppercase;margin:4px 0}
.lu-head p{margin:0;color:#bdbdbd;font-size:14px}
.lu-admin{font-size:13px;color:#9a9a9a;margin:12px 0 0;line-height:2}
.lu-admin a{color:#fff;border:1px solid #333;border-radius:99px;padding:3px 10px;text-decoration:none;white-space:nowrap}
.lu-admin a[aria-current]{background:#ff0;color:#000;border-color:#ff0}
.lu-seg{display:grid;grid-template-columns:1fr 1fr;background:#1c1c1c;border-radius:99px;padding:4px;margin:16px 0 10px}
.lu-seg button{border:0;background:none;color:#ddd;font:700 15px/1 Arial,sans-serif;padding:12px 8px;border-radius:99px;cursor:pointer}
.lu-seg button[aria-selected=true]{background:#ff0;color:#000}
.lu-seg button:disabled{opacity:.4}
.lu-note{color:#cfcfcf;font-size:14px;line-height:1.45;margin:0 0 10px;min-height:20px}
.lu-note small{color:#8a8a8a}
.lu-note b{color:#ff0}
.lu-forms{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;scrollbar-width:none}
.lu-forms::-webkit-scrollbar{display:none}
.lu-forms button{flex:none;border:1px solid #333;background:#161616;color:#fff;font:700 14px/1 Arial,sans-serif;padding:9px 13px;border-radius:99px;cursor:pointer}
.lu-forms button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
.lu-forms button:disabled{cursor:default}
.lu-forms button:disabled:not([aria-pressed=true]){opacity:.35}
.lu-pitch{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(180deg,#33953f 0 11.11%,#2f8a3a 11.11% 22.22%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.7)}
.lu-lines i{position:absolute;border:3px solid rgba(255,255,255,.55)}
.lu-half{left:0;right:0;top:50%;border-width:3px 0 0!important}
.lu-circle{width:28%;aspect-ratio:1;left:36%;top:50%;transform:translateY(-50%);border-radius:50%}
.lu-box{left:25%;width:50%;height:13%}
.lu-box-t{top:-3px}
.lu-box-b{bottom:-3px}
.lu-row{position:absolute;left:0;right:0;display:flex;justify-content:space-evenly;align-items:flex-start}
.lu-chip,.lu-slot{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:700 14px/1.1 Arial,sans-serif;color:#fff;background:#1e1e1e;border-radius:99px;padding:4px 12px 4px 4px;margin:0}
.lu-chip .lu-dot,.lu-slot .lu-dot{width:32px;height:32px;border-radius:50%;background:#000;color:#ff0;display:grid;place-items:center;font-size:13px;letter-spacing:.02em;box-shadow:inset 0 0 0 2px #ff0;flex:none}
.lu-chip b{background:#ff0;color:#000;border-radius:3px;padding:1px 4px;font-size:11px;margin-left:2px}
.lu-row .lu-chip,.lu-row .lu-slot{flex-direction:column;gap:4px;background:none;padding:0;width:78px;text-align:center}
.lu-row .lu-dot{width:46px;height:46px;font-size:16px;box-shadow:inset 0 0 0 3px #ff0}
.lu-row .lu-nm{background:rgba(0,0,0,.72);border-radius:4px;padding:3px 6px;font-size:12px;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu-slot .lu-dot{background:rgba(0,0,0,.22);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);border:0;font-size:22px}
.lu-row .lu-slot .lu-nm{background:none;color:rgba(255,255,255,.9);font-size:11px;letter-spacing:.08em}
.lu-chip.on .lu-dot{background:#ff0;color:#000;box-shadow:0 0 0 4px rgba(255,255,0,.35)}
.lu-chip.on:not(.lu-on-pitch){background:#3a3a00}
.lu-picking .lu-slot .lu-dot{animation:lu-pulse 1s ease-in-out infinite alternate}
@keyframes lu-pulse{to{box-shadow:inset 0 0 0 2px #ff0;background:rgba(255,255,0,.25)}}
.lu-chip:focus-visible,.lu-slot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lu-ro .lu-chip,.lu-ro .lu-slot{cursor:default}
.lu-ro .lu-row .lu-slot{opacity:.6}
.lu-h2{font:700 13px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#ff0;margin:18px 0 8px}
.lu-h2 small{color:#8a8a8a;letter-spacing:.02em;text-transform:none;font-weight:400;margin-left:6px}
.lu-list{display:flex;flex-wrap:wrap;gap:8px;min-height:48px;padding:8px;border:1px dashed #333;border-radius:10px}
.lu-picking .lu-list{border-color:#ff0;background:rgba(255,255,0,.05)}
.lu-out .lu-chip{opacity:.7}
.lu-none{color:#777;font-size:13px;align-self:center;padding:0 6px}
.lu-actions{display:grid;gap:10px;margin-top:20px}
.lu-btn{display:block;width:100%;text-align:center;text-decoration:none;background:#ff0;color:#000;border:0;border-radius:8px;padding:15px;font:700 17px/1 Arial,sans-serif;cursor:pointer}
.lu-btn.lu-alt{background:#25d366;color:#04310f}
.lu-btn[hidden],.lu-link[hidden]{display:none}
.lu-link{background:none;border:0;color:#cfcfcf;text-decoration:underline;font-size:14px;padding:6px;cursor:pointer}
.lu-msg{min-height:20px;color:#9be59b;font-size:14px;text-align:center}
.lu-msg.bad{color:#ff8a8a}
.lu-eds{margin-top:22px;border-top:1px solid #222;padding-top:14px}
.lu-eds summary{cursor:pointer;font-weight:700}
.lu-eds p{color:#bdbdbd;font-size:14px}
.lu-eds label{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #1c1c1c}
.lu-eds input{width:20px;height:20px;accent-color:#ff0}
.lu-eds .lu-btn{margin-top:12px}
@media (max-width:380px){.lu-row .lu-chip,.lu-row .lu-slot{width:66px}.lu-row .lu-dot{width:40px;height:40px;font-size:14px}.lu-row .lu-nm{max-width:66px;font-size:11px}}
.lu-dot{position:relative}
.lu-dot[data-cap]::after{content:"C";position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:#ff0;color:#000;font:700 11px/18px Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px #0b0b0b}
.lu-ro .lu-hint{display:none}
.lu-ghost{position:fixed;left:0;top:0;width:56px!important;height:56px!important;font-size:18px!important;z-index:1000;pointer-events:none;background-color:#ff0!important;color:#000!important;box-shadow:0 8px 24px rgba(0,0,0,.5)!important;transition:none}
.lu-ghost::after{display:none}
.lu-src{opacity:.35}
.lu-dragging,.lu-dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.lu-over.lu-list{border-color:#ff0;border-style:solid;background:rgba(255,255,0,.1)}
.lu-over .lu-dot{background:#ff0!important;color:#000!important;transform:scale(1.12)}
.lu-chip,.lu-slot{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* Spots placed anywhere on the pitch (dragged about, or the formation's own spot) */
.lu-spot{position:absolute;transform:translate(-50%,-23px);touch-action:auto}
.lu-row .lu-chip,.lu-row .lu-slot,.lu-pitch .lu-chip,.lu-pitch .lu-slot{flex-direction:column;gap:4px;background:none;padding:0;width:78px;text-align:center}
.lu-pitch .lu-dot{width:46px;height:46px;font-size:16px;box-shadow:inset 0 0 0 3px #ff0}
.lu-pitch .lu-nm{background:rgba(0,0,0,.72);border-radius:4px;padding:3px 6px;font-size:12px;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu-pitch .lu-slot .lu-nm{background:none;color:rgba(255,255,255,.9);font-size:11px;letter-spacing:.08em}
.lu-pitch .lu-slot .lu-dot{background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
@media (max-width:380px){.lu-pitch .lu-chip,.lu-pitch .lu-slot{width:66px}.lu-pitch .lu-dot{width:40px;height:40px;font-size:14px}.lu-pitch .lu-nm{max-width:66px;font-size:11px}.lu-spot{transform:translate(-50%,-20px)}}
.lu-dragging .lu-spot.lu-src,.lu-dragging .lu-spot{transition:none}
/* Player photo, or the team badge when there isn't one */
.lu-dot.lu-photo,.lu-dot.lu-badge{background-color:#000;background-repeat:no-repeat;color:transparent}
.lu-dot.lu-photo{background-size:cover;background-position:center 20%}
.lu-dot.lu-badge{background-color:#fff;background-size:contain;background-origin:content-box;padding:4px;background-position:center}
.lu-pitch .lu-dot.lu-photo,.lu-pitch .lu-dot.lu-badge{box-shadow:0 0 0 3px #ff0}
.lu-dot.lu-photo,.lu-dot.lu-badge{box-shadow:0 0 0 2px #ff0}
.lu-ghost.lu-photo,.lu-ghost.lu-badge{background-color:#000!important}
.lu-ghost.lu-badge{background-color:#fff!important}
.lu-drag-el{pointer-events:none}
.lu-dot[data-gk]::before{content:"GK";position:absolute;left:-22px;top:-4px;padding:0 5px;height:18px;border-radius:9px;background:#ff0;color:#000;font:700 11px/18px Arial,sans-serif;letter-spacing:.04em;box-shadow:0 0 0 2px #0b0b0b}
.lu-pitch .lu-slot:first-child .lu-dot{cursor:pointer}

/* How-to guide */
.lu-head{position:relative}
.lu-head>div{flex:1;min-width:0}
.lu-help-btn{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid #ff0;background:none;color:#ff0;font:700 19px/1 Arial,sans-serif;cursor:pointer;align-self:flex-start}
.lu-help-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lu-help{border:0;padding:0;background:transparent;max-width:min(480px,calc(100vw - 24px));width:100%;max-height:calc(100vh - 40px);color:#fff}
.lu-help::backdrop{background:rgba(0,0,0,.75)}
.lu-help-in{position:relative;background:#141414;border:1px solid #2a2a2a;border-top:4px solid #ff0;border-radius:12px;padding:22px 20px 18px;max-height:calc(100vh - 40px);overflow:auto}
.lu-help h2{font:400 30px/1 Impact,"Arial Narrow",sans-serif;text-transform:uppercase;margin:6px 0 14px}
.lu-help ol{list-style:none;counter-reset:s;margin:0 0 16px;padding:0;display:grid;gap:12px}
.lu-help li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;column-gap:12px}
.lu-help li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:#ff0;color:#000;font:700 14px/28px Arial,sans-serif;text-align:center}
.lu-help li b{font-size:15px}
.lu-help li span{color:#cfcfcf;font-size:14px;line-height:1.45}
.lu-help em{font-style:normal;color:#ff0;font-weight:700}
.lu-help-x{position:absolute;right:10px;top:8px;background:none;border:0;color:#aaa;font-size:28px;line-height:1;cursor:pointer;padding:4px 8px}
.lu-help-foot{color:#8a8a8a;font-size:12px;text-align:center;margin:10px 0 0}
.lu-help-in>.lu-btn{position:sticky;bottom:0;box-shadow:0 -14px 14px #141414}

/* Captain's goalscorers card */
.cs{margin:16px 0 4px;background:#161616;border:1px solid #2a2a2a;border-left:5px solid #ff0;border-radius:10px;overflow:hidden}
.cs.cs-done{border-left-color:#3fbf5f}
.cs-top{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:14px;cursor:pointer}
.cs-top:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.cs-ball{font-size:24px;line-height:1}
.cs-t{flex:1;min-width:0}.cs-t b{display:block;font:700 16px/1.25 Arial,sans-serif;color:#fff}.cs-t small{display:block;color:#bdbdbd;font-size:13px;margin-top:3px}
.cs-chev{font-size:24px;color:#888;transition:transform .15s}.cs-top[aria-expanded=true] .cs-chev{transform:rotate(90deg)}
.cs-body{padding:0 14px 14px}
.cs-help{color:#bdbdbd;font-size:14px;line-height:1.4;margin:0 0 10px}
.cs-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #222}
.cs-row.on .cs-name{color:#ff0;font-weight:700}
.cs-name{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-size:15px;color:#eee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-name small{color:#888;font-weight:400}
.cs-pic{flex:none;width:32px;height:32px;border-radius:50%;background:#000 center/cover no-repeat;box-shadow:0 0 0 2px #333}
.cs-pic.is-badge{background-color:#fff;background-size:76% auto}
.cs-step{display:flex;align-items:center;gap:6px}
.cs-step button{width:40px;height:40px;border-radius:50%;border:0;background:#2a2a2a;color:#fff;font:700 22px/1 Arial,sans-serif;cursor:pointer}
.cs-step button[data-d="1"],.cs-step button[data-og="1"]{background:#ff0;color:#000}
.cs-step button:disabled{opacity:.3;cursor:default}
.cs-step b{min-width:22px;text-align:center;font-size:18px}
.cs-og .cs-name{padding-left:42px}
.cs-add{padding:10px 0 4px;border-top:1px solid #222}
.cs-add select{width:100%;background:#0b0b0b;color:#fff;border:1px dashed #444;border-radius:8px;padding:11px;font:15px Arial,sans-serif}
.cs-sum{margin:12px 0;font-weight:700;font-size:14px;text-align:center}
.cs-sum.ok{color:#9be59b}.cs-sum.off{color:#ffcf6b}
.cs-next{margin-top:8px;padding-top:12px;border-top:1px solid #222;text-align:center}
.cs-next p{color:#cfcfcf;margin:0 0 10px}
.cs-og .cs-name{white-space:normal;display:block;line-height:1.3}.cs-og .cs-name small{display:block}
.cs-taster{display:grid;place-items:center;background:#ff0!important;color:#000;font:700 13px/1 Arial,sans-serif;font-style:normal;box-shadow:none}
.cs-name small{color:#8a8a8a;font-weight:400;font-size:12px}
.cs-og .cs-name small{display:block}
.hub-ok{color:#9be59b;font-size:14px;margin:4px 0}
.hub-taster b small{display:block;color:#9a9a9a;font-weight:400;font-size:13px;margin-top:3px}
.hub-keeper input[type=text]{display:block;width:100%;margin-top:5px;background:#0b0b0b;color:#fff;border:1px solid #444;border-radius:8px;padding:11px;font:16px Arial,sans-serif;box-sizing:border-box}

/* Borrowed players and tasters on the team sheet */
.lu-dot[data-tag]::before{content:attr(data-tag);position:absolute;left:-5px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:#fff;color:#000;font:700 11px/18px Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px #0b0b0b}
.is-taster .lu-dot[data-tag]::before{background:#ff0}
.lu-dot[data-gk][data-tag]::before{content:"GK"}
.lu-borrow{display:block;width:100%;margin-top:10px;background:none;border:1px dashed #555;color:#ddd;border-radius:10px;padding:12px;font:700 14px/1 Arial,sans-serif;cursor:pointer}
.lu-borrow[hidden]{display:none}
.lu-pick{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.8);display:flex;align-items:flex-end;justify-content:center}
.lu-pick-in{width:100%;max-width:560px;max-height:85vh;background:#141414;border-top:4px solid #ff0;border-radius:14px 14px 0 0;display:flex;flex-direction:column;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.lu-pick-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lu-pick-h b{font-size:17px}.lu-pick-h button{background:none;border:0;color:#aaa;font-size:28px;cursor:pointer}
.lu-pick input{width:100%;background:#0b0b0b;color:#fff;border:1px solid #444;border-radius:8px;padding:12px;font:16px Arial,sans-serif;margin-bottom:8px}
.lu-pick-l{overflow:auto}
.lu-pick-l button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid #222;color:#fff;text-align:left;padding:9px 4px;cursor:pointer}
.lu-pick-l button .lu-dot{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:#000;color:#ff0;font-size:13px;font-weight:700}
.lu-pick-l b{display:block;font-size:15px}.lu-pick-l small{color:#9a9a9a;font-size:13px}