/* Offset's public game demos (offsetyour.study/try/...): the game and little else. The games themselves are styled in remix.css. */
body.try { margin: 0; background: var(--rx-paper); color: var(--rx-text); font-family: var(--rx-body); -webkit-text-size-adjust: 100%; }
body.try main { max-width: 520px; margin: 0 auto; padding: calc(22px + env(safe-area-inset-top)) 20px 40px; }
.try-top { margin-bottom: 34px; }
.try-brand { display: inline-block; color: var(--rx-text); line-height: 0; }
.try-brand svg { height: 24px; width: auto; display: block; }
.try-brand .wm-shadow { fill: var(--rx-violet); }
.try-from { margin: 0 0 6px; font: 700 .95rem var(--rx-body); color: var(--rx-violet); }
.try-h1 { font: 900 2.3rem/1 var(--rx-display); letter-spacing: -0.03em; margin: 0 0 26px; }
/* The game, calmer: no clock, and the hand flush with the page edges. */
body.try .lg-hud > .lg-chip:last-child { display: none; }
body.try .lg { gap: 14px; }
body.try .lg-hand { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
body.try .lg-howto { text-align: center; }
/* After the game. */
.try-after { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; text-align: center; }
.try-pitch { margin: 8px 0 4px !important; color: var(--rx-text) !important; font-size: 1rem !important; line-height: 1.5; }
.try-others { margin: 2px 0 0 !important; font-size: .92rem !important; }
.try-others a { color: var(--rx-violet); font-weight: 700; }
.try-small { margin: 0 !important; font-size: .78rem !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .try-brand .wm-shadow { fill: var(--rx-lime); } }
/* Sizes include padding (the app gets this from its other stylesheets). */
body.try *, body.try *::before, body.try *::after { box-sizing: border-box; }
body.try a.rx-btn { text-decoration: none; }
.try-others { display: flex; flex-direction: column; gap: 6px; align-items: center; }