/* Trolley Studio home (design: "Trolley Games home page" canvas): warm paper, ink text, logo D's
   wheel wordmark; each game's card keeps its own app's colours. */
:root {
  --paper: #FBF7F0; --paper-2: #F3ECDF; --ink: #1D2433; --ink-soft: #5A6275; --line: #E6DCCB;
  --card: #FFFFFF; --focus: #1F6FC5; --wheel-blue: #1F6FC5; --wheel-purple: #AF7BF7;
  --shadow: 0 1px 2px rgba(29, 36, 51, 0.06), 0 4px 14px rgba(29, 36, 51, 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14171F; --paper-2: #1B1F2A; --ink: #EEF0F5; --ink-soft: #A3AABB; --line: #2A3040;
    --card: #1C212C; --focus: #8CC4FF; --wheel-blue: #48A6FF; --wheel-purple: #C49BFA;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

body { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main { display: block; }
.wrap, .site-header, .hero, .today, .games, .how-grid, .footer-inner { max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }

/* ---- Logo D: the wheel wordmark ---- */
.wordmark { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; line-height: 1; }
.wheel { display: inline-block; width: 0.56em; height: 0.56em; margin: 0 0.02em; border-radius: 50%; }
.wheel.blue { background: radial-gradient(circle, var(--paper) 0 27%, var(--wheel-blue) 28%); }
.wheel.purple { background: radial-gradient(circle, var(--paper) 0 27%, var(--wheel-purple) 28%); margin-right: 0; }

/* ---- Header ---- */
.site-header { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px; }
.site-header nav a { padding: 10px 14px; border-radius: 20px; color: var(--ink-soft); font-weight: 800; text-decoration: none; }
.site-header nav a:hover { background: var(--paper-2); color: var(--ink); }
.site-header nav a.pill { background: var(--ink); color: var(--paper); padding: 10px 16px; }
.site-header nav a.pill:hover { background: var(--ink); opacity: 0.9; }
@media (max-width: 520px) {
  .site-header { flex-wrap: nowrap; }
  .site-header nav a:not(.pill) { display: none; } /* the page is short enough to scroll; keep the logo and one button */
  .wordmark { font-size: 24px; }
}

/* ---- Hero ---- */
.hero { padding-top: 40px; padding-bottom: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.hero-text { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.kicker { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); min-height: 20px; }
.hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-soft); max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.button { padding: 16px 24px; border-radius: 18px; font-weight: 800; font-size: 17px; text-decoration: none; }
.button.marigold { background: #FFB21E; color: #14324B; }
.button.marigold:hover { background: #FFBF40; }
.button.ghost { border: 2px solid var(--line); color: var(--ink); }
.button.ghost:hover { background: var(--paper-2); }

.stickers { flex: 0 1 470px; min-width: 0; height: 340px; position: relative; }
.sticker { position: absolute; display: flex; align-items: center; justify-content: center; }
.sticker.geoff { left: 2%; top: 20px; width: 200px; height: 200px; border-radius: 40px; background: #1F6FC5; transform: rotate(-7deg); box-shadow: 0 14px 30px rgba(23, 79, 140, 0.3); }
.sticker.geoff svg { width: 150px; height: 150px; overflow: visible; }
.sticker.owl { right: 4%; top: 0; width: 170px; height: 170px; border-radius: 36px; background: #121B2C; transform: rotate(8deg); box-shadow: 0 14px 30px rgba(11, 19, 34, 0.3); }
.sticker.slice { right: 18%; bottom: 0; width: 180px; height: 150px; border-radius: 36px; background: linear-gradient(160deg, #FFF3E0, #FFE0F0 55%, #E8F5FF); transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(93, 64, 55, 0.18); }
.sticker.slice svg { width: 112px; height: 112px; overflow: visible; }
@media (max-width: 520px) {
  .stickers { height: 270px; }
  .sticker.geoff { width: 160px; height: 160px; left: 0; }
  .sticker.geoff svg { width: 120px; height: 120px; }
  .sticker.owl { width: 132px; height: 132px; right: 0; }
  .sticker.owl img { width: 72px; }
  .sticker.slice { width: 150px; height: 124px; right: 14%; }
  .sticker.slice svg { width: 92px; height: 92px; }
}
.geoff-bob { animation: bob 1.4s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-2px); } }

/* ---- Section headings ---- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.section-head h2 { font-size: 34px; }
.section-head p { color: var(--ink-soft); font-size: 15px; }

/* ---- Today's puzzles ---- */
.today { padding-top: 8px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.daily-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 28px; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.daily-card:hover { transform: translateY(-3px); }
.daily-card h3 { font-size: 28px; line-height: 1.1; }
.daily-card .blurb { flex-grow: 1; }
.daily-card .status { font-weight: 800; }
.daily-card .pill { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.daily-art { height: 96px; display: flex; align-items: center; gap: 14px; }
.cta { align-self: flex-start; margin-top: 4px; padding: 13px 20px; border-radius: 16px; font-weight: 800; text-decoration: none; }
/* Stretched link (Geoff's card): the CTA's hit area covers the card; Geoff sits above it to be poked.
   Hover must not use `filter` on .cta: it would make the CTA the containing block of its ::after. */
.daily-card.geoff .cta::after { content: ''; position: absolute; inset: 0; border-radius: 28px; z-index: 1; }

.daily-card.geoff { color: #FFFFFF; background: linear-gradient(160deg, #2A7DD6 0%, #1F6FC5 45%, #174F8C 100%); box-shadow: 0 10px 30px rgba(23, 79, 140, 0.3); }
.daily-card.geoff .daily-art { align-items: flex-end; gap: 8px; position: relative; z-index: 2; pointer-events: none; }
.daily-card.geoff .geoff-tap { width: 96px; height: 96px; flex: none; pointer-events: auto; }
.daily-card.geoff .card-bubble { margin-bottom: 22px; padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: #FFFFFF; color: #14324B; font-size: 14px; font-weight: 700; transition: opacity 0.15s; }
.daily-card.geoff .card-bubble.fading { opacity: 0; }
.daily-card.geoff .pill { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.daily-card.geoff .blurb { color: rgba(255, 255, 255, 0.9); }
.daily-card.geoff .status { color: #FFD77A; }
.daily-card.geoff .cta { background: #FFB21E; color: #14324B; }
.daily-card.geoff:hover .cta { background: #FFBF40; }

.daily-card.knowdle { color: #F1F5F9; background: radial-gradient(120% 90% at 20% 0%, #22304A 0%, #121B2C 55%, #0B1322 100%); box-shadow: 0 10px 30px rgba(11, 19, 34, 0.3); }
.daily-card.knowdle .owl { width: 66px; height: 82px; }
.mini-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 78px; }
.mini-board i { height: 22px; border-radius: 6px; background: #1E293B; border: 1px solid #2A3648; }
.mini-board i.ok { background: #123626; border-color: #2F7D57; }
.mini-board i.bad { background: #331A22; border-color: #8F3A4E; }
.daily-card.knowdle .pill { background: rgba(255, 176, 32, 0.16); color: #FFB020; }
.daily-card.knowdle .blurb { color: #CBD5E1; }
.daily-card.knowdle .status { color: #FFB020; }
.daily-card.knowdle .cta { background: #FFB020; color: #13213F; }
.daily-card.knowdle:hover .cta { background: #FFBE45; }
@media (prefers-color-scheme: dark) {
  .daily-card.knowdle { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.4); }
}

.daily-card.cutinhalf { color: #5D4037; background: linear-gradient(160deg, #FFF3E0 0%, #FFE0F0 55%, #E8F5FF 100%); box-shadow: 0 10px 30px rgba(93, 64, 55, 0.14); }
.daily-card.cutinhalf .blob { width: 96px; height: 96px; overflow: visible; }
.daily-card.cutinhalf .pill { background: rgba(175, 123, 247, 0.16); color: #6B3FC0; }
.daily-card.cutinhalf .blurb { color: rgba(93, 64, 55, 0.85); }
.daily-card.cutinhalf .status { color: #7C4DCC; }
.daily-card.cutinhalf .cta { background: #7C4DCC; color: #FFFFFF; }
.daily-card.cutinhalf:hover .cta { background: #8B5CDA; }

.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; border: 1.5px dashed var(--line); }
.soon img { width: 44px; height: 44px; border-radius: 12px; }
.soon p { flex: 1 1 260px; }
.soon p b { font-weight: 800; }
.soon p span { color: var(--ink-soft); }
.soon-tag { font-size: 13px; font-weight: 800; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- How it works ---- */
.how { background: var(--paper-2); }
.how-grid { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.step { display: flex; flex-direction: column; gap: 8px; }
.step h3 { font-size: 22px; }
.step p { color: var(--ink-soft); }
.num { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #14324B; }
.num.marigold { background: #FFB21E; }
.num.sky { background: #48DBFB; }
.num.lilac { background: #AF7BF7; color: #1D2433; }

/* ---- Our games ---- */
.games { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.game-card { display: flex; gap: 16px; padding: 20px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.game-card img { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.game-card > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.game-card h3 { font-size: 22px; }
.tagline { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.game-card .about { font-size: 15px; color: var(--ink-soft); }
.links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.links a, .links span { font-size: 14px; font-weight: 800; padding: 9px 14px; border-radius: 12px; text-decoration: none; }
.links .web { background: #1F6FC5; color: #FFFFFF; }
.links .store { background: var(--ink); color: var(--paper); }
.links .store.soon-store { background: transparent; color: var(--ink-soft); border: 1.5px dashed var(--line); padding: 7px 12px; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { padding-top: 28px; padding-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 14px; }
.site-footer nav { display: flex; gap: 18px; font-size: 14px; }
.site-footer nav a { color: var(--ink-soft); font-weight: 700; }