.book__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
@media (min-width: 980px) {
  .book__grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .book__rail { position: sticky; top: 5rem; display: grid; gap: 1.25rem; }
}

.book__filter {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  padding-top: .25rem;
}
.chip-tab {
  border-radius: var(--r-pill);
  padding: .35rem .7rem;
  background: none;
  border: 1px solid var(--gold-18);
  color: var(--bone-45);
  font: inherit;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.chip-tab:hover { color: var(--bone); }
.chip-tab.is-on { color: var(--ink); background: var(--gold); border-color: var(--gold); }

.fixtures { display: grid; }
.fixture {
  border-radius: 0;
  display: grid;
  gap: .7rem;
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px solid var(--gold-18);
}
.fixture:first-child { border-top: 0; }
.fixture.is-closed { opacity: .72; }
.fixture__head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-45);
}
.fixture__when { color: var(--gold); }
.fixture__head .num { margin-left: auto; letter-spacing: normal; text-transform: none; }
.fixture__teams {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 1.15;
}
.fixture__teams span { color: var(--bone-45); font-size: .8rem; }

.share { display: flex; height: 2px; background: rgba(232, 184, 75, .1); overflow: hidden; }
.share i { display: block; height: 100%; transition: width .5s var(--step); }
.share__home { background: var(--gold); }
.share__draw { background: var(--bone-45); }
.share__away { background: var(--felt); box-shadow: inset 0 0 0 1px rgba(232, 184, 75, .3); }
.share--empty { background: rgba(232, 184, 75, .08); }

.fixture__odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.odd {
  border-radius: var(--r-sm);
  display: grid;
  gap: .15rem;
  padding: .55rem .7rem;
  text-align: left;
  background: none;
  border: 1px solid var(--gold-18);
  color: var(--bone);
  font: inherit;
  cursor: pointer;
  transition: border-color .25s var(--step), background .25s var(--step);
}
.odd:hover:not(:disabled) { border-color: var(--gold-40); background: rgba(232, 184, 75, .05); }
.odd:disabled { cursor: default; opacity: .55; }
.odd span {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.odd b { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); }
.odd i { font-style: normal; font-size: .64rem; color: var(--bone-45); }
.odd.is-picked { background: var(--gold-08); border-color: var(--gold); }
.odd.is-picked span { color: var(--bone); }
.odd--won { border-color: var(--gold-40); background: rgba(232, 184, 75, .1); }
.fixture__yours { margin: 0; font-size: .74rem; color: var(--gold); }

.slip__body { padding: 1.1rem; }
.slip__empty { margin: 0; font-size: .78rem; color: var(--bone-45); line-height: 1.6; }
.slip__pick { display: grid; gap: .2rem; }
.slip__pick b { font-family: var(--serif); font-size: 1.15rem; }
.slip__side { font-size: .74rem; color: var(--gold); }
.slip__figures { margin-bottom: 1rem; }
.slip__figures .is-win { color: var(--gold); }
.slip .btn { width: 100%; }

.myslip {
  border-radius: 0;
  display: grid;
  gap: .15rem;
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--gold-18);
  font-size: .74rem;
}
.myslip:first-child { border-top: 0; }
.myslip b { font-family: var(--serif); font-size: .95rem; font-weight: 500; }
.myslip span { color: var(--bone-45); }
.myslip__state { color: var(--bone-70); }
.myslip.is-won .myslip__state { color: var(--gold); }
.myslip.is-done { opacity: .7; }