/* /demo: pick your rivals and the chart, then set sail in the real game client. */
.sail-head{min-height:100svh}
.sail-head h1{max-width:9em}
.sail-head .lede{color:#dfe3dd;margin-bottom:36px}
.sail-art{opacity:.32;width:min(70vw,1100px);right:-8vw;bottom:-4vw;mask-image:linear-gradient(to left, #000 40%, transparent)}
.sail{max-width:760px;display:grid;gap:30px}
.pick{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pick legend{font:400 var(--fs-2)/1 var(--display);color:var(--stock-hi);margin-bottom:14px}
.pick label{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid rgba(243,234,211,.35);border-radius:2px;cursor:pointer;background:rgba(11,27,42,.55);transition:border-color .15s, background-color .15s}
.pick label:hover{border-color:var(--stock-hi)}
.pick input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--gold)}
.pick label:has(input:checked){border-color:var(--gold);background:rgba(201,154,59,.14)}
.pick b{display:block;font-size:1.12rem;color:var(--stock-hi)}
.pick i{display:block;font-style:normal;font-size:.98rem;line-height:1.35;color:#c9cfcc;margin-top:2px}
.sail-fine{margin-top:28px;max-width:40em}
@media (max-width:640px){ .pick{grid-template-columns:1fr} .sail-art{display:none} }