/* How we rank, easy-read version (del 7 Nov 2026: "not like T&Cs"). PC + phone. */
.hw{display:grid;gap:16px;margin:8px 0 22px}
.hw-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:10px;align-items:start}
.hw-ic{width:56px;height:56px;border-radius:16px;background:#1f2a40;display:grid;place-items:center;grid-row:span 2}
.hw-ic svg{width:32px;height:32px}
.hw-card h2{margin:0;font:800 clamp(21px,2.2vw,28px)/1.15 var(--display);letter-spacing:-.02em}
.hw-card h2 small{display:block;font:700 12px/1 var(--mono);color:var(--gold);letter-spacing:.06em;margin-bottom:6px}
.hw-card p{margin:0;font-size:16px;color:var(--soft);line-height:1.45}
.hw-card p b{color:var(--fg)}
.hw-body{grid-column:2;display:grid;gap:12px}
.hw-card.good{background:linear-gradient(160deg,#1f3a2c,#123326);border-color:#2b5a43}
.hw-card.good h2{color:var(--good)}.hw-card.good .hw-ic{background:#163f2d}.hw-card.good p{color:#c9e9d8}
/* prize ladder */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end}
.ladder div{border-radius:12px;background:#1f2a40;border:1px solid var(--line);padding:10px 8px;text-align:center;display:grid;gap:4px}
.ladder span{font:700 13px/1.2 var(--body);color:var(--soft)}
.ladder b{font:800 18px/1.1 var(--display);color:var(--good);white-space:nowrap}
.ladder div:nth-child(1){min-height:70px}.ladder div:nth-child(2){min-height:84px}.ladder div:nth-child(3){min-height:98px}.ladder div:nth-child(4){min-height:112px}.ladder div:nth-child(5){min-height:126px;border-color:var(--gold)}
/* odds maths flow */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center}
.flow div{background:#1f2a40;border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;font:700 15px/1.25 var(--body)}
.flow div b{display:block;font:800 22px/1.1 var(--display);color:var(--gold);margin-bottom:2px}
.flow div.res{background:var(--goodBg);border:2px solid var(--good)}.flow div.res b{color:var(--good)}
.flow i{font-style:normal;color:var(--gold);font:800 22px/1 var(--display)}
/* check times */
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.times div{border-radius:12px;padding:12px 10px;text-align:center;background:#1f2a40;border:1px solid var(--line);display:grid;gap:2px}
.times b{font:800 20px/1.1 var(--display)}.times span{font:600 13px/1.25 var(--body);color:var(--soft)}
.times div:first-child{border-color:var(--gold)}.times div:first-child b{color:var(--gold)}
.hw-warn{margin:0;padding:14px 16px;border-radius:14px;background:var(--warnBg);border:1px solid #5a4614;font:600 15px/1.4 var(--body)}
.hw-detail{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 16px;margin-top:4px}
.hw-detail summary{cursor:pointer;font-weight:700;padding:12px 0;color:var(--gold)}
@media (max-width:700px){
  .hw-card{grid-template-columns:44px 1fr;padding:16px;column-gap:12px}
  .hw-ic{width:44px;height:44px;border-radius:12px}.hw-ic svg{width:26px;height:26px}
  .hw-body{grid-column:1 / -1}
  .ladder{grid-template-columns:1fr;gap:6px}
  .ladder div{min-height:0!important;display:flex;justify-content:space-between;align-items:center;padding:10px 14px}
  .flow{grid-template-columns:1fr;gap:6px}.flow i{transform:rotate(90deg);justify-self:center}
  .times{grid-template-columns:1fr}
  .times div{display:flex;justify-content:space-between;align-items:center;padding:10px 14px}
}
/* 9 Nov 2026 del: PC only - same width as homepage/Big prizes, bigger + bolder text. Phone unchanged. */
@media (min-width:900px){
  .page h1{font-size:clamp(40px,3.6vw,56px)}
  .page p,.page li{font-size:19px;font-weight:500;line-height:1.5}
  .page h2{font-size:26px}
  .hw-card{padding:26px;grid-template-columns:64px 1fr}
  .hw-ic{width:64px;height:64px}.hw-ic svg{width:36px;height:36px}
  .hw-card h2{font-size:clamp(24px,2.2vw,32px)}
  .hw-card h2 small{font-size:14px}
  .hw-card p{font-size:19px;font-weight:500}
  .ladder span{font-size:15px}.ladder b{font-size:22px}
  .flow div{font-size:17px}.flow div b{font-size:26px}
  .times b{font-size:24px}.times span{font-size:15px}
  .hw-warn{font-size:17px}
  .hw-detail summary{font-size:18px}
  .tablewrap td,.tablewrap th{font-size:17px}
}
@media (min-width:1200px){
  header.top>.wrap,main.page>.wrap,footer>.wrap{max-width:min(1640px,94vw)}
  .hw{grid-template-columns:1fr 1fr;gap:20px}
  /* picture beside the heading, no gap */
  main.page>.wrap{display:grid;grid-template-columns:1fr 340px;column-gap:48px;grid-template-rows:min-content min-content min-content 1fr}
  main.page>.wrap>*{grid-column:1 / -1}
  main.page>.wrap>h1,main.page>.wrap>.meta,main.page>.wrap>.meta+p{grid-column:1}
  main.page>.wrap>.oddsfunnel{grid-column:2;grid-row:1 / span 4;max-width:340px;margin:0 0 24px;align-self:start}
  main.page>.wrap>.meta+p{font-size:24px;font-weight:600;line-height:1.4;align-self:start}
  .hw-card{align-content:start}.hw-card .hw-body{align-content:start}
  .hw>:not(.hw-card){grid-column:1 / -1}
}