/* The shell's own parts, on top of style.css: the game switcher in the top bar, and the game cards
   on the start page. Each game can add its colours under :root[data-game="<id>"]. */
.topbar { position: relative; }
.switch-btn { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 10px; margin-right: auto;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; }
.switch-btn:hover, .switch-btn[aria-expanded="true"] { background: var(--track); }
.switch-btn > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.switch-btn b { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
.switch-btn small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-btn svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.switch-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.switcher { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; box-shadow: var(--shadow); gap: 4px; }
.switcher-game { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px; }
.switcher-game + .switcher-game { border-top: 1px solid var(--line-2); }
.switcher-name { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.switcher-name b { font-family: var(--display); font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; }
.switcher-name small { font-size: 13px; color: var(--ink-2); }

/* The start page. The hero: the site's one line at display size, beside a real coupon (the next
   open round, with Svenska folket's tips). Then a card per game in the game's own colour
   (--accent), then logging in. */
main.start.home { max-width: 1120px; display: flex; flex-direction: column; gap: 56px; padding-top: 4vh; padding-bottom: 48px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 48px; align-items: center; }
.hero.solo { grid-template-columns: 1fr; }
.hero-text { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
.hero h1 span { display: block; }
@media (min-width: 861px) { .hero h1 span { white-space: nowrap; } }
.hero h1 span + span { color: var(--green); }
.hero .lead { font-size: 19px; line-height: 1.5; font-weight: 400; text-align: left; text-wrap: pretty; color: var(--ink); max-width: 32em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .btn { min-width: 160px; }

/* The coupon: a piece of the app itself. */
.coupon { --accent: var(--green); margin: 0; background: var(--card); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: inset 0 6px 0 var(--accent); }
.coupon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; }
.coupon-head b { font-family: var(--display); font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); }
.coupon-head span { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.coupon-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.coupon-rows li { display: flex; align-items: center; gap: 12px; }
.coupon-match { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.25; }
.coupon-match span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-signs { display: flex; gap: 6px; }
.coupon-signs > span { width: 52px; height: 52px; border-radius: 12px; background: var(--sunk); display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; }
.coupon-signs b { font-family: var(--display); font-size: 21px; }
.coupon-signs small { font-size: 12px; color: var(--ink-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.coupon-signs > span.on { background: var(--accent); color: var(--on-accent, var(--on-green)); }
.coupon-signs > span.on small { color: inherit; }
.coupon figcaption { font-size: 15px; color: var(--ink); font-weight: 600; }
.coupon figcaption span { font-weight: 400; color: var(--ink-2); font-size: 14px; }

.home-games { display: flex; flex-direction: column; gap: 16px; }
.home-games h2 { font-size: 34px; text-transform: uppercase; letter-spacing: 0.01em; }
.gamecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.gamecard { --accent: var(--green); box-shadow: inset 0 6px 0 var(--accent); gap: 14px; padding: 24px 20px 20px; }
.gamecard-head { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.gamecard-head h3 { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); }
.gamecard-head span { font-size: 16px; line-height: 1.45; }
.gamecard-next { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gamecard > .btn { margin-top: auto; }
.gamecard .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, var(--on-green)); align-self: flex-start; }
.gamecard .btn.link { color: var(--accent); align-self: flex-start; padding: 0; min-height: 32px; }
.gamecard .chip { font-weight: 600; }
[data-game="powerplay"] { --accent: #1756a9; }
[data-game="topptipset"] { --accent: #6b3fc0; }
.homelogin { max-width: 520px; width: 100%; margin: 0 auto; }
.homelogin h2 { font-size: 26px; }
.about { margin-top: -24px; }

@media (max-width: 860px) {
  main.start.home { gap: 40px; padding-top: 2vh; }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: clamp(38px, 11vw, 72px); }
  .hero .lead { font-size: 17px; }
  .hero-actions .btn { flex: 1; min-width: 0; }
  /* Logged out on a phone: the games straight after the headline, the coupon under them. */
  main.home.out .hero { display: contents; }
  main.home.out .home-games { order: 1; }
  main.home.out .coupon { order: 2; }
  main.home.out .homelogin, main.home.out .about { order: 3; }
}
@media (max-width: 400px) {
  .coupon { padding: 16px; }
  .coupon-signs > span { width: 46px; height: 48px; }
}

/* The coupon fills in once, the way a round does: the rows, then Svenska folket's pick in each. */
@media (prefers-reduced-motion: no-preference) {
  .coupon-rows li { animation: coupon-in 420ms cubic-bezier(.2,.7,.2,1) both; }
  .coupon-rows li:nth-child(2) { animation-delay: 70ms; }
  .coupon-rows li:nth-child(3) { animation-delay: 140ms; }
  .coupon-rows li:nth-child(4) { animation-delay: 210ms; }
  .coupon-signs > span.on { animation: sign-on 360ms ease-out both; animation-delay: 520ms; }
  .coupon-rows li:nth-child(2) .on { animation-delay: 600ms; }
  .coupon-rows li:nth-child(3) .on { animation-delay: 680ms; }
  .coupon-rows li:nth-child(4) .on { animation-delay: 760ms; }
}
@keyframes coupon-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sign-on { from { background: var(--sunk); color: var(--ink); transform: scale(0.92); } }

/* Light accents for dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-game="powerplay"] { --accent: #5aa9ff; --on-accent: #06162b; }
  :root:not([data-theme="light"]) [data-game="topptipset"] { --accent: #b18cff; --on-accent: #1a0b33; }
}
:root[data-theme="dark"] [data-game="powerplay"] { --accent: #5aa9ff; --on-accent: #06162b; }
:root[data-theme="dark"] [data-game="topptipset"] { --accent: #b18cff; --on-accent: #1a0b33; }
.gamegroups { display: flex; flex-direction: column; gap: 6px; }
.gamegroups + .gamegroups { margin-top: 6px; }
.asection > .chip { align-self: flex-start; }