@font-face{font-family:"Body";font-style:normal;font-weight:500;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAABDgAAwAAAAAIBQAABCPAAQBBgAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcMAZgAIEMCrMkp1QBNgIkA4MAC4FCAAQgBYMGByAbrxijol6TVjzBXyTYnBVc9zBhGHPkihDQQWgDobgQv0suQFNQGoeU/UspA5Kf29Q56AvvjpBklie+sf/dmd2v2a1kcSoZb4kSOb8GpBMalTc8v80e1hxgNhZMR0kaIHyqJQX90IoJfMI8xUWHV22t2tuu04to/2ku+5PJ0nuTHiBYQGNC3bSb4wKR6wpzgJpQKHSYA0KJU9v8r8yyeOjLO0K3nhfNE3h7E7Rq/39+LrU/Y5YEqiDUwE64ORby3UvS5Ocf/LScjFrOag4G6Tg3Zlk7VzuVG+Y6QPTEdp7AuHkHqDFi+51SYVqsMeAgN9uQdmZYgVQTKrrba6cjgHWlyqHuH1VGkCoJYNFMgnUjIkuMzP3mi9GUC3HFUxHsfo6O/CIZ6Pe2A95to/IBLYqvlstWHGaH9/JeogWX4U6us/j/Kd4ZaBiNqfW684ATt4EaoBvCUNvWSYZPdU+mRGjasUEE5jDqNLi0mYgrwpXh8LhHyJo4WyB1XcKEeqUfgv8vPv3k44+e+3/iufhD98PD8zXPzooCM+ZkwmUy2WiZqzH6iMDPZWAs4WlkGqSABVTm/zfKWcBaFmpg/d8oyvVUfB6wFkumQMpGEYh8tupOYiKTRPYkY9szkxYty6g9Z7JLUu2xmdnVRy5jU2YQMXpeCTZTiHGbil2fntXjludmY/KtMB87DpN2sBWelp2YmZFbJS7LHJNDNmtPyCS1pHgULhuPy8zD2sbQXpi3iseFaStz89ZLslicNDvQ1UlxiPyTRE2lmM0xGIzQYy581nQtLgVGBE0Vm9LlYoa98ZsxHoi8W0EezJkKJfFQbUFREuuj9xUsuFnwGd2r8wK8pTOvl7HkWT0oWhA36NEK1VCJmucgPticoqact161e4e+mZHh3xCLxvXHzgpCU7y2wOEEvSmq9cX1ArorvZeh+Q6IWwz+3pIODvUWfqeZpGhNAG1S9/reOjOKSVvRGPs8l3r3PQSuH6T0fLotEKAIaxJaQkRJQNTO6iAe9aqqnFFjFUrCYv0GjBVtpIJ7PW0IMBqHe0qxr3ocRwxKCz4ZDLm+RmOGGXOUo6IBxW+itiBKEagKWhRcsVHIDiPHvhTlegfRHWwVaucT66xgfByKAeMjI5tlQhOVpabqqESNUc6jKEqfgUZMUoQzlZ8YliUdBti9ncBxOGpRMCH6DGX2KUhYOYHinTIB2uWCj+MZ/B1rFis3K6GyudUM98jgychcJpETmlyjMbxST+0mx+wwLmKWw8+H7wyPMinndlzmfmhaJhsPQmwK3/F8IxP6bPJy6IxA4NNDCVJ8oli7xVgwAMABJtmRGlhh9QSkWjRVWLDKEShY0ZY1ZEObgzBajo5tzaqx6gbbA9YqS5R2dj/bKrhzV0AxPdqzaYTIv1jl8RhUF86qNvhCt0xRKrBZSNBfMyQmXuSv6gzeN3/APx9ODYbR9BPzrFpy02zyeC3HujtnWUh6mMl9M1mUdLIcPeHQxALE4zvi10hto0PQSUhBxVatjNG0yimZ7qhENcvjnjIUytyC8VXvilL4LqI8vYAdoaBRMEqjoD20ilgm7oFOoWD5NihmuKRO0lGp00jtJVXgbHpvoUeVn0mW+C7yxdVZ7yKXlpz9DEsDq6v9mmoS2Yz4Zpl/tHqVCljQUJxPhZHRCAjma+Rx2lWyImlZVGIJK3BUAlp3EqaHy6nlBZ+1DTfZQ4fYgAfvjIzxxQsqmcEVbw8PrLhF/Dbp1I74ecM5mb3bJU9KbhGYaA/RQoaCORscpqHJs5BY93112vEgrYGjhpBiseQII1Hfp3nm5URueWRZDWMClsWYN6Is0JG6XM1StO2IWIYCe/7o+VD10ujprL+iTkSFR4GNI6RugKVdqlFDs9BZLOJvDSDJsYyCg2DQC0s6qodTx3QRIaCHIhog+G2YVDGjFffBqfmvY+RQahQeAIPTcH3SYioEi3rwNw57ydF2xl04WFGhlb9trRyk7i7D3NVg7/43uYGdd2oeWeM9SJgbALvO8g97nxiFHfI+jn92INh1Pm6td9n12fFfBxW7qRZ7Cz+5DWqDU8Me/Sj+qXXvCjINVc1KgSHcf/kWKizLeu0ppTfyjhVvCjKOo0khCGDT7i2eqSYuHilcsQJ77zlQFzLqhUIulMuNBg03yF3bts0G24QH2JZ2XjmaZOH9N52sJ6gjiLCYLRYej+8E4DWZsqJUuSJE5zr5sragDnd1vJZMllrqmlv0xBVqHpLUXlm5rrRkqWd2RhIZsx7c8MD99xmkqtm5KNlBV4o4oTg+sNThr5x+KEgacMUwSE+YcHR/X1FXDyYGyPMYBcf3H51RxEMOsvyh6RO7Cwbrp4naDTTyJrWFrLk7OrN3hDooxvW09dTBLiPWnJ1w3k7gaVx8ofeFRefmWcCtDcM5CkkOsKZkw7vklSeykhzBzF8coKUqcnX7dh736OOR6wpI+fh+XW6AJ+HxAGFtxpwQX1whIP5HjYAY9L/4VjgERg859IO98nAzp1HIbeErygcTQquGfQOjQ16ZbI3Xrxbd4jo+MwDe1KruLomvgW5itUKW95NOQnZFC7Ojh6Ho3zSY1D3IkAt4XEjAlLQ3dxbbS3TASG+kvtnU+KY1AEj7zdqPNr0Ge+ADwQNJ1752fgOyYtpbSn0txeiXEge4ikYkCOkHVvdh2wOPKVlNUolJKpOqJA0C6pf9Z+fAHHyUoVUPozYf9lCaBd7Gxj6lhDXQ16rqjtjIZ8cHE7xI33JNz7OPGGVisUYn5cnUkEiiE4Pl8bx4uDCCuD4GmieCLKa1j6FR9zOYVlZjo/GzNZCdD0GeKFOpjDAvCDsER9D3xC1cTnyjmmiy1qYmOY92/Zaez23SSsQijbSRo4ME4JXdEL1RCgXWh8w1dKiHwfErB+OrQhuQZ85N1Z/uMdj7woEUY8/CgyJFq1im4vFkGj5XopGBvsujAZdv0tebqPEkHal0ddHlzOdYrLcYfRwm7KUL7bfyez0vrD1rMO/z6lg7uzok9CP+z2ESXW3u1KlaV4c0Ukv9lKehrCazWF6CZyqKBxiTu9dujS0Eeq4Nx/eb8++QVKUrbfjQwOk26z7v9jVff71hr5IhohJ0ZKqKupLPqDKQKa9TwLdbqxu2Dv0xu6b99Q23fRUUhATgN5va1cpkGbup4vzZ5VIfha6jcXhaPYq0tfFjKmWpcesr/0BsGl3c0rzvrUOg5qr95CmbK/BIP96zcdrB5In7uJywWs0J97WKeQ7m9Ea855G+gPukzX6yCxyZmTbajvX22g5P6wOfzH4yYp1aPTwytX409G8InLfd/QH+4bV0OD4Xh8EnMzDh3mfwZ1RkFkDfnXYwHFSElEoOorsXw+FubHtyx6QVretcv0fX4WaBLkqRIDozi1Clb4lA6qX14Lx1mQU3Zn6Fg32dnZwEDqfdIBJfJ/0KEJbFXvbgpnG2kzpoNnC+4+tO2HNAG0K5Au++8o721XfeRWbHfsb9hAPrEHPKMmQOMSenIACfcspmP+VadTOHT7pG8KlYt8jd18qJhCKXKw6LEPkqA+pTDfBAs3miGJn9QTfIYsHNzwT/YiFTE59MAO99I6vvslymp3bqD8nI0090bNW1aLGNGPDM8TxLvmaB/T0TaQbbch6umAhO8Pk8FusfaAJ8mRKg8qycUc6XTS1QI6l68y1YmGWsaVFDnBZrH0Xqi3tTLBO1EJPV8BIF55/lirLNtRyNgNkI9zcqAGYGnrchtgUYnJs5p9VrFUq9VnsOmTfJo2NNSuVokzRqmgcnZ5Jm1iTPjN6DnocAVzB7b2ZqZ9qhtElwfXZkO/MwM76DRm5go+0NW/zI37v+ntT9e7MjfvTf3f9OAvXMpwv/IP98tjB5wogEYM4t9Cxaob8EkhTkC6ftvtM+x4tOoJ1/0dG7PvYXwcOEXnIvqPGLJmMSGeSk3dCFCWH9TQ+dL43KRKsMV1lkg3IlkaisJ+ubmsgmFfET6nGTjU3grX+8tFZ5VCyMGwzCVTGZjO9uuKlDlpAMzdoTrqrfUFV3ajhVjQqAc3iH1uTuysRHxFrvKnu+ZewLiEST6N1Wq94j8VSYxwoMq91u7YhEFDchc5Wz/OTP0OGlsGHWfQ2CLPZwCFGNZ5Mgi5bfWasaK1Sucrq04xJJ3GQSxcfFbZoRoXBUF6tOtyihFoNiEjTc6VoML0IwRHB4zf0Oxj4qoQv4KW7as7owVcWLDQuNwd3+5dbQopHRIjYadJ033QweGmYI2xpd/BjTa56muJmNPUpxiKGQa/h8hUbBQJaQf6+21zKBLzCiNsWWERDC0VfknTadTN3iJFQvVuxGQE32v9mHnvvmW2QJeezWD8fA+U+WkCVAQ6hdzGZHDqv7QUB4T5pqGwTd7Gemepq54CRlr16TE0rMXuDr1Psk0rjJKJ+aFGu1DHrljEbl1CqJdqVbVUcxcDgkvbKOSFTUrdRzrDanGLz1t4fOk8UkwskKeFl5LtqnZoSEtGnWTZjYV4Hvpp/RhUlh8xkfHZJGpgfpNaAnN8XKhCKhsQohIDrwUmoXuUWXFat6nkwVlVU8+uOL6opGiEWky5x1PDtiT2xDajrIpB9L8/998e4lFW4yiUKX2+v44IU7DRWL1RKHTd0mbWuAYGhjeOM6GHDxBAQ6acY3QEHtIArR95MOKnyHL4+8hN/wIn4U0H4iPIQfHtxH+zn8MD6CLEQWhgJzoTnAyn8yfyq2EOiXPJn+ZIHgBEAzPq+6PhbAvFk2eej0idPg8c6/4An4r/6/5XoCkg1+gXuE0C7IFQ9qTZoWYZPLxxD2DQyhOv2siRYWnysoe/bEVe3DklyXQAIGDjoLnIDRdsj5XUnbOTPu/1YH9tzOjH3L5DP/D7vHkei0M05vxHse7gtEn52o7unUKEoyM0sUmk4HPis6+Peins568uSDwruvab6uKSio+Vrz2j17AHLw40HnYWdTgHIAzmRInZXCvCGA5mtJgrT90y5JSQPVxh2ANc5uUnEjFJ4IMoElzfkp+1AXf7pSCtwi6hNEM5ICbuTA+W2qazMUYCbl1b+qf+IJ51+qTvwC4OfbqQD4s8Ui/37+78LaN5MJWJFgKRv495KvvZ5q9KcJv5wz81N+oXPiIDfaI1Q1/Cq6CWcUq++fqj2iKt8Y5wtVkj/wuqjLR5IrZ/EjahMAt1M4sSMVQqt+VnU9cicpugoW1YpOZI9/jNqvqKHCtdiKiQKSzqtqjHIkg9reUL3YCCSKyZXGSbUYiB1x5Lw+ENCXlGbmqAFCDhkubKfm/IUi9CmKzsgZn8vpHrTCMkpGy6f2ZEl8lJvo9Kkwzdo5MOkpjkqhiG10rXKi5P+l1tPQZ0bQjWFMwKsjXE9cI/ORElGaCZeUDz2auFF+1isJ7zcQu069XzB6nWUcQSo/wWVa0dS4TqCOKsWx1FDZ2Cw7YEWl5MkcErJKbSYMNZcD4BkAXz1QSp3qkSDdxR6Jmt1dMAnaIxk6KaCnUppMQgFBIxA9uvlF4NBQl/CixongYzowDWbNQWExRW60N8M8igWQqFL/jCEwtsIgEA3agmYUmN16gFaUG/m4MmAA5Yx2AV6Rg7wQIxHH5aLrKFhqPl5rRQ3QO9odBf1cHy+7nJGEVgucMsIsBjIqTcbg1kgYT71fUlai2ZAW0AAA) format("woff2")}
@font-face{font-family:"Display";font-style:normal;font-weight:700;font-display:block;src:url(data:font/woff2;base64,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) format("woff2")}
:root{
  --bg:#F0EDE6; --surface:#E7E3DA; --surface-2:#DAD5C9; --line:#DAD5C9;
  --accent:#C42348; --on-accent:#FFFFFF; --accent-bright:#C42348; --accent-soft:#F7D9E1;
  --card:#FFFFFF; --on-card:#1F2544; --card-edge:#DAD5C9;
  --prompt-bg:#1F2544; --prompt-edge:#1F2544; --on-prompt:#F0EDE6;
  --prompt-label:#FF7A9C;
  --text:#1F2544; --muted:#5E6274; --owned:#115E59;
  --chip:#E7E3DA; --on-chip:#5E6274; --btn-fill:#FFFFFF;
  --placeholder:#5E6274; --field:#FFFFFF; --field-edge:#DAD5C9; --blurb:#5E6274;
  --pack-live:#F7D9E1;
  color-scheme:light;
}
/* Each deck carries its own palette. The app sets data-deck on <html> when a
   deck is chosen, and every screen follows. Pack pages set it server side. */
[data-deck="xmas"]{--ghost:#E7C5BE;
  --bg:#F7F2E7; --surface:#EFE8D8; --surface-2:#E2DAC8; --line:#E2DAC8;
  --accent:#A8121A; --on-accent:#FFFFFF; --accent-bright:#A8121A; --accent-soft:#F6DCDC;
  --card:#FFFFFF; --on-card:#14261C; --card-edge:#E2DAC8;
  --prompt-bg:#0E3B2B; --prompt-edge:#0E3B2B; --on-prompt:#F7F2E7;
  --prompt-label:#E2B75A;
  --text:#14261C; --muted:#5C6157;
  --chip:#EFE8D8; --on-chip:#5C6157; --btn-fill:#FFFFFF;
  --placeholder:#5C6157; --field:#FFFFFF; --field-edge:#E2DAC8; --blurb:#5C6157;
  --pack-live:#F6DCDC;
}
[data-deck="xmas-clean"]{--ghost:#E7C5BE;
  --bg:#F7F2E7; --surface:#EFE8D8; --surface-2:#E2DAC8; --line:#E2DAC8;
  --accent:#A8121A; --on-accent:#FFFFFF; --accent-bright:#A8121A; --accent-soft:#F6DCDC;
  --card:#FFFFFF; --on-card:#14261C; --card-edge:#E2DAC8;
  --prompt-bg:#0E3B2B; --prompt-edge:#0E3B2B; --on-prompt:#F7F2E7;
  --prompt-label:#E2B75A;
  --text:#14261C; --muted:#5C6157;
  --chip:#EFE8D8; --on-chip:#5C6157; --btn-fill:#FFFFFF;
  --placeholder:#5C6157; --field:#FFFFFF; --field-edge:#E2DAC8; --blurb:#5C6157;
  --pack-live:#F6DCDC;
}
[data-deck="pride"]{--ghost:#D9BCE4;
  --bg:#FBF2FD; --surface:#F4E6F8; --surface-2:#EBD7F2; --line:#EBD7F2;
  --accent:#750787; --on-accent:#FFFFFF; --accent-bright:#750787; --accent-soft:#F0DBF4;
  --card:#FFFFFF; --on-card:#241029; --card-edge:#EBD7F2;
  --prompt-bg:#2B0A33; --prompt-edge:#2B0A33; --on-prompt:#FBF2FD;
  --prompt-label:#F2A6D8;
  --text:#241029; --muted:#6B5173;
  --chip:#F4E6F8; --on-chip:#6B5173; --btn-fill:#FFFFFF;
  --placeholder:#6B5173; --field:#FFFFFF; --field-edge:#EBD7F2; --blurb:#6B5173;
  --pack-live:#F0DBF4;
}
[data-deck="bach"]{--ghost:#EEC4D3;
  --bg:#FDF0F3; --surface:#F9E2E9; --surface-2:#F2D3DE; --line:#F2D3DE;
  --accent:#B01455; --on-accent:#FFFFFF; --accent-bright:#B01455; --accent-soft:#FBD9E7;
  --card:#FFFFFF; --on-card:#2B1220; --card-edge:#F2D3DE;
  --prompt-bg:#4A0F32; --prompt-edge:#4A0F32; --on-prompt:#FDF0F3;
  --prompt-label:#FF9EC4;
  --text:#2B1220; --muted:#75566A;
  --chip:#F9E2E9; --on-chip:#75566A; --btn-fill:#FFFFFF;
  --placeholder:#75566A; --field:#FFFFFF; --field-edge:#F2D3DE; --blurb:#75566A;
  --pack-live:#FBD9E7;
}
[data-deck="boys"]{--ghost:#BED4D4;
  --bg:#EDF1F2; --surface:#E0E7E9; --surface-2:#D2DBDE; --line:#D2DBDE;
  --accent:#00625E; --on-accent:#FFFFFF; --accent-bright:#00625E; --accent-soft:#D4EAE7;
  --card:#FFFFFF; --on-card:#12242B; --card-edge:#D2DBDE;
  --prompt-bg:#12242B; --prompt-edge:#12242B; --on-prompt:#EDF1F2;
  --prompt-label:#5FD6C9;
  --text:#12242B; --muted:#4F6068;
  --chip:#E0E7E9; --on-chip:#4F6068; --btn-fill:#FFFFFF;
  --placeholder:#4F6068; --field:#FFFFFF; --field-edge:#D2DBDE; --blurb:#4F6068;
  --pack-live:#D4EAE7;
}
[data-deck="mill"]{--ghost:#D4C9E9;
  --bg:#F2F0F7; --surface:#E7E3F1; --surface-2:#DBD5EA; --line:#DBD5EA;
  --accent:#5B2BB0; --on-accent:#FFFFFF; --accent-bright:#5B2BB0; --accent-soft:#E4D9F6;
  --card:#FFFFFF; --on-card:#221A38; --card-edge:#DBD5EA;
  --prompt-bg:#221A38; --prompt-edge:#221A38; --on-prompt:#F2F0F7;
  --prompt-label:#B79BF0;
  --text:#221A38; --muted:#5B5273;
  --chip:#E7E3F1; --on-chip:#5B5273; --btn-fill:#FFFFFF;
  --placeholder:#5B5273; --field:#FFFFFF; --field-edge:#DBD5EA; --blurb:#5B5273;
  --pack-live:#E4D9F6;
}
[data-deck="boom"]{--ghost:#E7CDBA;
  --bg:#F7EFE2; --surface:#EFE3D0; --surface-2:#E4D6BF; --line:#E4D6BF;
  --accent:#A8471A; --on-accent:#FFFFFF; --accent-bright:#A8471A; --accent-soft:#F6DECB;
  --card:#FFFFFF; --on-card:#2E1D10; --card-edge:#E4D6BF;
  --prompt-bg:#3B2415; --prompt-edge:#3B2415; --on-prompt:#F7EFE2;
  --prompt-label:#E9A15E;
  --text:#2E1D10; --muted:#6B5744;
  --chip:#EFE3D0; --on-chip:#6B5744; --btn-fill:#FFFFFF;
  --placeholder:#6B5744; --field:#FFFFFF; --field-edge:#E4D6BF; --blurb:#6B5744;
  --pack-live:#F6DECB;
}
[data-deck="date"]{--ghost:#EAC5CB;
  --bg:#FBEFEF; --surface:#F6E1E1; --surface-2:#EFD2D2; --line:#EFD2D2;
  --accent:#A81B3C; --on-accent:#FFFFFF; --accent-bright:#A81B3C; --accent-soft:#F9D9E0;
  --card:#FFFFFF; --on-card:#2C1116; --card-edge:#EFD2D2;
  --prompt-bg:#4B1020; --prompt-edge:#4B1020; --on-prompt:#FBEFEF;
  --prompt-label:#FF95AC;
  --text:#2C1116; --muted:#78535A;
  --chip:#F6E1E1; --on-chip:#78535A; --btn-fill:#FFFFFF;
  --placeholder:#78535A; --field:#FFFFFF; --field-edge:#EFD2D2; --blurb:#78535A;
  --pack-live:#F9D9E0;
}
[data-deck="fam"]{--ghost:#D2DABE;
  --bg:#FBF6E6; --surface:#F5EDD4; --surface-2:#EAE0C2; --line:#EAE0C2;
  --accent:#2F6B1E; --on-accent:#FFFFFF; --accent-bright:#2F6B1E; --accent-soft:#DCEDD1;
  --card:#FFFFFF; --on-card:#1E2A12; --card-edge:#EAE0C2;
  --prompt-bg:#1E3A14; --prompt-edge:#1E3A14; --on-prompt:#FBF6E6;
  --prompt-label:#F0C64C;
  --text:#1E2A12; --muted:#5B6349;
  --chip:#F5EDD4; --on-chip:#5B6349; --btn-fill:#FFFFFF;
  --placeholder:#5B6349; --field:#FFFFFF; --field-edge:#EAE0C2; --blurb:#5B6349;
  --pack-live:#DCEDD1;
}
[data-deck="office"]{--ghost:#C5D0E3;
  --bg:#EEF1F5; --surface:#E1E6EE; --surface-2:#D3DAE5; --line:#D3DAE5;
  --accent:#1F4E9C; --on-accent:#FFFFFF; --accent-bright:#1F4E9C; --accent-soft:#D8E4F6;
  --card:#FFFFFF; --on-card:#151E2E; --card-edge:#D3DAE5;
  --prompt-bg:#151E2E; --prompt-edge:#151E2E; --on-prompt:#EEF1F5;
  --prompt-label:#7FB2F0;
  --text:#151E2E; --muted:#4E5A6E;
  --chip:#E1E6EE; --on-chip:#4E5A6E; --btn-fill:#FFFFFF;
  --placeholder:#4E5A6E; --field:#FFFFFF; --field-edge:#D3DAE5; --blurb:#4E5A6E;
  --pack-live:#D8E4F6;
}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;padding:0;color:var(--text);
  font-family:"Body",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-weight:500;
  -webkit-font-smoothing:antialiased;min-height:100%}
.wrap{max-width:480px;margin:0 auto;padding:20px 18px 60px}
@media(min-width:768px){.wrap{max-width:720px}}

/* header */
.brandbar{display:flex;align-items:center;gap:10px;margin-bottom:40px}
a.brand,a.brand:hover,a.brand:visited,a.brand:focus,.brandbar a,.brandbar a:hover,.brandbar a:visited{text-decoration:none!important;color:var(--text)}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);text-decoration:none}
.brandmark{width:24px;height:24px;color:var(--accent);flex:none}
.navbtns{margin-left:auto;display:flex;gap:8px}
.navwrap{position:fixed;inset:0;z-index:50;display:none}
.navwrap.open{display:block}
.navwrap .scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.navpanel{position:absolute;top:0;right:0;bottom:0;width:min(310px,84vw);background:var(--surface);
  border-left:1px solid var(--line);padding:18px 18px 26px;display:flex;flex-direction:column;gap:6px;
  overflow-y:auto}
.navpanel .top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.navpanel .close{margin-left:auto;background:none;border:none;color:var(--text);font-size:26px;
  line-height:1;cursor:pointer;padding:0 4px}
.navpanel a{display:block;padding:13px 12px;border-radius:11px;text-decoration:none;color:var(--text);
  font-size:16px;font-weight:700;background:var(--btn-fill);border:1px solid var(--line)}
.navpanel a:hover{border-color:var(--accent)}
.navpanel a.here{border-color:var(--accent);color:var(--accent)} 
/* type */
h1 .hit,h2 .hit,h3 .hit,h4 .hit{color:var(--accent)}
p{color:var(--text);font-size:16.5px;line-height:1.6;margin:0 0 12px}
.muted{color:var(--muted)}
.sect{padding:26px 0;border-top:1px solid var(--line)}
.btn + .sect,.btn + section{margin-top:14px}
.sect > .btn:last-child{margin-bottom:6px}
.sect:first-of-type{border-top:none;padding-top:0}
a{color:var(--accent)}
.sect a:not(.btn):not(.related a):not( a),.note-line a:not(.btn),p a:not(.btn){color:var(--accent);
  text-decoration:underline;text-underline-offset:2px;font-weight:700}
.related a,.related a b,.related a span,.sitefoot a{text-decoration:none!important}
.related a b{color:var(--text)}
.btn-primary,.sect a.btn-primary,p a.btn-primary{background:var(--accent);color:var(--on-accent);
  text-decoration:none;border:none}
.btn-second,.sect a.btn-second,p a.btn-second{background:var(--btn-fill);color:var(--text);
  border:2px solid var(--text);text-decoration:none}
.related a,.sitefoot a{text-decoration:none}
.related a{color:var(--text)}

/* buttons */
.btn{display:block;width:100%;border:none;border-radius:14px;padding:17px 18px;font-size:17px;
  font-weight:700;font-family:inherit;cursor:pointer;text-align:center;text-decoration:none;
  margin-bottom:10px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-second{background:var(--btn-fill);color:var(--text);border:2px solid var(--text)}

/* cards + decks */
.demo{background:var(--prompt-bg);border:1px solid var(--prompt-edge);border-radius:18px;
  padding:18px 16px 20px;margin-bottom:12px}
.demo i{font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-bright)}
.demo p{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:23px;line-height:1.25;
  margin:9px 0 0;color:var(--on-prompt);font-weight:400}
.answers{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.answers div{background:var(--card);color:var(--on-card);border:1px solid var(--card-edge);
  border-radius:13px;padding:14px 15px;font-size:16.5px;font-weight:700;line-height:1.3}
.answers div.win{border:3px solid var(--accent);padding:12px 13px;display:flex;align-items:center;gap:10px}.cardgrid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px}
@media(min-width:560px){.cardgrid{grid-template-columns:1fr 1fr}}
.cardgrid div{background:var(--card);border:1px solid var(--card-edge);border-radius:12px;
  padding:13px 14px;font-size:15.5px;font-weight:700;line-height:1.35;color:var(--on-card)}
.cardgrid div.p{background:var(--prompt-bg);color:var(--on-prompt);border-color:var(--prompt-edge);
  font-family:"Display","Avenir Next",system-ui,sans-serif;font-weight:400;font-size:17px;text-transform:none}

/* the start form, copied from the home screen so the two match exactly */
.startbox{display:flex;flex-direction:column;gap:10px;margin:0 0 8px}
.startbox .label{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:6px 0 0}
.input{width:100%;background:var(--field);border:2px solid var(--field-edge);border-radius:14px;
  padding:15px 16px;color:var(--text);font-size:17px;font-family:inherit;
  transition:border-color .14s ease}
.input::placeholder{color:var(--placeholder)}
.input:focus{outline:none;border-color:var(--accent)}
.startbox .btn{margin-bottom:0}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0 4px;color:var(--muted);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-quiet{background:none;border:none;color:var(--accent);font-size:15px;font-weight:700;
  text-decoration:underline;padding:10px;cursor:pointer;font-family:inherit;width:100%;
  display:block;text-align:center;margin-bottom:26px}

/* comparison table, same as the home screen */
.vs{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:var(--surface)}
.vs th,.vs td{padding:12px 12px;text-align:left;border-bottom:1px solid var(--line);color:var(--text)}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:none}
.vs thead th{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;background:var(--surface-2)}
.vs thead th.us{color:var(--accent)}
.vs td:first-child{color:var(--muted);font-weight:700}
.vs .us{font-weight:700}
.vs .hit{color:var(--accent)}

/* sample cards, drawn the way players actually see them */
.fanprompt{background:var(--prompt-bg);border:1px solid var(--prompt-edge);border-radius:18px;
  padding:20px 18px 22px;margin-bottom:12px}
.fanprompt i{font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-bright)}
.fanprompt p{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:23px;line-height:1.26;
  margin:9px 0 0;color:var(--on-prompt);font-weight:400}
.deckfan{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.deckfan .dc{min-height:120px;border-radius:16px;padding:16px 15px;font-size:16.5px;line-height:1.3;
  font-weight:700;text-align:left;background:var(--card);color:var(--on-card);
  border:3px solid var(--card-edge);display:flex;align-items:flex-start}
.deckfan .dc:nth-child(odd){transform:rotate(-1deg)}
.deckfan .dc:nth-child(even){transform:rotate(0.9deg)}
.fanlabel{display:flex;gap:18px;color:var(--muted);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;margin:0 0 10px}
.fanlabel i{font-style:normal;display:flex;align-items:center;gap:7px}
.fanlabel i::before{content:"";width:13px;height:13px;border-radius:4px;background:var(--card);
  border:1px solid var(--card-edge)}
.fanlabel i.p::before{background:var(--prompt-bg);border:1px solid var(--prompt-edge)}

/* a still of the real game screen */
.screen{border:1px solid var(--line);border-radius:18px;padding:14px 13px 16px;
  background:var(--surface);display:flex;flex-direction:column;gap:9px;margin-bottom:4px}
.screen .bar{display:flex;align-items:center;gap:8px}
.screen .room{display:flex;align-items:baseline;gap:7px;background:var(--chip);padding:6px 11px;border-radius:10px}
.screen .room i{font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.screen .room b{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:16px;letter-spacing:.13em;color:var(--accent);font-weight:400}
.screen .rnd{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.screen .chips{display:flex;flex-wrap:wrap;gap:5px}
.screen .chips span{font-size:11px;padding:5px 9px;border-radius:20px;background:var(--chip);color:var(--on-chip)}
.screen .chips span.j{background:var(--accent);color:var(--on-accent);font-weight:700}
.screen .prompt-mini{background:var(--prompt-bg);border:1px solid var(--prompt-edge);border-radius:14px;padding:14px 13px 16px}
.screen .prompt-mini i{font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-bright)}
.screen .prompt-mini p{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:19px;line-height:1.25;
  margin:8px 0 0;color:var(--on-prompt);font-weight:400}
.screen .hint-mini{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:2px 0 0}
.screen .hand-mini{display:flex;flex-direction:column;gap:8px}
.screen .hand-mini div{background:var(--card);color:var(--on-card);border:2px solid var(--card-edge);
  border-radius:13px;padding:13px 14px;font-size:15px;font-weight:700;line-height:1.35;
  display:flex;align-items:center;gap:10px}
.screen .hand-mini div.sel{border-color:var(--accent)}
.screen .hand-mini div.sel::after{content:"Selected";margin-left:auto;flex:none;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:800}
.screen .go{background:var(--accent);color:var(--on-accent);border-radius:12px;padding:13px;
  text-align:center;font-weight:700;font-size:14px;margin-top:2px}
.cap{color:var(--muted);font-size:14px;margin:30px 0 0}

/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 0 20px}
.stats div{background:var(--surface);padding:15px 14px}
.stats span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.stats b{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:24px;font-weight:400;
  color:var(--text);letter-spacing:.01em}
.stats b.hit{color:var(--accent)}
@media(min-width:640px){.stats{grid-template-columns:repeat(4,1fr)}}

/* steps */
.steps{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.steps li{background:var(--surface);border-radius:15px;padding:18px 18px 20px;
  display:flex;align-items:flex-start;gap:16px}
.steps .n{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:28px;color:var(--accent);
  letter-spacing:.04em;flex:none;line-height:1;min-width:34px;font-weight:400}
.steps .n.play{display:flex;align-items:center;justify-content:center}
.steps .n.play svg{width:34px;height:34px;color:var(--accent);display:block}
.steps b{display:block;font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:23px;font-weight:400;
  text-transform:uppercase;color:var(--text);letter-spacing:.01em;margin-bottom:4px;line-height:1.05}
.steps span:not(.n){display:block;font-size:15.5px;line-height:1.5;color:var(--text)}
.note-line{color:var(--muted);font-size:15px;line-height:1.55;margin:44px 0 0}

/* faq */
.faq details{border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  background:var(--surface);margin-bottom:8px}
.faq summary{cursor:pointer;font-size:17px;font-weight:700;color:var(--text);list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:800;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:10px 0 0;font-size:16px;color:var(--text)}

/* packs */
/* The rows are the interface, not a price list. This says so once, in the
   gap between the section copy and the list itself, so it reads as a label on
   the list rather than another line of prose. */
.packhint{margin:14px 0 10px;font-family:"Body","Avenir Next",system-ui,sans-serif;
  font-size:13.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.packlist{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:10px}
.packlist li{border-radius:14px;padding:13px 14px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;background:var(--card);border:2px solid transparent;
  box-shadow:0 1px 2px rgba(31,37,68,.05),0 3px 9px rgba(31,37,68,.06)}
.packlist li.live{border-color:transparent;background:var(--card)}
.packlist b{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:22px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--text);font-weight:400}
.packlist li.live b{color:var(--text)}
.packlist em{font-style:normal;color:var(--text);font-size:14.5px;width:100%;margin-top:-2px;line-height:1.45}
.ready{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-accent);
  background:var(--accent);padding:4px 9px;border-radius:20px;margin-left:auto;font-weight:800}.ratings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
/* Price sits beside the rating chip so a locked pack states its cost up front. */
.cost{font-size:13px;font-weight:800;letter-spacing:0;white-space:nowrap;margin-left:auto}
.cost.free{color:var(--owned)}
.cost.paid{color:var(--accent)}
.ratings div{border-radius:14px;padding:15px 14px;background:var(--surface);border:2px solid transparent}
.ratings div.adult{border-color:var(--accent);background:var(--pack-live)}
.ratings b{display:block;font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:20px;
  text-transform:uppercase;letter-spacing:.01em;font-weight:400;margin-bottom:5px;color:var(--text)}
.ratings div.adult b{color:var(--accent)}
.ratings span{display:block;font-size:14px;line-height:1.45;color:var(--text)}

/* checklist */
.checks{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:17px;line-height:1.45}
.checks li::before{content:"";flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px 15px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px 15px no-repeat, linear-gradient(#000,#000);
  mask-composite:exclude}.closing{text-align:center;padding:34px 0 0;border-top:1px solid var(--line);margin-top:8px}
.closing h2,.closing h3{margin:0 0 8px;font-size:30px}
.closing p{color:var(--text);font-size:16px;margin:0 0 16px}
.foot{color:var(--muted);font-size:13.5px;text-align:center;padding:26px 0 0;line-height:1.6}
.foot a{color:var(--muted)}
.sitefoot{border-top:1px solid var(--line);margin-top:34px;padding-top:22px}
.sitefoot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.sitefoot a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:700}
.sitefoot a:hover{color:var(--accent)}
.related{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.related a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;text-decoration:none;color:var(--text);font-weight:700;font-size:15.5px}
.related a:hover{border-color:var(--accent)}
.related a b{display:block;font-weight:700;font-size:15.5px}
.related a span{display:block;color:var(--muted);font-size:13.5px;font-weight:600;margin-top:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* pack grid: names only, two across */
@media(max-width:380px){}

/* how to play: visual lobby walkthrough */
.lobbyshot{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:18px 16px 16px;margin:18px 0 6px}
.lrow{display:flex;gap:13px;align-items:flex-start;padding:0 0 17px}
.lrow:last-of-type{padding-bottom:8px}
.lstep{flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.lrow>div{flex:1;min-width:0}
.lrow b{display:block;font-size:14.5px;font-weight:800;margin-bottom:8px}
.lrow em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:7px;line-height:1.45}
.codebox{background:var(--bg);border:2px dashed var(--surface-2);border-radius:12px;
  padding:11px 14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.codebox i{font-style:normal;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.codebox b{display:inline;font-family:"Display",system-ui,sans-serif;font-size:26px;letter-spacing:.06em;
  color:var(--accent);margin:0}
.codebox span{font-size:11.5px;color:var(--muted);margin-left:auto}
.seg2{display:flex;gap:7px;flex-wrap:wrap}
.seg2 span{padding:9px 15px;border-radius:11px;background:var(--btn-fill);border:2px solid var(--surface-2);
  font-size:13px;font-weight:700;color:var(--muted)}
.seg2 span.on{border-color:var(--accent);color:var(--accent)}
.fakeselect{background:var(--field);border:2px solid var(--field-edge);border-radius:12px;
  padding:12px 14px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.fakeselect i{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--muted)}
.lgo{background:var(--accent);color:var(--on-accent);border-radius:12px;padding:13px;
  text-align:center;font-weight:800;font-size:15px;margin-top:4px}


@media(min-width:768px){
    }
.wrap{position:relative}
.brandbar,.wrap>h1,.wrap>.lead,.startbox{position:relative;z-index:1}

/* the step list needs room before the paragraph that follows it */
.steps{margin-bottom:26px}
.steps+.note-line{margin-top:22px}
.sect>ol.steps+p{margin-top:22px}
/* full width call to action */
.btn-wide{display:block;width:100%;box-sizing:border-box;margin:30px 0 30px;
  background:var(--accent);color:var(--on-accent)!important;text-decoration:none!important;
  border:none;border-radius:14px;padding:17px 18px;text-align:center;
  font-family:"Display","Avenir Next",system-ui,sans-serif;font-weight:700;font-size:17px}
.btn-wide:hover{filter:brightness(1.06)}
.navplay{margin-top:auto;margin-bottom:0;text-align:center;
  background:var(--accent);color:#FFFFFF!important;border:none;
  text-decoration:none!important;font-weight:700}
.navpanel a.navplay{background:var(--accent);border-color:var(--accent);
  color:#FFFFFF!important;text-align:center;font-weight:800}
.navpanel a.navplay:hover{background:var(--accent);filter:brightness(1.06);color:#FFFFFF!important}
h2,h3{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:31px;line-height:1.1;
  text-transform:uppercase;margin:0 0 8px;color:var(--text);letter-spacing:.01em;font-weight:700}
h2+p,h3+p,h4+p{margin-top:0}
.sect h2+p,.sect h3+p{margin-top:0}
h1,.logo{font-family:"Display","Avenir Next",system-ui,sans-serif;
  font-size:clamp(34px,9vw,46px);line-height:1.08;text-transform:uppercase;
  margin:0 0 10px;color:var(--text);letter-spacing:.01em;font-weight:700}
h4{font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:21px;line-height:1.15;
  text-transform:uppercase;margin:22px 0 7px;color:var(--text);letter-spacing:.01em;font-weight:700}
.lead,.lede{font-size:17.5px;line-height:1.5;color:var(--text);margin:0 0 18px}
h1+.lead,h1+.lede,.logo+.lead,.logo+.lede{margin-top:0}
/* accent words inside headings, declared after the heading rules so they win */
h1 .hit,h2 .hit,h3 .hit,h4 .hit,.logo .hit,.page-title .hit,
.sect h2 .hit,.sect h3 .hit,.closing h2 .hit{color:var(--accent)}
.menu-btn{background:none;border:none;color:var(--accent);
  width:44px;height:44px;margin-right:-8px;border-radius:10px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent}
.menu-btn:hover{opacity:.7}
.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menu-btn svg{width:23px;height:23px;display:block}
@media(min-width:768px){
      }
@media(min-width:768px){
      }
/* shown when polls have failed a few times in a row, so a struggling server
   reads as a status rather than a frozen screen */
.reconnecting{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:12px 0 0;padding:10px 14px;border-radius:11px;
  background:var(--surface);color:var(--muted);font-size:14px;font-weight:700}
.reconnecting::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--accent);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@media(min-width:768px){
      }
/* pack list rows that are links, as on the card packs page */
.packlist li>a{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;
  text-decoration:none!important;color:var(--text)}
.packlist li:has(a):hover{border-color:var(--accent)}
.packlist li>a b{margin:0}
@media(min-width:768px){
      }
@media(min-width:768px){
      }
@media(min-width:768px){
      }
/* The pack rows match the picker in the lobby: the pack's own card tile, the
   name with its card count beside it, the blurb, and the price on the right.
   They used to carry a coloured stripe down the left edge as well, which
   meant every row had two things saying "this is the Girls Night colour". The
   tile says it better, so the stripe is gone. */
.packlist .packrow{display:flex;align-items:center;gap:11px;width:100%;
  text-align:left;text-decoration:none;color:inherit;
  background:none;border:0;padding:0;font:inherit;cursor:pointer}
.packlist .packrow .dr-tile{flex:none;width:30px;height:40px;display:block}
.packlist .packrow .dr-main{flex:1;min-width:0;display:block}
.packlist .packrow .dr-side{flex:none;margin-left:auto}
/* the bundle closes the list, so it sheds the row chrome and brings its own */
.packlist li.bundle-li{background:none;border:0;padding:0}
.packlist li.bundle-li:hover{border-color:transparent}
.packlist li.bundle-li .bundlerow{width:100%;margin-top:0}
/* Nothing about a row said it did anything, so the list read as a price
   sheet. Muted so it points without competing with the price beside it. */
.pk-chev{flex:none;width:15px;height:15px;display:block;margin-left:3px;color:var(--muted)}
.packrow:hover .pk-chev{color:var(--accent)}
/* Below 400px the chevron's 18px comes straight out of the name column and
   pushes "Family Game Night" into an ellipsis. Squeezing the padding, the
   gaps and the type to win those pixels back made every row worse to save a
   hint, so on small phones the chevron simply goes and the line above the
   list carries the message on its own. */
/* The chevron is a touch hint. Below 400px it costs enough width to truncate
   "Family Game Night", and on a desktop the row already answers with a hover
   state, so it earns its place only on the widths in between. */
@media(max-width:399px){ .pk-chev{display:none} }
@media(min-width:768px){ .pk-chev{display:none} }
/* one answer shown as the card a player has chosen */
.deckfan .dc.picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);position:relative}
.deckfan .dc.picked::after{content:"Picked";position:absolute;right:10px;bottom:8px;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:800}
/* name field validation on the pack pages, matching the home page */
.startbox .err{color:var(--accent);font-size:13.5px;font-weight:700;margin:8px 0 0}
.startbox .input.err,.startbox input.err{border-color:var(--accent)}
/* accent words anywhere, including inside body copy. Declared after the
   heading rules so it cannot be overridden by them, and after .lead so a
   highlight inside the intro paragraph still takes the accent colour. */
.hit{color:var(--accent)}
/* Two card outlines behind the hero, both in one faint warm tone. A single
   colour reads as background texture; two competing colours read as a graphic
   and pull attention off the headline. The fill stays opaque so the card in
   front still hides the one behind, which is what gives the layering. */
.ghosts{position:absolute;top:0;left:0;right:0;height:830px;z-index:-1;
  pointer-events:none;overflow:hidden}
.ghosts i{position:absolute;display:block;border-radius:26px;
  background:var(--bg);border:2px solid #EBD6C4}
.ghosts .g1{width:230px;height:300px;right:-42px;top:286px;transform:rotate(5deg)}
.ghosts .g2{width:230px;height:300px;right:-76px;top:248px;transform:rotate(12deg)}
@media(min-width:768px){
  .ghosts{height:900px}
  .ghosts .g1{width:300px;height:390px;right:40px;top:250px}
  .ghosts .g2{width:300px;height:390px;right:-10px;top:196px}
}
/* the fill in the blank rule. currentColor keeps it correct on the dark prompt
   card and on light cards without extra rules. It is inline-block so it cannot
   break across lines, which is why it carries its own margins. */
.blank{display:inline-block;width:3.4em;height:0;vertical-align:baseline;
  border-bottom:0.09em solid currentColor;margin:0 .12em 0 .06em;
  position:relative;top:-0.06em}
/* social links. Colours are set explicitly rather than inherited, so the
   icons cannot vanish if a later rule recolours the link. */
.social{display:flex;justify-content:center;gap:12px;margin:18px 0 4px}
.social a,.social a:link,.social a:visited,.social a:hover{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:#C42348;color:#fff!important;text-decoration:none!important;
  transition:transform .12s ease, filter .12s ease}
.social a:hover{filter:brightness(1.08)}
.social a:active{transform:scale(.94)}
.social svg{display:block;flex:none}
.social-lg{justify-content:flex-start;gap:10px;margin:14px 0 0;flex-wrap:wrap}
.social-lg a,.social-lg a:link,.social-lg a:visited,.social-lg a:hover{
  width:auto;height:auto;border-radius:14px;padding:13px 20px;gap:10px;
  font-family:"Display","Avenir Next",system-ui,sans-serif;font-size:15px;
  color:#fff!important}
.social-lg span{line-height:1;color:#fff}
/* article callout, a short takeaway pulled out of the flow */
.callout{background:var(--surface);border-left:5px solid var(--accent);
  border-radius:0 14px 14px 0;padding:16px 18px;margin:18px 0}
.callout p{margin:0;font-size:16px;line-height:1.55}
.callout b{color:var(--text)}

@media(min-width:620px){}

/* end of article call to action */
.endcta{background:var(--surface);border-radius:18px;padding:22px 20px;margin:26px 0 0;text-align:center}
.endcta h3{margin:0 0 6px;font-size:21px}
.endcta p{margin:0 0 14px;color:var(--muted);font-size:15.5px}
.endcta .btn{margin:0 6px 8px;display:inline-block;width:auto}
/* when to play, as icon tiles. Two up on a phone, three from 620px. */
.whengrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
.whentile{background:var(--surface);border-radius:16px;padding:16px 15px}
.whenicon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);margin-bottom:11px}
.whenicon svg{display:block}
.whentile b{display:block;font-family:"Display","Avenir Next",system-ui,sans-serif;
  font-size:16px;line-height:1.25;color:var(--text);margin-bottom:6px}
.whentile span:not(.whenicon){display:block;font-size:13.5px;line-height:1.45;color:var(--muted)}
@media(min-width:620px){.whengrid{grid-template-columns:repeat(3,1fr)}}
/* photographs in a section, e.g. the phone in hand shot */
.shot{display:block;width:100%;height:auto;border-radius:16px;margin:16px 0 4px}
/* drawbacks in an article. A left rule reads better on a phone than a column
   of cross icons, and it keeps the line length full width. */
.drawback{position:relative;padding-left:16px;margin:0 0 11px;
  font-size:16px;line-height:1.55;color:var(--muted)}
.drawback::before{content:"";position:absolute;left:0;top:7px;bottom:7px;
  width:3px;border-radius:2px;background:var(--line)}
.drawback b{color:var(--text)}

/* Two faint card outlines behind the pack hero, the same device as the home
   page. The tint is the pack accent at 20 percent over its background, set as
   --ghost in each theme block, so every pack gets its own without new artwork.
   The fill stays opaque so the front card genuinely hides the back one. */
.packhero{position:relative}
.packhero .ghosts{position:absolute;top:0;left:0;right:0;height:560px;z-index:-1;
  pointer-events:none;overflow:hidden}
.packhero .ghosts i{position:absolute;display:block;border-radius:22px;
  background:var(--bg);border:2px solid var(--ghost,#EBD6C4)}
.packhero .ghosts .g1{width:190px;height:250px;right:-38px;top:210px;transform:rotate(5deg)}
.packhero .ghosts .g2{width:190px;height:250px;right:-68px;top:178px;transform:rotate(12deg)}
@media(min-width:760px){
  .packhero .ghosts{height:620px}
  .packhero .ghosts .g1{width:250px;height:325px;right:30px;top:190px}
  .packhero .ghosts .g2{width:250px;height:325px;right:-14px;top:146px}
}

/* ── deck picker ───────────────────────────────────────────────────────
   Replaces the old <select>. A row carries a blurb and a card count, which
   an <option> cannot, and the whole row is the hit target. */
.decklist{display:flex;flex-direction:column;gap:8px}
.deckrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);color:var(--text);border:2px solid transparent;border-radius:14px;
  padding:13px 14px;font:inherit;cursor:pointer;
  box-shadow:0 1px 2px rgba(31,37,68,.05),0 3px 9px rgba(31,37,68,.06)}
.deckrow.on{border-color:var(--accent);box-shadow:0 3px 14px rgba(196,35,72,.2)}
.dr-box{flex:none;width:21px;height:21px;border-radius:6px;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  color:#fff;line-height:1}
.deckrow.on .dr-box{background:var(--accent);border-color:var(--accent)}
.dr-main{flex:1;min-width:0;display:block}
.dr-name{display:block;font-size:15.5px;font-weight:800;line-height:1.2;color:var(--text);
  white-space:nowrap}
.dr-blurb{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dr-tag{display:inline-block;font-size:14px;font-weight:800;letter-spacing:0;
  padding:4px 0;white-space:nowrap}
.dr-count{display:block;font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap}
/* The bundle row. Row-shaped so it belongs to the list, dashed so nobody
   mistakes it for a pack, and the struck-out total is the whole argument. */
.bundlerow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--card);color:var(--text);border:2px dashed var(--accent);
  border-radius:14px;padding:11px 13px;margin-top:8px;font:inherit;cursor:pointer}
.bn-fan{flex:none;width:44px;height:40px;display:block}
.bn-fan svg{width:44px;height:40px;display:block}
.bn-main{flex:1;min-width:0}
.bn-name{display:block;font-size:15px;font-weight:800;line-height:1.2}
.bn-blurb{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.bn-price{flex:none;text-align:right}
.bn-price s{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
.bn-price b{display:block;font-size:16px;font-weight:800;color:var(--accent)}
.deckmore{display:block;width:auto;margin:14px auto 0;background:none;border:0;
  padding:6px;font:inherit;font-size:16px;font-weight:800;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* The pack list is the only multi-part choice in the lobby, so it is boxed:
   both groups and the more link read as one object rather than as loose rows. */
.deckpanel{background:var(--surface);border-radius:18px;padding:18px 12px 16px}
.deckpanel .h3{margin:0 0 14px;font-size:14px;letter-spacing:.12em}
/* The pack's own colour, on a card the size and shape of a real one. */
.dr-tile{flex:none;width:30px;height:40px;display:block}
/* The card count rides the name line, which leaves the row's full width
   for the blurb instead of cutting it off on a phone. */
.dr-nm{display:flex;align-items:baseline;gap:6px;min-width:0}
/* the name yields before the count does, so the price can never be sat on */
.dr-nm .dr-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dr-nm .dr-count{flex:none}

/* ── pack rows on a phone ──────────────────────────────────────────────
   At 360px the row left only 151px for the name and the blurb, so long
   names lost their last letters and almost every blurb ended in an
   ellipsis. Trimming the row's own padding and gaps hands about 25px
   back, and the blurb gets a second line rather than being cut off. */
@media(max-width:439px){
  .deckpanel{padding:16px 8px 14px}
  .deckrow{gap:9px;padding:12px 11px}
  .packlist li{padding:12px 11px}
  .packlist .packrow{gap:9px}
  .dr-nm{gap:5px}
  .dr-name{font-size:15px}
  .dr-blurb{white-space:normal;text-overflow:clip;display:-webkit-box;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
/* Old 320px handsets: the longest names still ran out of room, so the
   name line drops a size and the row is squeezed a little further. */
@media(max-width:359px){
  .deckpanel{padding:16px 6px 14px}
  .deckrow{gap:8px;padding:12px 10px}
  .packlist li{padding:12px 8px}
  .packlist .packrow{gap:7px}
  .dr-nm{gap:3px}
  .dr-name{font-size:13.5px;letter-spacing:-.01em}
  .dr-count{font-size:9.5px}
  .dr-blurb{font-size:11px}
  .dr-tile{width:26px;height:35px}
}

/* Section headings inside the deck picker. The second group is where prices
   will appear, so it is already set apart from the decks the host has. */
.deckhead{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin:22px 0 12px}

/* ── unlock sheet ─────────────────────────────────────────────────────── */
.sheet-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;
  background:rgba(16,19,34,.62);animation:sheetFade .2s ease}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--bg);width:100%;max-width:520px;margin:0 auto;
  border-radius:26px 26px 0 0;padding:12px 20px 26px;max-height:88vh;overflow-y:auto;
  animation:sheetUp .28s cubic-bezier(.2,.85,.28,1);
  padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px))}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:42px;height:4px;border-radius:2px;background:var(--surface-2);margin:0 auto 18px}
.sheet-title{margin:0 0 3px;font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--text)}
.sheet-sub{margin:0 0 16px;font-size:12.5px;color:var(--muted)}
/* The price on navy, so nobody has to hunt for what they are about to pay. */
.sheet-price{background:var(--prompt-bg);color:var(--on-prompt);border-radius:14px;
  padding:16px 18px;margin-bottom:17px;display:flex;align-items:center;gap:13px}
.sheet-price b{font-size:31px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.sheet-price span{font-size:11.5px;opacity:.72;line-height:1.45}
.sheet-err{background:var(--accent-soft);color:var(--accent);border-radius:11px;
  padding:11px 13px;font-size:13px;font-weight:700;margin:0 0 12px}
.sheet-link{font-size:14px;text-decoration:underline;text-underline-offset:3px}
.sheet-code{display:flex;flex-direction:column;gap:9px;margin:4px 0 8px}
/* A code is read off a receipt and typed by hand, so it is set monospace, big
   and spaced out. */
.sheet-code .input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;text-transform:uppercase;font-size:16px;text-align:center}
/* Two colours, not three. A deck you can play is teal and quiet, whether it
   was always free or you bought it. A price is the only thing in the list
   asking you to act, so crimson belongs to it alone. */
.dr-tag.dr-have{color:var(--owned)}
.dr-tag.dr-price{color:var(--accent)}
/* "Free" rides the title line of the Base Game row on the home page, pushed to
   the right edge so it lands where a price would. Teal by the rule above: a deck
   you can play is quiet, and crimson is reserved for the ones asking to be paid
   for. It is the only label in that list, so the rows that cost money say
   nothing rather than all shouting a number at a reader who has not asked yet. */
.dr-tag.dr-free{color:var(--owned);margin-left:auto;flex:none;font-size:13px;
  letter-spacing:.02em;padding:0}

@media(prefers-reduced-motion:reduce){ .sheet,.sheet-scrim{animation:none} }

/* ── pack page buy block ──────────────────────────────────────────────────
   A pack page used to open with a name field and a Host a room button, which
   made sense while every pack was free. Now the pack costs money, so the page
   leads with the purchase and keeps one quiet route to the free base game. */
.buyfirst{margin:26px 0 30px}
.buyfirst .btn{width:100%}
.freelink{display:block;text-align:center;margin:14px 0 0;font-size:16px;
  font-weight:800;color:var(--accent);text-decoration:underline;
  text-underline-offset:3px}
.heroshot{margin:0 0 18px}
.heroshot img{width:100%;height:auto;display:block;border-radius:16px}

/* ── pack page purchase sheet ─────────────────────────────────────────────
   Buying used to hand the visitor to the lobby just to read a price, which
   threw away the page they were reading while they were still deciding. The
   sheet opens over the page instead; only Purchase actually leaves. */
.buysheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;
  justify-content:center}
.buysheet[hidden]{display:none}
.buysheet-veil{position:absolute;inset:0;background:rgba(31,37,68,.55)}
.buysheet-card{position:relative;width:100%;max-width:480px;background:var(--card);
  color:var(--on-card);border-radius:20px 20px 0 0;padding:22px 18px 18px;
  box-shadow:0 -10px 40px rgba(31,37,68,.28)}
@media(min-width:560px){
  .buysheet{align-items:center}
  .buysheet-card{border-radius:20px;margin:0 18px}
}
.buysheet-card h3{margin:0 0 4px;font-size:21px;font-weight:800;padding-right:34px}
/* The veil and Maybe later both close the sheet, but neither reads as a close
   control at a glance, and on a phone the veil is a thin strip above it. */
.bs-x{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:7px;
  display:flex;align-items:center;justify-content:center;background:none;border:0;
  border-radius:50%;color:var(--muted);cursor:pointer}
.bs-x:hover{background:var(--surface);color:var(--text)}
.bs-x svg{width:100%;height:100%;display:block}
.buysheet-card .btn{width:100%;margin-top:12px}
/* The price rides the pack's name rather than sitting above the button as a
   second big red thing. That frees the line under it to say what you get. */
.bs-pill{display:inline-block;margin-left:9px;background:var(--accent-soft);color:var(--accent);
  font-family:"Body","Avenir Next",system-ui,sans-serif;font-size:13.5px;font-weight:800;
  letter-spacing:0;text-transform:none;padding:4px 11px;border-radius:999px;
  vertical-align:5px;white-space:nowrap}
/* The pack's own line, so the sheet opens by saying what this one is about
   rather than going straight to an invoice. Regular weight: it is a sentence
   to read, not a heading. */
.bs-blurb{margin:3px 0 8px;font-size:15px;font-weight:400;color:var(--text);line-height:1.35}
.bs-sub{margin:2px 0 16px;font-size:12.5px;color:var(--muted)}
/* The question is a label and the answer is a control, so only the words you
   tap carry colour. One underlined red line reads as one thing to click. */
/* Two facts, and the first one is the whole reason this is here: somebody
   doing "five dollars each for six of us" closes the tab. A guest owns
   nothing and needs nothing, so one purchase covers the room. */
.bs-ticks{list-style:none;padding:0;margin:2px 0 24px;display:flex;flex-direction:column;gap:8px}
.bs-ticks li{display:flex;gap:9px;align-items:center;font-size:14.5px;color:var(--muted);
  line-height:1.35}
.bs-ticks li b{color:var(--text);font-weight:800}
.bs-ticks svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--owned);
  stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.bs-ask{margin:15px 0 2px;text-align:center;font-size:13.5px;font-weight:600;color:var(--muted)}
.bs-err{margin:10px 0 0;font-size:14px;font-weight:700;color:var(--accent)}
.bs-err[hidden]{display:none}
.buysheet-card .btn-quiet{display:block;width:100%;margin-top:0;text-align:center;
  font-size:15px;font-weight:800}
/* display:block beats the hidden attribute, so a free pack was still being
   offered a code box. */
.buysheet-card .btn-quiet[hidden]{display:none}
.bs-code{margin-top:12px}
.bs-code[hidden]{display:none}
.bs-code .input{width:100%;text-transform:uppercase;letter-spacing:.06em}

/* five underscores read as a typo once a card is out of the game */
/* The same preview renders inside the lobby's .sheet as well as the static
   pages' .buysheet-card, so these have to sit on both. */

/* ── public sample-card pages ─────────────────────────────────────────────
   /sample-cards/<pack>, generated by scripts/build-samples.js. These exist to
   be read cold by somebody who arrived from a search result and has never seen
   the game, so the cards are the page: no screenshots, no marketing furniture
   above them, and the buy button waits until the bottom. */
.scrumb{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.scrumb a{color:var(--muted);text-decoration:none}
.scrumb a:hover{color:var(--accent)}
.scrumb span{color:var(--accent)}

.scards{display:flex;gap:22px;margin:4px 0 8px}
.scol{flex:1;min-width:0}
.scol h2{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.scol h2 span{color:var(--accent)}

/* Prompts carry the deck's prompt colour and answers the card colour, so the
   two sides read as the two halves of a round rather than as one long list. */
.sp,.sa{border-radius:14px;padding:13px 15px;margin-bottom:9px;
  font-size:15.5px;font-weight:700;line-height:1.42}
.sp{background:var(--prompt-bg);color:var(--on-prompt)}
.sa{background:var(--card);color:var(--on-card);border:1px solid var(--card-edge)}
.sp .blank{background:currentColor;opacity:.55}

.sclose{background:var(--surface);border-radius:18px;padding:22px 22px 24px;margin-top:26px}
.sclose h2{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.sclose p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.sbtns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.sbtns .btn{flex:1 1 220px;margin:0}
/* Outlined twin of .btn-primary for the sample pages: same box, so the two
   buttons match height, but drawn in the pack's own accent on white. */
.sbtn-ghost{background:#fff;color:var(--accent);border:2px solid var(--accent)}
.sbtn-ghost:hover{background:var(--accent);color:var(--on-accent)}

.slist{list-style:none;padding:0;margin:0}
.slist a{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--on-card);
  background:var(--card);border:1px solid var(--card-edge);border-radius:14px;
  padding:14px 16px;margin-bottom:10px}
.slist .dr-tile{flex:none}
.slist b{font-size:17px;font-weight:800;flex:none}
.slist span{font-size:14px;color:var(--muted);font-weight:600;flex:1;min-width:0}
.slist i{font-style:normal;font-weight:800;color:var(--accent);flex:none}
.slist a:hover{border-color:var(--accent)}

/* One column under 680px: two columns of cards at phone width leaves four
   words a line and the prompts wrap into towers. */
@media (max-width:680px){
  .scards{flex-direction:column;gap:6px}
  .slist a{flex-wrap:wrap}
  .slist span{flex-basis:100%;order:3}
}

.samplelink{margin:14px 0 0}
/* On the pack list this moved from above the packs to below them: it asks a
   reader to go and read cards, which is a better offer once they have seen
   what the packs are than before. Standing under the bundle row it needs more
   air than it did sitting under a paragraph. */
.packlist + .samplelink{margin-top:24px}
.samplelink a{font-size:15.5px;font-weight:800;color:var(--accent);text-decoration:underline;
  text-underline-offset:3px}


/* The "how this page was built" note. It belongs on the page, because a sample
   page that quietly picks its best cards is a sales page pretending not to be,
   but it belongs under the cards rather than in front of them. */
.snote{font-size:13.5px;line-height:1.6;color:var(--muted);margin:14px 0 0}


/* The code line under the sample link. It speaks only to somebody who has
   already paid, so it is the quietest thing in the sheet, but it cannot go:
   there are no accounts, the code is the only proof of ownership, and this
   sheet is the only place on the site where one can be typed. */
.bs-tiny{margin:13px 0 0;text-align:center;font-size:12.5px;font-weight:600;
  color:var(--muted);line-height:1.5}
/* .btn-quiet carries 26px of its own bottom margin for the case where it ends
   the sheet. Following it with the code line put 39px of nothing between two
   lines that belong together. */
.btn-quiet + .bs-tiny{margin-top:-13px}
.bs-tinylink{background:none;border:0;padding:0;font:inherit;font-weight:700;
  color:var(--muted);text-decoration:none;cursor:pointer}
/* Underlined on hover only. On its own line, centred, in a different colour and
   weight from everything near it, there is nowhere else down there for a cursor
   to go, so it does not need the underline at rest. */
.bs-tinylink:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Underline is the strongest clickability signal in the sheet, so it belongs on
   the thing most people should click. It used to sit on the code line, which
   speaks to the few who have already paid, while the link aimed at everybody
   else read as a caption. Permanent rather than hover-only: most of this
   traffic is on a phone, where there is no hover at all. */
.bs-sample,.buysheet-card .bs-sample,.sheet .bs-sample{
  text-decoration:underline;text-underline-offset:3px}
/* The question and its answer are one thought, so they sit as one block.
   .btn-quiet carries 10px of padding as its tap target, which is kept: the
   gap closes by pulling the link up rather than by shrinking what a thumb
   has to hit. */
.bs-ask + .bs-sample{margin-top:-10px}

/* ---------------------------------------------------------------- bands ----
   Pages used to be one cream column with hairline rules between sections.
   They now alternate background colour instead, so the page container runs
   edge to edge and the old max-width and gutter live on .bandwrap. The text
   column is unchanged; only the paint behind it is new.

   The inner container is .bandwrap, not .wrap, on purpose: .wrap already
   exists site-wide with its own top and bottom padding, and a band needs a
   gutter without it.

   Inside a dark band the component fills have to be restated, because almost
   every box on this site is --surface, which is invisible on --surface and
   nearly invisible on --accent. The overrides below are all of that and
   nothing else: no spacing, no type, no layout.

   This block is duplicated in styles.css and in index.html's inline <style>.
   index.html does not link the stylesheet, so a rule that lives in only one of
   them reaches only half the site. tests/css.test.js guards that. */
.bandwrap{max-width:480px;margin:0 auto;padding:0 18px}
@media(min-width:768px){.bandwrap{max-width:720px}}
.band{padding:14px 0}
.band .sect{border-top:none;padding-top:26px}
.band-cream{background:var(--bg)}
.band-surface{background:var(--surface)}
.band-soft{background:var(--accent-soft)}
.band-red{background:var(--accent)}
.band-deep{background:var(--prompt-bg);padding-bottom:30px}

/* crimson bands: stats, the comparison table, the quotes */
.band-red .sect h2,.band-red .sect h3,.band-red .sect h4,.band-red .page-title,
.band-red .sect p,.band-red .sect p.cap,.band-red .sect .hit,
.band-red .sect h4 .hit{color:var(--on-accent)}
.band-red .sect a:not(.btn){color:var(--on-accent)}
.band-red .stats{margin:0;background:transparent;border:0;border-radius:0;gap:16px 0}
.band-red .stats div{background:transparent;padding:4px 12px}
.band-red .stats div:nth-child(even){border-left:1px solid rgba(255,255,255,.34)}
.band-red .stats span{color:rgba(255,255,255,.84)}
.band-red .stats b,.band-red .stats b.hit{color:var(--on-accent)}
@media(min-width:640px){
  .band-red .stats{gap:0}
  .band-red .stats div{border-left:1px solid rgba(255,255,255,.34)}
  .band-red .stats div:first-child{border-left:0}
}
/* the table is a white card on the crimson, so its own text goes back to navy */
.band-red .vs{background:var(--card);border-color:var(--card)}
.band-red .vs th,.band-red .vs td{color:var(--text)}
.band-red .vs thead th{color:var(--text);background:#FAF8F4}
.band-red .vs thead th.us{color:var(--accent)}
.band-red .vs td:first-child{color:var(--text)}
.band-red .vs td.hit,.band-red .vs th.hit{color:var(--accent)}
.band-red .quotes figure{background:var(--card);box-shadow:0 8px 22px rgba(120,10,34,.18)}
.band-red .quotes blockquote{color:var(--text)}
.band-red .quotes figcaption{color:var(--accent)}
/* three columns do not survive a phone, so the table becomes five blocks and
   the row label turns into the block's header. The column each cell belongs to
   is printed in front of it, since the headings are gone. */
@media(max-width:560px){
  .band-red .vs,.band-red .vs tbody,.band-red .vs tr,.band-red .vs td{display:block;width:100%}
  .band-red .vs{background:none;border:0;border-radius:0}
  .band-red .vs thead{display:none}
  .band-red .vs tbody tr{background:var(--card);border:1px solid var(--card);
    border-radius:14px;margin-bottom:9px;overflow:hidden}
  .band-red .vs td{border-bottom:none;padding:9px 14px}
  .band-red .vs td:first-child{background:#FAF8F4;border-bottom:1px solid var(--line);
    font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px}
  .band-red .vs td.us::before{content:"Cards Out Loud · ";color:var(--muted);font-weight:400}
  .band-red .vs td:last-child::before{content:"Physical deck · ";color:var(--muted);font-weight:400}
}

/* Almost every box on this site is filled with --surface. On a surface band it
   disappears, and on the pink and accent bands it goes muddy, so on those three
   the fill lifts to --card. This list is every --surface component in the
   stylesheet; a new one has to be added here or it will vanish on a band. */
:is(.band-surface,.band-soft,.band-red) :is(.steps li,.screen,.packlist li.live,
  .ratings div,.faq details,.related a,.quotes figure,.lobbyshot,.callout,.endcta,
  .whentile,.sclose,.howto .ic){background:var(--card)}
:is(.band-surface,.band-soft,.band-red) .related a{border-color:var(--card)}
:is(.band-surface,.band-soft,.band-red) .ratings div.adult{background:var(--pack-live)}
/* these sit inside .screen, which is now white, so they need the step back.
   The judging chip is excluded: it is crimson on purpose, and this rule used to
   tie with .screen .chips span.j on specificity and win on order, which left it
   white-on-cream and unreadable. */
:is(.band-surface,.band-soft,.band-red)
  :is(.screen .room,.screen .chips span:not(.j)){background:var(--bg)}

/* the soft pink band holds the real cards, which are already white */
.band-soft .deckfan .dc{border-color:var(--card);box-shadow:0 7px 18px rgba(150,40,75,.13)}

/* navy closing band, which also swallows the footer */
.band-deep .closing{border-top:none;margin-top:0}
.band-deep .closing h2,.band-deep .closing h3{color:var(--on-prompt)}
.band-deep .closing p{color:rgba(240,237,230,.78)}
.band-deep .closing .kicker{color:var(--prompt-label)}
.band-deep .sitefoot{border-top:1px solid rgba(240,237,230,.16)}
.band-deep .sitefoot a{color:var(--on-prompt)}
.band-deep .sitefoot a:hover{color:var(--prompt-label)}
.band-deep .foot{color:rgba(240,237,230,.6)}

/* pages other than the home page keep their <div class="wrap"> container as a
   plain full-width stack, and carry their own first-band top padding, which
   .wrap used to supply. */
.pagebands{position:relative}
.pagebands>.band:first-child{padding-top:20px}
/* a hero band keeps .packhero for its ghost cards, but the band is now full
   bleed, so the cards have to be pinned back to the text column. */
.band.packhero .ghosts{left:50%;right:auto;transform:translateX(-50%);
  width:480px;max-width:100%}
@media(min-width:768px){.band.packhero .ghosts{width:720px}}

/* ------------------------------------------------------- the top bar ----
   The brand bar used to sit inside the page column on the cream background,
   which gave the site no top edge at all. It is now a full-width bar in the
   page's accent colour, lifted out of the container and placed directly in
   the body.

   It paints --accent rather than a fixed crimson on purpose. A themed pack
   page overrides --accent, so the bar becomes that pack's colour. Pinning it
   to the brand crimson would put two different reds against each other on the
   Christmas page and two different pinks on Girls Night, which is worse than
   either colour alone.

   It scrolls away with the page rather than sticking. A sticky bar would hold
   50px of every phone screen for the whole visit, which on the home page comes
   straight out of the start box. */
.topbar{background:var(--accent);position:relative;z-index:40}
.topbar .bandwrap{max-width:480px}
@media(min-width:768px){.topbar .bandwrap{max-width:960px}}
.topbar .brandbar{margin:0;padding:14px 0}
.topbar .brand,.topbar a.brand,.topbar a.brand:hover,.topbar a.brand:visited,
.topbar .brandbar a{color:var(--on-accent)!important}
.topbar .brandmark{color:var(--on-accent)}
.topbar .menu-btn{color:var(--on-accent)}
.topbar .menu-btn:focus-visible{outline-color:var(--on-accent)}
/* the links only appear where there is room for them; below 768px the
   hamburger is still the way in. */
.desknav{margin-left:auto;display:none;align-items:center;gap:22px}
.desknav a{color:var(--on-accent)!important;font-size:12.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none!important;white-space:nowrap}
.desknav a:hover{opacity:.78}
/* the home page renders Play now as a <button>, every other page as an <a>,
   so the type has to be restated here rather than inherited from .desknav a */
.desknav .navplay,.desknav a.navplay{background:var(--on-accent);
  color:var(--accent)!important;border:none;border-radius:999px;padding:9px 18px;
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;width:auto;cursor:pointer;margin:0}
.desknav .navplay:hover{background:var(--on-accent);opacity:.9;color:var(--accent)!important}
@media(min-width:768px){
  .desknav{display:flex}
  .topbar .navbtns{display:none}
}
/* the home page is the game, so the bar goes away once a room is open */
body.in-game .topbar{display:none}
/* room between the bar and whatever the page opens with */
.topbar + .pagebands > .band:first-child{padding-top:34px}
.topbar + .hero-static,.topbar ~ .hero-static{padding-top:30px}