/* Shared look for the ThinkMachine hub pages: the subject picker (/) and each subject's game list. */
:root { --bg:#0e1118; --panel:#161b26; --line:#2c3547; --fg:#eef1f6; --dim:#8f9ab0; --gold:#f2b33d; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--bg) radial-gradient(var(--line) 1px, transparent 1px) 0 0/24px 24px; color:var(--fg); font-family:"Work Sans",system-ui,sans-serif; }
main { max-width:960px; margin:0 auto; padding:clamp(48px,10vw,96px) 16px 64px; }
h1 { font-family:"Big Shoulders Display",Impact,sans-serif; font-weight:900; font-size:clamp(64px,17vw,160px); line-height:.82; margin:0; text-transform:uppercase; letter-spacing:-.01em; }
h1 span { color:transparent; -webkit-text-stroke:2px var(--c, var(--gold)); }
.lead { color:var(--dim); font-size:18px; margin:18px 0 48px; }
.lead b { color:var(--c, var(--gold)); font-weight:600; }
.crumb { display:inline-block; margin-bottom:28px; color:var(--dim); font-size:15px; }
.crumb:hover { color:var(--fg); }
.games { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.game { --c:var(--gold); position:relative; display:flex; flex-direction:column; min-height:200px; padding:22px; background:var(--panel); border:2px solid var(--line); border-radius:16px; color:inherit; text-decoration:none; transition:transform .15s, border-color .15s, box-shadow .15s; }
a.game:hover, a.game:focus-visible { transform:translateY(-4px); border-color:var(--c); box-shadow:0 12px 0 -4px var(--c); outline:none; }
.game small { font:600 13px/1 "Work Sans",sans-serif; color:var(--c); letter-spacing:.12em; }
.game h2 { font-family:"Big Shoulders Display",Impact,sans-serif; font-weight:900; font-size:44px; line-height:.95; margin:auto 0 8px; text-transform:uppercase; }
.game p { color:var(--dim); margin:0; font-size:15px; line-height:1.45; }
.game::after { content:"→"; position:absolute; top:18px; right:22px; font-size:22px; color:var(--c); transition:transform .15s; }
a.game:hover::after { transform:translateX(4px); }
.game.soon { border-style:dashed; background:transparent; --c:var(--dim); }
.game.soon::after { content:""; }
.game.soon h2 { color:var(--line); }
/* subject tiles on the home page: bigger, with the subject's games listed */
.subjects { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.subject { min-height:260px; }
.subject h2 { font-size:clamp(56px,9vw,72px); }
.subject .list { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.subject .list span { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }