:root{color-scheme:light;--paper:#f5f5ef;--ink:#17251e;--muted:#737c73;--green:#214a35;--green-2:#2e6548;--gold:#b28a4d;--line:#d8ddd4;--soft:#e9ede6;--white:#fff;--radius:12px;--shadow:0 10px 30px #17251e0c;--ease:180ms ease}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif;min-height:100vh}button,select{font:inherit}button{touch-action:manipulation}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,76px);border-bottom:1px solid var(--line);background:var(--paper)}.brand{color:var(--ink);font-size:13px;letter-spacing:.13em;font-weight:800;text-decoration:none}.brand span{color:var(--green-2)}.preview-tag,.eyebrow,.mode-number,.draw-head,.pitch-meta,.panel-foot,footer{font-family:'DM Mono',monospace;letter-spacing:.1em;font-size:10px}.preview-tag{color:var(--muted)}.screen{max-width:1240px;margin:auto;padding:clamp(38px,6vw,72px) clamp(20px,4vw,56px) 60px}.hidden{display:none!important}.hero{min-height:calc(100svh - 68px);display:flex;flex-direction:column;justify-content:center;padding-top:clamp(44px,8vh,90px);padding-bottom:28px}.hero-copy{max-width:780px}.eyebrow{color:var(--green-2)}h1{font-size:clamp(44px,8.5vw,100px);line-height:.98;letter-spacing:-.085em;margin:20px 0 4px;font-weight:800}.hero-line{font-size:clamp(22px,3.3vw,37px);line-height:1.2;letter-spacing:-.045em;margin:12px 0 8px;font-weight:600}.hero-note{max-width:470px;margin:0;color:var(--muted);font-size:15px;line-height:1.65}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(30px,5vh,56px)}.mode-card{min-height:196px;padding:22px 24px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease)}.mode-card:hover{transform:translateY(-2px);border-color:#aebcae;box-shadow:0 14px 34px #17251e12}.mode-card.ucl{background:var(--green);border-color:var(--green);color:#fff}.mode-number{color:var(--muted)}.ucl .mode-number,.ucl .mode-description{color:#d4e0d6}.mode-card strong{font-size:clamp(23px,3vw,31px);letter-spacing:-.06em;margin:18px 0 4px}.mode-description{color:var(--muted);font-size:13px;line-height:1.5}.mode-cta{margin-top:auto;padding-top:20px;color:var(--green-2);font:500 10px 'DM Mono',monospace;letter-spacing:.08em}.ucl .mode-cta{color:#e5c78f}.mode-cta i{font-style:normal;margin-left:8px}.hero-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:24px;color:var(--muted);font-size:11px}.scroll-cue{font-size:20px;color:var(--green-2);animation:drift 1.8s ease-in-out infinite}.disclaimer{margin:10px 0 0;color:#899087;font-size:10px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}h2{font-size:clamp(29px,4vw,42px);letter-spacing:-.065em;margin:8px 0}.text-button{background:none;border:0;color:var(--muted);padding:8px 0;font-size:13px;cursor:pointer}.setup-row{display:flex;align-items:end;gap:12px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}.setup-row label{display:grid;gap:7px;color:var(--muted);font-size:11px}.setup-row select{min-width:150px;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:10px 12px;font-size:12px}.setup-row label:first-child select{min-width:130px}.outline-button{background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer}.outline-button:hover{border-color:var(--green-2);color:var(--green)}.draft-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);gap:clamp(24px,4vw,50px);align-items:start}.pitch-column{min-width:0}.pitch-meta,.draw-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.pitch-meta{font-size:10px;text-transform:uppercase}.pitch{margin-top:13px;min-height:460px;aspect-ratio:1.12/1;max-height:590px;border:1px solid #b7c9b8;border-radius:10px;background-color:#e2ecdf;background-image:linear-gradient(#ffffff65,#ffffff65),repeating-linear-gradient(0deg,transparent 0 56px,#315d3d0c 57px 58px),linear-gradient(90deg,#d9e8d6,#e5eee2);display:flex;flex-direction:column;justify-content:space-around;padding:22px 12px;position:relative;overflow:hidden}.pitch:before{content:"";position:absolute;inset:50% 0 auto;border-top:1px solid #6e92735e}.pitch:after{content:"";position:absolute;width:clamp(66px,10vw,112px);aspect-ratio:1;border:1px solid #6e92735e;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.line{position:relative;z-index:1;display:flex;justify-content:center;gap:clamp(5px,1.4vw,18px)}.slot{width:clamp(58px,8vw,96px);min-height:64px;border:1px solid #adc2ae;border-radius:8px;background:#f9fbf5;color:#344c39;display:grid;align-content:center;justify-items:center;text-align:center;padding:5px;cursor:pointer;font-size:10px;box-shadow:0 3px 8px #233d2810;transition:background var(--ease),border-color var(--ease),transform var(--ease)}.slot b{font-size:10px;letter-spacing:.04em}.slot small{color:#718273;font:9px 'DM Mono',monospace;margin-top:4px}.slot.filled{border-color:#b28a4d;color:#534225;background:#fffdf7}.slot.filled small{color:#837050}.status-line{font-size:11px;line-height:1.6;color:var(--muted);padding-top:12px}.draft-panel{align-self:start;min-width:0}.draw-head{padding-bottom:14px;border-bottom:1px solid var(--line)}.draw-result{min-height:126px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px 0}.draw-result strong{font-size:clamp(23px,3vw,32px);line-height:1.1;letter-spacing:-.06em}.draw-result small{font-size:12px;color:var(--muted);line-height:1.5}.draw-result .eyebrow{font-size:10px}.primary-button{width:100%;border:0;border-radius:8px;background:var(--green);color:white;padding:15px 17px;font:700 11px 'DM Mono',monospace;letter-spacing:.07em;cursor:pointer;transition:background var(--ease),transform var(--ease)}.primary-button:hover{background:var(--green-2);transform:translateY(-1px)}.primary-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.primary-button span{margin-left:8px;font-size:15px}.player-list{display:grid;gap:0;margin-top:16px;max-height:380px;overflow:auto}.player-option{display:flex;justify-content:space-between;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 4px;color:var(--ink);cursor:pointer;transition:color var(--ease),padding var(--ease)}.player-option:hover{color:var(--green-2);padding-left:8px}.player-option span{font-size:13px;font-weight:700}.player-option small{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:4px}.rating{font:12px 'DM Mono';color:var(--green)}.panel-foot{color:#878f85;margin-top:14px;font-size:9px}.result-screen{text-align:center;max-width:800px;padding-top:clamp(55px,10vh,100px)}.result-screen>p{color:var(--muted);font-size:13px}.result-score{font-size:clamp(46px,9vw,88px);font-weight:800;letter-spacing:-.085em;color:var(--green);margin:26px 0}.result-card{text-align:left;margin:30px auto;border-top:1px solid var(--line);padding-top:20px}.break-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0;font-size:12px}.break-row span:last-child{color:var(--green);font-family:'DM Mono',monospace}.result-actions{display:flex;gap:10px}.result-actions>*{flex:1}footer{border-top:1px solid var(--line);color:#818980;padding:18px clamp(20px,5vw,76px);display:flex;justify-content:space-between;gap:16px;font-size:9px;background:var(--paper)}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(min-width:1400px){.hero{max-width:1320px}}
@media(max-width:760px){.topbar{height:60px;padding:0 18px}.screen{padding:38px 18px 44px}.hero{min-height:calc(100svh - 60px);padding-top:38px;padding-bottom:20px}.mode-grid{grid-template-columns:1fr;gap:10px;margin-top:27px}.mode-card{min-height:148px;padding:17px 18px}.mode-card strong{margin:10px 0 2px;font-size:23px}.mode-cta{padding-top:12px}.hero-note{font-size:13px}.hero-bottom{padding-top:20px}.disclaimer{font-size:9px}.draft-layout{grid-template-columns:1fr;gap:24px}.setup-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setup-row label,.setup-row label:first-child{min-width:0}.setup-row select,.setup-row label:first-child select{width:100%;min-width:0}.setup-row>.outline-button{align-self:end}.pitch{min-height:0;width:100%;aspect-ratio:.91/1;padding:16px 5px}.line{gap:clamp(3px,1vw,8px)}.slot{width:clamp(47px,13vw,74px);min-height:54px;font-size:9px;padding:3px}.slot b{font-size:9px}.slot small{font-size:8px}.draw-result{min-height:100px}.player-list{max-height:330px}.result-actions{flex-direction:column}.section-head h2{font-size:30px}footer{flex-wrap:wrap;font-size:8px}}
@media(max-width:380px){.preview-tag{font-size:8px}.brand{font-size:11px}.screen{padding-left:14px;padding-right:14px}.slot{width:clamp(42px,12vw,62px);min-height:50px}.pitch{aspect-ratio:.85/1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(min-width:761px){.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mode-card{min-height:142px;padding:18px 20px}}
@media(max-width:760px){.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mode-card{min-height:132px;padding:14px}.mode-card strong{font-size:clamp(16px,4vw,22px);margin:12px 0 4px}.mode-number{font-size:8px}.mode-cta{font-size:8px;letter-spacing:.03em}}
.topbar{background:#f4f0e6;border-color:#ded6c5}.brand{display:flex;align-items:center;gap:11px;font-size:12px;letter-spacing:.17em}.brand:before{content:"WG";width:30px;height:30px;display:grid;place-items:center;border:1px solid #a99063;border-radius:50%;color:#806c49;font:600 10px 'Cormorant Garamond',serif;letter-spacing:0}.brand span{color:#796845}.preview-tag{color:#887a60;letter-spacing:.13em}.screen{max-width:1280px}.hero{background:radial-gradient(ellipse at 50% 42%,#fffdf7 0,#f4f0e6 65%)}.eyebrow{color:#88754f;letter-spacing:.16em}h1,h2,.hero-line,.mode-card strong,.draw-result strong{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:-.025em}.hero h1{font-size:clamp(58px,9vw,116px);line-height:.82;letter-spacing:.005em}.hero-line{font-size:clamp(30px,4vw,45px);font-style:italic;color:#546a57}.hero-note{color:#777365}.mode-grid{gap:14px}.mode-card{border-radius:3px;border-color:#d8cfbd;background:#fbf9f2;box-shadow:0 8px 24px #473d2810}.mode-card:hover{transform:translateY(-2px);border-color:#a99063;box-shadow:0 10px 26px #473d2815}.mode-card.ucl{background:#233f31;border-color:#233f31}.mode-number{color:#978563}.ucl .mode-number{color:#d6c5a0}.mode-card strong{font-size:clamp(25px,3vw,34px);letter-spacing:0}.mode-cta{color:#796845;letter-spacing:.12em}.ucl .mode-cta{color:#e0cd9f}.scroll-cue{animation:none;color:#9c8a67}.pitch{border-color:#b8b39e;border-radius:3px;background-color:#dce4d2;background-image:repeating-linear-gradient(0deg,transparent 0 56px,#315d3d0b 57px 58px),linear-gradient(90deg,#d5e0cc,#e4e8d8)}.pitch:before,.pitch:after{border-color:#627c5a7a}.slot{border-radius:3px;background:#f8f7ef;box-shadow:none}.slot.filled{border-color:#9e8050}.primary-button{border-radius:3px;background:#294735}.primary-button:hover{background:#365c43;transform:none}.outline-button{border-radius:3px}.setup-row select{border-radius:3px}.draw-result strong{font-size:clamp(27px,3vw,36px)}.player-option{padding:14px 4px}.player-option:hover{padding-left:7px;color:#58704f}.position-choice{border-radius:3px}.position-choice:hover{background:#294735}.selected-player{border-color:#b29b6d}.status-line,.hero-note,.mode-description,.draw-result small{line-height:1.75}.hero-bottom,.disclaimer{color:#887f6e}footer{background:#f4f0e6;border-color:#ded6c5;color:#887f6e}.mode-card:focus-visible,.primary-button:focus-visible,.outline-button:focus-visible,.text-button:focus-visible,.player-option:focus-visible,.position-choice:focus-visible,.slot:focus-visible{outline:2px solid #9e8050;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.scroll-cue{animation:none}}
