:root { color-scheme: dark; --bg:#13151d; --card:#171922; --border:#1e2633; --muted:#9aa4b2; --text:#e6e9ee; --accent:#8ab4f8; --btn-bg:#141923; --btn-bg-hover:#1a2030; --shadow:0 6px 18px rgba(0,0,0,0.35); --right-header:#161e29; }
html,body{height:100%}
body{margin:0;padding:12px 16px;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow:auto}
a{color:var(--accent);text-decoration:none}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.actions{display:flex;gap:8px}
h1{margin:0;font-size:20px}
h2{margin:0 0 10px 0;font-size:17px}
h3{margin:0 0 8px 0;font-size:15px}
.muted{color:var(--muted)} .small{font-size:12px;color:var(--muted)} .strike{text-decoration:line-through;opacity:.6}
.layout{display:grid;grid-template-columns:75% 24%;column-gap:1%;align-items:start;width:100%;max-width:100%;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow);overflow:hidden}
.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--btn-bg);color:var(--text);cursor:pointer}
.btn:hover{background:var(--btn-bg-hover)}
.left{display:flex;flex-direction:column;height:836px}
.right{display:grid;grid-template-rows:auto 1fr;gap:14px;height:863px;margin-top:-12px}
.right .card h2{margin:-12px -12px 10px -12px;padding:8px 12px}
.left .card h2{display:none}
.pitch-area{position:relative;height:100%}
.pitch-wrap{position:relative;width:100%;height:836px;border-radius:16px;overflow:hidden;margin:0 auto}
.pitch{position:absolute;inset:0;background: url('/static/img/pitch.webp') top center / cover no-repeat, radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 55%), #171922}
.formation-control{position:absolute;top:16px;right:16px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.formation-label{font-size:12px;color:var(--muted);background:rgba(0,0,0,0.35);padding:2px 6px;border-radius:6px}
.formation-btn{background:#10141b;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}
.formation-menu{display:none;position:absolute;right:0;margin-top:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;max-height:300px;overflow:auto;grid-template-columns:repeat(2,minmax(120px,1fr));gap:6px}
.formation-control.open .formation-menu{display:grid}
.formation-menu button{background:#0f1219;border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:10px;text-align:left;cursor:pointer}
.formation-menu button:hover{background:#151a25}
.slot{position:absolute;transform:translate(-50%,-50%);display:block}
.slot .cardface{width:128px;height:174px;background:transparent;position:absolute;top:-102px;left:-64px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:1}
.slot .cardface img.card-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0}
.slot.mismatch .cardface .cardpos{color:#ef4444;background:rgba(239,68,68,0.12)}
.slot .badge{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;align-items:flex-end;justify-content:center;border-radius:50%;background-color:#31373f;box-shadow:0 4px 8px #000000bf;top:239%;left:50%;transform:translate(-50%,170%);width:60px;height:35px;color:#cbd5e1;font-weight:600;font-size:12px}
.slot .cardface .slot-clear{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:#0f1219;color:#e6e9ee;display:none;align-items:center;justify-content:center;font-weight:700;line-height:1;cursor:pointer}
.slot.filled .cardface .slot-clear{display:flex}
.slot::before{content:"";position:absolute;top:-102px;left:-64px;width:128px;height:174px;background:transparent;pointer-events:auto}
.slot.drag-over .cardface::after{content:"";position:absolute;inset:0;border:2px dotted rgba(255,255,255,0.6);border-radius:10px;pointer-events:none}
.slot.tentative .cardface::before{content:"?";position:absolute;top:6px;left:6px;background:#dc2626;color:#fff;font-size:14px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-shadow:0 0 4px rgba(0,0,0,0.6);z-index:2}
.slot.drag-over-invalid .cardface::after{content:"";position:absolute;inset:0;border:2px dotted rgba(239,68,68,0.8);border-radius:10px;pointer-events:none}
.slot:hover .cardface::after{content:"";position:absolute;inset:0;border:1px dashed rgba(255,255,255,0.25);border-radius:10px;pointer-events:none}
.tag{display:inline-block;padding:2px 8px;border:1px solid var(--border);background:#0f1219;border-radius:999px;margin-right:8px;font-size:12px}
/* Right panel pick grid */
.pick-grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:min-content;gap:10px;overflow:auto;padding:6px;align-content:start;}
.p-card{position:relative;width:100%;aspect-ratio:150/205;min-height:0;border:2px solid transparent;border-radius:10px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:grab;overflow:hidden}
.p-card.tentative{border-color:#dc2626}
.p-card.tentative::after{content:"?";position:absolute;top:6px;left:6px;background:#dc2626;color:#fff;font-size:14px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-shadow:0 0 4px rgba(0,0,0,0.6)}
.p-card img.card-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.p-card.picked{opacity:.5;filter:grayscale(30%)} 
.p-card.dim{opacity:.35;filter:grayscale(60%)} 
.btn-publish{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;border:1px solid #126d39;font-weight:700;width:100%}
.btn-publish:hover{filter:brightness(1.05)}
.ok{color:#86efac}.err{color:#fca5a5}

.wrap.landing{max-width:1300px;margin:18px auto;padding:20px}
.landing header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.landing .nav{display:flex;gap:8px;align-items:center}
.landing .brand strong{font-size:20px;letter-spacing:0.6px}
.landing .hero{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center}
.landing .hero .card{padding:18px}
.landing .hero-visual{display:flex;align-items:center;justify-content:center;height:220px;background:linear-gradient(180deg, #12131a, #0f1318);border-radius:12px}
.landing .hero-visual-inner{color:var(--muted);font-weight:600}
.landing .features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.landing .features .card{min-height:80px;padding:14px}
.landing .how-it-works{margin-top:18px}
.landing .how-it-works ol{padding-left:18px}
.landing .details{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.landing footer{margin-top:22px;text-align:center;color:var(--muted)}

/* Site-wide left navigation for landing/setup pages */
.wrap.landing{display:block}
.wrap.landing .site-nav{float:left;width:220px;margin-right:18px}
.wrap.landing .site-nav nav ul{list-style:none;padding:0;margin:0}
.wrap.landing .site-nav nav li{margin-bottom:8px}
.wrap.landing .site-nav a{color:var(--text);background:var(--card);display:block;padding:8px 10px;border-radius:8px;border:1px solid var(--border)}
.wrap.landing .site-nav a:hover{background:var(--btn-bg-hover)}
.wrap.landing .site-nav a::after{content:'';display:inline-block;margin-left:8px}
/* Make the donate pill stand out slightly */
.wrap.landing .site-nav a[href="#"]{background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;border-color:rgba(0,0,0,0.2)}

/* Icon and active state styles for the left nav */
.wrap.landing .site-nav .icon{width:16px;height:16px;vertical-align:middle;margin-right:8px;fill:currentColor}
.wrap.landing .site-nav a.active{background:linear-gradient(180deg,#0b1220,#0f1724);border-color:rgba(255,255,255,0.03);box-shadow:0 4px 12px rgba(0,0,0,0.45)}
.wrap.landing .site-nav a.donate{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border-color:rgba(0,0,0,0.2)}

.wrap.landing .site-nav a.add{color:#10b981;border-color:rgba(16,185,129,0.12);background:linear-gradient(180deg,rgba(16,185,129,0.06),transparent)}
.wrap.landing .site-nav a.add .icon{fill:currentColor}
.wrap.landing .site-nav a.add:hover{background:linear-gradient(180deg,rgba(16,185,129,0.12),rgba(16,185,129,0.02))}

/* Main content area sits to the right of the sidebar */
.wrap.landing .content{margin-left:238px}
.wrap.landing .content .card{margin-bottom:14px}
.wrap.landing .content section.card{display:block}

/* Ensure the teamsheet layout (which uses .layout) is not impacted: do not override .layout rules here */

/* Remove large pitch background used elsewhere on the site when on the landing page */
.landing .pitch, .landing .pitch-area, .landing .pitch-wrap{display:none}

@media (max-width:900px){
	.landing .hero{grid-template-columns:1fr;}
	.landing .features{grid-template-columns:repeat(2,1fr)}
	.landing .details{grid-template-columns:1fr}
	.wrap.landing .site-nav{display:none}
	.wrap.landing .content{margin-left:0;padding-top:8px}
}

/* Lightbox (CSS only using :target). Scoped to landing. */
.landing .hero-visual a{display:block}
.landing .lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;padding:24px;z-index:999}
.landing .lightbox img{max-width:calc(100% - 80px);max-height:calc(100% - 80px);border-radius:8px;box-shadow:var(--shadow)}
.landing .lightbox:target{display:flex}
.landing .lightbox .lightbox-close{position:absolute;inset:0}

/* Gap between header and hero */
.landing header + .hero{margin-top:18px}