/* Unmodified DM Sans v17 and Manrope v20 fonts from Google Fonts. See OFL files. */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 450;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 550;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 550;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6z9mXgjU0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dmsans-v17-rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-v20-xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{color-scheme:dark;--bg:#101114;--surface:#181a1e;--surface-raised:#202329;--line:#2a2d33;--text:#f2f3f5;--muted:#93979f;--accent:#bea8fa;--accent-ink:#221536;--accent-soft:#252133;--table:#20212c;--table-edge:#333442;--hero:#1d1d27;--shadow:0 24px 70px #0004;--card:#f7f8fc;--green:#86d9b1}
:root[data-theme=daylight]{color-scheme:light;--bg:#f5f6fa;--surface:#fff;--surface-raised:#ecedf4;--line:#dddfea;--text:#202330;--muted:#696d7d;--accent:#7652d6;--accent-ink:#fff;--accent-soft:#eee8fc;--table:#dde4ea;--table-edge:#c4cbd5;--hero:#e8e4f3;--shadow:0 24px 70px #2a28551a;--green:#257951}
:root[data-theme=arcade]{color-scheme:dark;--bg:#111020;--surface:#1b1730;--surface-raised:#28203d;--line:#3b2c54;--text:#fcf5ff;--muted:#afa0bf;--accent:#dcfa79;--accent-ink:#21290e;--accent-soft:#2e3524;--table:#30204d;--table-edge:#543370;--hero:#2a2045;--green:#dcfa79}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.48}button,input,select,textarea{outline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{border:0;background:none}svg{flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,system-ui,sans-serif}h1{font-weight:750;letter-spacing:-.055em;line-height:1.12}h2{font-size:30px;letter-spacing:-.04em;font-weight:750}h3{font-size:19px;letter-spacing:-.025em;font-weight:700}p{color:var(--muted)}small{font-size:13px}.muted{color:var(--muted)!important}.grow{flex:1;min-width:0}.red{color:#d44850}.black{color:#17212b}.full-width{width:100%}.app-shell{max-width:1600px;margin:auto}.site-header{height:98px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line);gap:30px}.wordmark{display:flex;align-items:center;gap:9px;font-family:Manrope,sans-serif;font-size:29px;font-weight:800;letter-spacing:-1.4px}.wordmark-dot{color:var(--accent);margin-left:-8px}.brand-icon{display:block;width:37px;height:37px;border-radius:11px;overflow:hidden;background:var(--accent);color:var(--accent-ink);font-size:39px;line-height:31px;position:relative;text-align:center;letter-spacing:-3px;margin-right:4px}.brand-icon>span{font-size:19px;position:absolute;top:-1px;right:3px}.brand-icon img{width:100%;height:100%;object-fit:cover}.site-header nav{display:flex;align-self:stretch;gap:31px}.nav-link{position:relative;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:550;color:var(--muted)}.nav-link:hover,.nav-link.active{color:var(--text)}.nav-link.active:after{content:'';position:absolute;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent);left:0;right:0}.nav-link.active svg{color:var(--accent)}.account-button{display:flex;align-items:center;gap:12px;padding:0;font-size:13px;white-space:nowrap}.account-avatar{width:39px;height:39px;border:1px solid var(--line);background:var(--surface-raised);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:15px;font-weight:600}.main-content{padding:0 5%;min-height:calc(100vh - 196px)}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:470px;position:relative;padding:62px 0 45px;gap:30px}.hero-copy{position:relative;z-index:1}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:1.8px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px color-mix(in srgb,var(--green),transparent 65%);flex-shrink:0}.live-dot.offline{background:#edb363;box-shadow:none}.hero h1{font-size:clamp(44px,4.7vw,68px);margin:20px 0 20px}.hero h1 em{font-style:normal;color:var(--accent)}.hero-copy>p{font-size:17px;line-height:1.65}.hero-actions{display:flex;align-items:center;gap:15px;margin-top:29px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:10px;padding:13px 20px;font-size:14px;font-weight:650;min-height:47px;white-space:nowrap;transition:transform .18s,background .18s,border-color .18s}.button:hover:not(:disabled){transform:translateY(-2px)}.button.primary{background:var(--accent);color:var(--accent-ink)}.button.primary:hover:not(:disabled){filter:brightness(1.06)}.button.secondary{background:var(--surface-raised);border:1px solid var(--line)}.text-button{padding-left:7px;padding-right:7px;background:none;color:var(--muted)}.text-button:hover{color:var(--text)}.hero-footnote{margin-top:23px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}.tiny-cards{display:flex;gap:3px;letter-spacing:2px;color:var(--text);font-size:18px}.tiny-cards span{color:var(--accent)}.hero-art{position:relative;display:grid;place-items:center;isolation:isolate}.hero-art:before{content:'';position:absolute;width:340px;height:340px;max-width:95%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent),transparent 88%),transparent 70%);z-index:-1}.court-stack{width:355px;height:315px;position:relative;max-width:100%;margin-top:15px}.stack-card{position:absolute;left:50%;top:22px;transform-origin:50% 100%;filter:drop-shadow(0 15px 12px #0003)}.stack-card .playing-card{width:151px;height:215px}.stack-left{transform:translateX(-92%) rotate(-21deg);top:13px}.stack-right{transform:translateX(0%) rotate(19deg);top:3px}.stack-front{transform:translateX(-43%) rotate(-4deg);top:69px}.sparkle{position:absolute;color:var(--accent)}.spark-one{font-size:48px;top:20px;left:2px;transform:rotate(14deg)}.spark-two{font-size:31px;bottom:22px;right:-1px}.art-caption{position:absolute;bottom:10px;right:0;left:0;display:flex;justify-content:center;align-items:center;gap:10px;font-size:10px;letter-spacing:2px;color:var(--muted)}.caption-line{width:23px;height:1px;background:var(--muted)}
.playing-card{position:relative;isolation:isolate;flex-shrink:0;width:107px;height:151px;background:var(--card);border:1px solid #fff9;border-radius:10px;box-shadow:0 3px 1px #d5d7de,0 7px 15px #0002;overflow:hidden;font-family:Georgia,serif;user-select:none}.card-corner{position:absolute;display:flex;flex-direction:column;align-items:center;top:8px;left:10px;z-index:2;line-height:1.05;font-size:17px}.card-corner b{font-size:22px;font-weight:600}.corner-bottom{top:auto;left:auto;bottom:8px;right:10px;transform:rotate(180deg)}.card-pip{position:absolute;inset:0;display:grid;place-items:center;font-size:63px}.eight-pip{font-size:82px;font-weight:500;letter-spacing:-5px;margin-left:-5px}.court-art{position:absolute;left:20%;right:20%;top:12%;bottom:12%;background-image:url('/assets/court-characters-web-v1.webp');background-size:300% 100%;background-repeat:no-repeat}.figure-11{background-position:0% center}.figure-12{background-position:50% center}.figure-13{background-position:100% center}.card-back{background:var(--accent-soft);padding:7px;border:2px solid color-mix(in srgb,var(--accent),transparent 58%);box-shadow:0 3px 0 var(--table-edge),0 7px 15px #0002;color:var(--accent)}.back-frame{border:1px solid color-mix(in srgb,var(--accent),transparent 45%);border-radius:5px;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(45deg,transparent,transparent 6px,color-mix(in srgb,var(--accent),transparent 95%) 6px,color-mix(in srgb,var(--accent),transparent 95%) 7px)}.back-mark{font-family:Manrope,sans-serif;font-weight:800;font-size:54px;line-height:1;position:relative}.back-mark>span{position:absolute;top:-4px;right:-12px;font-size:27px}.playing-card.small{width:31px;height:44px;border-radius:4px;padding:3px;box-shadow:0 2px 4px #0004}.small .back-mark{font-size:17px}.small .back-mark>span{font-size:10px;right:-5px}.small .back-frame{border:0}.library{padding-top:19px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.section-heading .eyebrow{font-size:11px;letter-spacing:1.8px;margin-bottom:7px}.search-field{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0 13px;width:285px;height:44px;color:var(--muted)}.search-field input{width:100%;min-width:0;background:none;border:0;font-size:13px;color:var(--text);outline:none}.search-field:focus-within{border-color:var(--accent)}.search-field kbd{font-size:18px;color:var(--muted)}.filters{display:flex;gap:9px;margin-bottom:23px;flex-wrap:wrap}.filter{font-size:13px;min-height:35px;padding:7px 14px;border:1px solid transparent;border-radius:7px;color:var(--muted);display:flex;align-items:center;gap:9px}.filter:hover{background:var(--surface)}.filter.active{background:var(--surface-raised);border-color:var(--line);color:var(--text)}.filter span{background:var(--line);border-radius:4px;padding:0 5px;font-size:10px}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.game-tile{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);transition:transform .25s}.game-tile:hover{transform:translateY(-3px)}.tile-visual{height:218px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#48405b,#25222f 80%)}.rummy .tile-visual{background:radial-gradient(ellipse at 70% 110%,#31594e,#1d2b2c 80%)}.tile-badge{position:absolute;left:20px;top:19px;z-index:2;border:1px solid #ffffff17;background:#12111633;border-radius:5px;padding:5px 8px;font-size:9px;letter-spacing:1.3px;font-weight:700;color:#c3ccc8;display:flex;align-items:center;gap:7px}.tile-badge.available{color:#ded6ef}.tile-badge .live-dot{width:4px;height:4px}.tile-cards{position:absolute;bottom:-16px;left:50%;display:flex;z-index:1;transform:translateX(-50%)}.tile-cards>div:first-child{transform:rotate(-15deg) translateX(17px)}.tile-cards>div:last-child{transform:rotate(11deg) translate(-9px,-14px)}.tile-cards .playing-card{width:113px;height:160px}.tile-decoration{font-family:Manrope,sans-serif;font-weight:800;position:absolute;right:18px;bottom:-30px;font-size:170px;line-height:1.3;letter-spacing:-13px;color:#ffffff0a;pointer-events:none;z-index:0;transform:rotate(-6deg)}.rummy-cards{position:absolute;bottom:-34px;left:50%;display:flex;gap:4px;transform:translateX(-50%) rotate(-8deg)}.rummy-cards .playing-card{width:99px;height:148px}.rummy-cards .playing-card:first-child{transform:translateY(18px) rotate(-7deg)}.rummy-cards .playing-card:last-child{transform:translateY(10px) rotate(7deg)}.tile-info{padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:15px}.tile-info h3{font-size:22px}.tile-info p{font-size:14px;margin-top:5px}.game-meta{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin-top:15px}.round-button{width:43px;height:43px;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;background:var(--accent);color:var(--accent-ink);flex-shrink:0;transition:transform .2s}.round-button:hover{transform:translateX(2px)}.round-button.subtle{background:var(--surface-raised);border:1px solid var(--line);color:var(--muted)}.site-footer{margin:55px 5% 0;padding:25px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:11px;gap:20px}.footer-suits{margin-left:13px;letter-spacing:4px;color:var(--accent)}.page-heading{padding:58px 0 36px}.page-heading h1{font-size:44px;margin:12px 0 15px}.page-heading p{font-size:16px}.heading-with-action{display:flex;align-items:center;justify-content:space-between;gap:20px}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.theme-choice,.deck-choice{border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:left;background:var(--surface);padding:0;opacity:1!important}.theme-choice.selected,.deck-choice.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.theme-preview{height:185px;margin:18px;border-radius:8px;background:#111216;position:relative;border:1px solid #303138}.theme-daylight .theme-preview{background:#f4f5fa;border-color:#e2e3ee}.theme-arcade .theme-preview{background:#151124;border-color:#3b2c54}.mini-nav{position:absolute;left:10px;right:10px;top:15px;height:4px;background:#44434c}.mini-table{position:absolute;inset:40px 30px 32px;border-radius:45%;background:#262332;display:flex;justify-content:center;align-items:center;gap:5px;border:2px solid #373240}.mini-table>span{display:grid;place-items:center;background:#f7f8fc;border-radius:4px;font-family:Georgia,serif;font-size:26px;width:35px;height:48px;color:#242330;transform:rotate(-10deg)}.mini-table>span:last-child{color:#d44850;transform:rotate(8deg)}.mini-button{height:10px;width:40px;background:#bea8fa;border-radius:3px;position:absolute;bottom:10px;left:calc(50% - 20px)}.theme-daylight .mini-table{background:#dfe5ec;border-color:#ccd3df}.theme-arcade .mini-table{background:#30204d;border-color:#4f356e}.theme-arcade .mini-button{background:#dcfa79}.theme-label{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;gap:15px}.theme-label strong{display:block;font-size:17px}.theme-label small{display:block;color:var(--muted);margin-top:4px;font-size:12px}.choice-dot{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;flex-shrink:0}.selected .choice-dot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.deck-heading{margin-top:45px}.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.deck-preview{height:255px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--surface-raised)}.deck-preview .playing-card{width:110px;height:163px}.deck-preview .playing-card:first-child{transform:rotate(-8deg) translateY(7px)}.deck-preview .playing-card:last-child{transform:rotate(8deg) translateY(7px)}.rules-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 32px;margin-bottom:25px;max-width:950px}.rules-panel h2{font-size:25px;margin:12px 0}.rules-panel p{font-size:15px;line-height:1.8;margin:12px 0}.rules-panel ol{padding-left:22px;line-height:1.8;color:var(--muted);font-size:15px}.rules-panel li{padding-left:8px;margin:13px 0}.rules-panel strong{color:var(--text)}.tag{font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:700}.rule-text{white-space:pre-wrap}.empty-state{padding:65px 20px;text-align:center;border:1px dashed var(--line);border-radius:14px;background:var(--surface)}.empty-state h3{margin:12px 0}.empty-state p{font-size:14px;max-width:390px;margin:0 auto 25px}.empty-icon{color:var(--accent)}.saved-room{display:flex;align-items:center;gap:18px;padding:24px 22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:13px}.saved-room:hover{border-color:var(--accent)}.saved-room strong{font-size:16px;display:block}.saved-room small{color:var(--muted);display:block;margin-top:4px;font-size:12px}.room-icon{width:45px;height:45px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}.status-pill{font-size:11px;background:var(--surface-raised);color:var(--muted);border-radius:6px;padding:5px 8px}.recent-section{margin-top:40px}.text-link{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:9px}
.modal{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px;max-width:480px;width:calc(100vw - 32px);box-shadow:0 40px 150px #0009;max-height:90dvh;overflow:auto}.modal::backdrop{background:#080a10b3;backdrop-filter:blur(9px)}.modal .eyebrow{margin-right:30px;font-size:10px}.modal h2{font-size:29px;margin:15px 0 11px;line-height:1.25}.modal>p{font-size:14px;margin:0 0 25px;line-height:1.7}.modal-close{position:absolute;top:17px;right:17px;width:29px;height:29px}.modal label,.join-room-panel label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:550;margin-bottom:18px;color:var(--text)}input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:12px;font-size:14px;min-width:0}input::placeholder,textarea::placeholder{color:var(--muted)}select{min-height:45px}textarea{resize:vertical}.form-note{display:block;text-align:center;color:var(--muted);font-size:11px;margin-top:16px}.form-error,.inline-error{color:#ffb6b6!important;font-size:14px!important;padding:12px 15px;background:#661c2330;border:1px solid #a5434850;border-radius:8px;margin-top:18px!important}.inline-error{display:flex;gap:12px;justify-content:space-between;position:fixed;bottom:30px;left:50%;transform:translateX(-50%);width:min(550px,90vw);background:#321c23;z-index:9}.toast{position:fixed;bottom:35px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;background:var(--surface-raised);border:1px solid var(--line);padding:15px 22px;border-radius:12px;box-shadow:var(--shadow);font-size:14px;z-index:10;max-width:90vw}.toast svg{color:var(--green)}.suit-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.suit-choices button{border:1px solid var(--line);background:var(--surface-raised);border-radius:9px;padding:12px 5px;font-size:12px;text-transform:capitalize}.suit-choices button span{display:block;font-size:36px;font-family:Georgia,serif}.suit-choices button:hover{border-color:var(--accent)}
.table-header{display:flex;align-items:center;gap:16px;padding:29px 0 24px}.table-header h1{font-size:26px;letter-spacing:-.04em;margin-top:5px}.table-header .eyebrow{font-size:10px;letter-spacing:1.3px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:25px}.table-column{min-width:0}.table-status{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;gap:13px;margin:0 8px 17px}.table-status>span,.table-status>a{display:flex;align-items:center;gap:7px}.game-table{position:relative;min-height:445px;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--table),var(--accent) 5%),var(--table));border:7px solid var(--surface-raised);border-radius:140px;box-shadow:inset 0 0 0 1px var(--table-edge),inset 0 0 80px #0002,0 10px 30px #0002;display:flex;align-items:center;flex-direction:column;padding:22px 15px 20px}.game-table:before{content:'';pointer-events:none;position:absolute;inset:13px;border-radius:125px;border:1px solid color-mix(in srgb,var(--accent),transparent 92%)}.opponents{display:flex;justify-content:center;gap:25px;z-index:1;min-height:137px;width:100%;flex-wrap:wrap}.opponent{display:flex;align-items:center;flex-direction:column;position:relative;min-width:75px}.avatar{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:var(--surface-raised);color:var(--accent);font-size:18px;border:2px solid var(--line);position:relative}.avatar i{width:9px;height:9px;border:2px solid var(--table);border-radius:50%;position:absolute;bottom:-2px;right:-2px;background:var(--muted)}.avatar i.online{background:var(--green)}.bot-avatar{background:var(--accent-soft)}.opponent strong{font-size:12px;margin-top:6px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opponent small{font-size:10px;color:var(--muted);margin-top:1px}.taking-turn .avatar{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),transparent 87%)}.hidden-hand{display:flex;margin:8px 0 3px;padding-left:17px}.hidden-hand .playing-card{margin-left:-17px;transform:rotate(-4deg)}.hidden-hand .playing-card:nth-child(2n){transform:rotate(5deg)}.hand-count{font-size:10px;color:var(--muted)}.remove-bot{font-size:10px;color:var(--muted);padding:3px;text-decoration:underline}.table-center{position:relative;text-align:center;margin-top:8px}.table-wordmark{font-family:Manrope,sans-serif;color:color-mix(in srgb,var(--accent),transparent 80%);font-size:23px;font-weight:800;letter-spacing:-1px;display:block;line-height:1.2}.table-wordmark>span{margin-left:2px;font-size:14px}.piles{display:flex;gap:28px;align-items:flex-start;justify-content:center;margin-top:14px}.piles .playing-card{width:87px;height:123px;border-radius:8px}.piles .card-pip{font-size:49px}.piles .eight-pip{font-size:67px}.piles .card-corner{font-size:13px;top:7px;left:8px}.piles .card-corner b{font-size:18px}.piles .corner-bottom{top:auto;left:auto;bottom:7px;right:8px}.draw-pile{padding:0;position:relative;opacity:1!important}.draw-pile:before{content:'';position:absolute;inset:3px 0 26px;transform:rotate(-6deg);border:1px solid var(--table-edge);background:var(--surface-raised);border-radius:8px}.piles > button > span,.piles > div > span{display:block;color:var(--muted);font-size:10px;margin-top:8px}.drawable .playing-card{outline:2px solid var(--accent);outline-offset:4px}.drawable:hover .playing-card{transform:translateY(-5px)}.active-suit{display:inline-flex;align-items:center;gap:6px;font-size:21px;margin-top:8px}.active-suit>span{font-size:10px;color:var(--muted);text-transform:capitalize}.your-hand{padding:20px 6px 0}.hand-heading{display:flex;gap:11px;align-items:center;margin-bottom:18px}.self-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:15px;border:1px solid var(--line);flex-shrink:0}.hand-heading>div{flex:1}.hand-heading strong{font-size:13px;display:block}.hand-heading strong span{font-size:8px;color:var(--muted);margin-left:7px}.hand-heading small{font-size:11px;color:var(--muted);display:block}.turn-message{font-size:11px;color:var(--muted);text-align:right}.your-turn .turn-message{color:var(--accent)}.your-turn .self-avatar{border-color:var(--accent)}.hand-cards{display:flex;justify-content:center;gap:5px;overflow-x:auto;padding:10px 4px 15px;min-height:125px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.hand-card{padding:0;flex:0 0 auto;transition:transform .2s;opacity:1!important;position:relative}.hand-card .playing-card{width:73px;height:105px;border-radius:7px;box-shadow:0 2px 1px #d5d7de,0 5px 10px #0002}.hand-card .card-corner{font-size:12px;left:7px;top:6px}.hand-card .card-corner b{font-size:17px}.hand-card .corner-bottom{left:auto;top:auto;right:7px;bottom:6px}.hand-card .card-pip{font-size:40px}.hand-card .eight-pip{font-size:61px}.hand-card:not(.legal){filter:brightness(.78)}.hand-card.legal .playing-card{outline:2px solid var(--accent);outline-offset:2px}.hand-card.legal:hover{transform:translateY(-9px)}.game-sidebar{padding-top:32px}.score-panel,.activity-panel,.history-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}.game-sidebar .eyebrow{font-size:9px;letter-spacing:1.2px}.game-sidebar h3{font-size:15px;margin:7px 0 17px}.score-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-top:1px solid var(--line);font-size:12px}.score-place{color:var(--muted);font-size:10px}.score-row strong{font-size:16px;white-space:nowrap}.score-row strong small{font-size:9px;font-weight:400;color:var(--muted)}.score-row .grow small{font-size:9px;display:block;color:var(--muted)}.activity-panel ul{list-style:none;margin:0;padding:0}.activity-panel li{display:flex;gap:10px;color:var(--muted);font-size:11px;margin-top:15px;line-height:1.6}.activity-dot{display:block;width:4px;height:4px;border-radius:50%;background:var(--line);margin-top:7px;flex-shrink:0}.activity-panel li:first-child{color:var(--text)}.activity-panel li:first-child .activity-dot{background:var(--accent)}.table-theme-link{display:flex;justify-content:center;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:17px}.game-sidebar>.button{font-size:12px}.lobby-center{display:flex;flex-direction:column;align-items:center;max-width:410px;text-align:center;padding-bottom:30px;z-index:1;margin-top:0}.lobby-center h2{font-size:23px;margin:18px 0 10px}.lobby-center p{font-size:13px;max-width:290px}.lobby-actions{display:flex;gap:12px;align-items:center;flex-direction:column;margin-top:23px}.bot-form{display:flex;gap:8px}.bot-form select{font-size:12px;min-height:40px;padding:9px}.bot-form .button{font-size:12px;padding:9px 12px;min-height:40px}.waiting-pill{font-size:12px;margin-top:20px;color:var(--accent)}.table-overlay{position:absolute;inset:-1px;border-radius:130px;background:color-mix(in srgb,var(--table),transparent 5%);backdrop-filter:blur(14px);z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;padding:30px;text-align:center}.table-overlay h2{font-size:30px}.table-overlay>p{font-size:13px;max-width:300px}.result-spark{font-size:42px;color:var(--accent)}.result-overlay .eyebrow{font-size:10px}.result-actions{display:flex;flex-direction:column;gap:7px;margin-top:10px}.history-panel summary{cursor:pointer;display:flex;justify-content:space-between;font-size:12px}.history-panel summary>span{color:var(--muted)}.history-panel p{display:flex;justify-content:space-between;font-size:11px;margin-top:12px;border-top:1px solid var(--line);padding-top:10px;gap:10px}.history-panel small{font-size:10px;white-space:nowrap}.join-room-panel{margin:0 auto;max-width:420px;text-align:center;padding:0 0 30px}.join-art .court-stack{transform:scale(.6);margin:-45px auto -40px;height:310px}.join-room-panel>.eyebrow{justify-content:center}.join-room-panel h2{margin:10px 0}.join-room-panel>p{font-size:14px}.join-room-panel form{margin:22px auto 0;max-width:320px;text-align:left}.join-room-panel form .button{width:100%}
@media(min-width:1400px){.hero{min-height:495px}.court-stack{transform:scale(1.1)}.tile-visual{height:235px}}
@media(max-width:1080px){.site-header{gap:20px}.site-header nav{gap:20px}.account-name{display:none}.hero{grid-template-columns:1.1fr 1fr;min-height:440px;padding-top:48px}.hero h1{font-size:49px}.hero-actions{gap:7px}.hero-actions .button{font-size:12px;padding:12px 15px}.hero-actions .text-button{padding:12px 4px}.court-stack{transform:scale(.88)}.art-caption{font-size:8px;bottom:17px}.game-layout{grid-template-columns:minmax(0,1fr) 222px;gap:18px}.game-sidebar h3{font-size:13px}.score-panel,.activity-panel,.history-panel{padding:16px}.game-table{border-radius:110px}.game-table:before{border-radius:100px}.opponents{gap:15px}.hand-card .playing-card{width:62px;height:91px}.hand-card .card-pip{font-size:34px}.hand-card .eight-pip{font-size:51px}.table-overlay{border-radius:105px}.deck-preview .playing-card{width:90px;height:140px}}
@media(max-width:760px){.site-header{height:75px;padding:0 6%;border-bottom:1px solid var(--line)}.wordmark{font-size:26px}.brand-icon{width:32px;height:32px;font-size:33px;line-height:27px}.brand-icon>span{font-size:16px}.site-header nav{position:fixed;bottom:0;left:0;right:0;height:calc(65px + env(safe-area-inset-bottom));padding:5px 8% env(safe-area-inset-bottom);background:color-mix(in srgb,var(--bg),transparent 4%);border-top:1px solid var(--line);backdrop-filter:blur(16px);display:flex;justify-content:space-between;gap:5px;z-index:8}.nav-link{flex-direction:column;justify-content:center;gap:4px;font-size:10px;min-width:50px}.nav-link.active:after{bottom:auto;top:-6px;left:8px;right:8px;height:2px}.nav-link svg{width:20px;height:20px}.account-name{display:block;font-size:11px}.account-avatar{width:33px;height:33px}.account-button{gap:8px}.main-content{padding:0 6%}.hero{padding:32px 0 22px;grid-template-columns:1fr;gap:0;min-height:0}.hero-copy .eyebrow{font-size:9px;letter-spacing:1.5px}.hero h1{font-size:47px;line-height:1.12;margin:19px 0 17px}.hero-copy>p{font-size:15px;line-height:1.65}.desktop-break{display:none}.hero-actions{margin-top:22px;gap:12px;flex-wrap:wrap}.hero-actions .button{padding:13px 17px;font-size:13px}.hero-actions .text-button{padding:12px 0;font-size:12px;gap:8px}.hero-footnote{margin-top:17px;font-size:10px}.hero-art{position:absolute;right:-5px;top:85px;width:130px;height:163px;opacity:.18;pointer-events:none}.hero-art .court-stack{transform:scale(.5);max-width:none;width:340px;flex-shrink:0;margin-left:-145px}.hero-art:before{display:none}.hero-art .art-caption{display:none}.hero-copy{max-width:100%}.library{padding-top:24px}.section-heading{align-items:flex-start;gap:16px;margin-bottom:17px;flex-wrap:wrap}.section-heading h2{font-size:26px}.section-heading .eyebrow{font-size:9px;letter-spacing:1.3px}.search-field{width:100%;height:43px}.search-field input{font-size:14px}.filters{gap:5px;margin-bottom:18px}.filter{font-size:12px;padding:7px 11px}.game-grid{gap:17px;grid-template-columns:1fr}.tile-visual{height:190px}.tile-cards{bottom:-29px}.tile-info{padding:20px}.tile-info h3{font-size:22px}.tile-info p{font-size:13px}.game-meta{font-size:11px;margin-top:11px}.tile-badge{font-size:8px;top:15px;left:15px}.rummy .tile-visual{height:155px}.rummy-cards{bottom:-48px}.rummy-cards .playing-card{height:143px;width:91px}.site-footer{margin:35px 6% 85px;padding:20px 0;flex-direction:column;font-size:10px;gap:10px}.page-heading{padding:35px 0 28px}.page-heading h1{font-size:36px;margin-top:13px}.page-heading p{font-size:14px}.page-heading .eyebrow{font-size:10px}.heading-with-action{align-items:flex-start;flex-direction:column;gap:17px}.theme-grid{grid-template-columns:1fr;gap:15px}.theme-choice{display:flex;align-items:center}.theme-preview{width:125px;min-width:125px;height:110px;margin:13px}.theme-label{padding:15px;flex:1}.theme-label strong{font-size:16px}.theme-label small{font-size:11px}.mini-table{inset:30px 10px 22px}.mini-table>span{font-size:18px;height:33px;width:23px}.mini-button{height:6px;bottom:8px}.deck-heading{margin-top:30px}.deck-grid{grid-template-columns:1fr;gap:18px}.deck-preview{height:212px}.deck-preview .playing-card{width:95px;height:140px}.rules-panel{padding:23px 21px}.rules-panel h2{font-size:23px}.rules-panel p,.rules-panel li{font-size:14px}.rules-panel ol{padding-left:15px}.saved-room{padding:17px 14px;gap:12px}.saved-room strong{font-size:14px}.saved-room .status-pill{display:none}.saved-room small{font-size:10px}.room-icon{width:37px;height:37px}.modal{padding:31px 24px;max-height:85dvh}.modal h2{font-size:26px}.modal .eyebrow{font-size:9px}.modal input,.modal select,.modal textarea{font-size:16px}.modal label{font-size:13px}.modal::backdrop{backdrop-filter:blur(6px)}.toast,.inline-error{bottom:90px;font-size:13px;padding:13px 16px}.main-table{padding:0 4%}.table-header{padding:21px 0 17px;gap:10px}.table-header h1{font-size:20px}.table-header .round-button{width:34px;height:34px}.table-header .eyebrow{font-size:8px;letter-spacing:1.1px}.invite-button{padding:9px 11px;min-height:36px;font-size:11px;gap:7px}.game-layout{display:block}.table-status{font-size:10px;margin:0 3px 12px}.game-table{min-height:365px;border-width:5px;border-radius:95px;padding:17px 10px 15px}.game-table:before{inset:9px;border-radius:85px}.opponents{gap:12px;min-height:125px}.opponent{min-width:61px}.avatar{height:37px;width:37px}.opponent strong{font-size:11px;max-width:90px}.opponent small{font-size:9px}.hidden-hand .playing-card{width:27px;height:37px}.table-center{margin-top:0}.table-wordmark{font-size:20px}.piles{gap:24px;margin-top:12px}.piles .playing-card{width:77px;height:108px}.piles .card-pip{font-size:44px}.piles .eight-pip{font-size:59px}.piles .card-corner b{font-size:16px}.piles .card-corner{font-size:12px;top:6px;left:6px}.piles .corner-bottom{top:auto;left:auto;right:6px;bottom:6px}.active-suit{margin-top:5px}.your-hand{padding:16px 2px 0}.hand-heading{gap:8px;margin-bottom:10px}.hand-heading strong{font-size:12px}.hand-heading small{font-size:10px}.self-avatar{width:33px;height:33px;font-size:13px}.turn-message{font-size:10px;max-width:140px}.hand-cards{justify-content:flex-start;padding-left:5px;padding-right:5px;gap:5px;min-height:111px}.hand-card .playing-card{width:55px;height:79px;border-radius:6px}.hand-card .card-corner{font-size:10px;top:5px;left:5px}.hand-card .card-corner b{font-size:14px}.hand-card .corner-bottom{top:auto;left:auto;right:5px;bottom:5px}.hand-card .card-pip{font-size:29px}.hand-card .eight-pip{font-size:44px}.game-sidebar{padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.score-panel,.activity-panel,.history-panel{margin:0;padding:15px}.game-sidebar .eyebrow{font-size:8px;letter-spacing:1px}.game-sidebar h3{font-size:12px;margin-bottom:13px}.score-row{font-size:11px;gap:7px;padding:10px 0}.score-row strong{font-size:14px}.score-row strong small{font-size:8px}.activity-panel li{font-size:10px;line-height:1.5;margin-top:11px}.activity-panel li:nth-child(n+4){display:none}.table-theme-link{grid-column:1/-1;margin-top:0}.history-panel{grid-column:1/-1}.game-sidebar>.button{grid-column:1/-1;font-size:12px;min-height:40px}.lobby-center{margin-top:-30px;padding:0 12px 18px}.lobby-center h2{font-size:21px}.lobby-center p{font-size:12px}.lobby-actions{margin-top:18px;gap:12px}.lobby-actions>.button{font-size:12px;min-height:41px;padding:10px 17px}.table-overlay{border-radius:87px;padding:22px;gap:12px}.table-overlay h2{font-size:25px}.result-overlay .eyebrow{font-size:9px}.table-overlay>p{font-size:12px;max-width:260px}.result-actions .button{font-size:12px;min-height:40px;padding:10px 15px}.result-spark{font-size:31px}.join-art .court-stack{margin-top:-55px}.room-shell .site-footer{margin-top:28px}}
@media(max-width:370px){.account-name{display:none}.hero h1{font-size:41px}.hero-actions{gap:8px}.hero-actions .button{font-size:12px;padding:12px}.hero-actions .text-button{padding:12px 0;font-size:11px}.theme-preview{width:99px;min-width:99px;margin:10px}.theme-label{padding:10px}.theme-label small{font-size:10px}.theme-label strong{font-size:14px}.game-sidebar{grid-template-columns:1fr}.activity-panel{display:none}.table-header h1{font-size:18px}.table-status>a{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.account-avatar img,.self-avatar img,.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.backs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.back-choice{display:flex;align-items:center;flex-direction:column;gap:18px;padding:25px 15px;background:var(--surface);border:1px solid var(--line);border-radius:14px;position:relative}.back-choice strong{font-size:14px}.back-choice>.choice-dot{position:absolute;right:15px;bottom:17px}.back-choice.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.avatar-choice{position:relative;display:flex;align-items:center;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:14px}.avatar-choice img{width:100%;height:auto;max-width:155px;aspect-ratio:1;border-radius:22%;object-fit:cover}.avatar-choice.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.avatar-selected{background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;width:23px;height:23px;position:absolute;top:11px;right:11px;border-radius:50%}:is(.app-shell[data-back=orbit] .card-back:not([data-back]),.card-back[data-back=orbit]) .back-frame{background:repeating-radial-gradient(circle at center,transparent 0,transparent 8px,color-mix(in srgb,var(--accent),transparent 80%) 9px,transparent 10px)}:is(.app-shell[data-back=argyle] .card-back:not([data-back]),.card-back[data-back=argyle]) .back-frame{background:repeating-linear-gradient(45deg,transparent,transparent 11px,color-mix(in srgb,var(--accent),transparent 80%) 12px,transparent 13px),repeating-linear-gradient(-45deg,transparent,transparent 11px,color-mix(in srgb,var(--accent),transparent 80%) 12px,transparent 13px)}.card-back[data-back=signature] .back-frame{background:repeating-linear-gradient(45deg,transparent,transparent 6px,color-mix(in srgb,var(--accent),transparent 95%) 6px,color-mix(in srgb,var(--accent),transparent 95%) 7px)}.turn-message,.hand-heading strong{font-size:14px}.opponent strong{font-size:13px}.table-status{font-size:12px}.lobby-center p,.lobby-actions .button,.bot-form select,.bot-form .button{font-size:14px}.game-sidebar>.button{font-size:14px}.game-sidebar h3{font-size:15px}
@media(max-width:760px){.avatar-grid{grid-template-columns:repeat(3,1fr);gap:12px}.avatar-choice{padding:10px;gap:8px;font-size:12px}.backs-grid{gap:10px}.back-choice{padding:20px 7px 16px;gap:15px}.back-choice .playing-card{width:72px;height:102px}.back-choice strong{font-size:12px}.back-choice>.choice-dot{position:static;width:19px;height:19px;margin-top:-6px}.turn-message{font-size:12px}.hand-heading strong{font-size:13px}.opponent strong{font-size:12px}.table-status{font-size:11px}.lobby-center p,.lobby-actions .button,.bot-form select,.bot-form .button{font-size:13px}.game-sidebar h3{font-size:13px}}

@media(min-width:761px){.brand-icon{width:56px;height:56px;flex:none;border-radius:16px}.wordmark{gap:11px}}

/* Disabled appearance previews keep their artwork at full opacity. */
.back-choice:disabled,.avatar-choice:disabled{opacity:1}

.page-heading .appearance-save-status{min-height:20px;margin-top:12px;font-size:12px;color:var(--muted)}

.select-field { margin-bottom: 22px; }
.modal .select-field > label { margin-bottom: 9px; }
.outwit-select { min-width: 0; width: 100%; text-align: left; }
.select-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px #0000000a;
  font: inherit;
  font-size: 14px;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.select-trigger:focus-visible,
.select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.select-trigger:disabled { cursor: not-allowed; }
.select-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}
.select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.select-chevron { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--muted); transition: transform 180ms ease, color 180ms ease; }
.select-trigger[aria-expanded="true"] .select-chevron { transform: rotate(180deg); color: var(--accent); }
.select-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 6px;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  max-height: min(420px, calc(100dvh - 32px));
  border: 1px solid color-mix(in srgb, var(--line) 75%, var(--muted));
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 55px -12px #00000070, 0 4px 12px #00000018;
  overflow: hidden;
  opacity: 0;
  transition: opacity 120ms ease, overlay 120ms allow-discrete, display 120ms allow-discrete;
}
.select-menu:popover-open { display: flex; flex-direction: column; opacity: 1; }
.select-menu:not(:popover-open) { pointer-events: none; }
.select-menu::backdrop { background: transparent; }
@starting-style { .select-menu:popover-open { opacity: 0; } }
.select-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.select-option {
  display: flex;
  align-items: center;
  position: relative;
  gap: 12px;
  min-height: 68px;
  padding: 12px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  scroll-margin-block: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: background 100ms ease, border-color 100ms ease;
}
.select-option-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.select-option-label { font-size: 14px; font-weight: 500; line-height: 1.4; }
.select-option-description { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.select-option[aria-selected="true"] { background: var(--accent-soft); }
.select-option[aria-selected="true"] .select-option-label { color: var(--accent); }
.select-option[data-highlighted="true"] { background: var(--surface-raised); border-color: var(--line); }
.select-option[aria-selected="true"][data-highlighted="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.select-option[data-select-flash="true"] { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.select-option-separated { margin-bottom: 13px; }
.select-option-separated::after { content: ''; position: absolute; inset: auto 10px -8px; height: 1px; background: var(--line); pointer-events: none; }
.select-check { display: grid; place-items: center; flex: 0 0 21px; height: 21px; margin-left: 6px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); opacity: 0; transition: opacity 100ms ease; }
.select-option[aria-selected="true"] .select-check { opacity: 1; }
.select-level { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.select-level i { width: 4px; height: 6px; border-radius: 2px; background: currentColor; opacity: .22; }
.select-level i:nth-child(2) { height: 11px; }
.select-level i:nth-child(3) { height: 16px; }
.select-level i:first-child,
.level-normal i:nth-child(2),
.level-hard i { opacity: 1; }
.select-compact { width: auto; flex: 1; min-width: 155px; }
.select-compact .select-trigger { min-height: 44px; gap: 9px; padding: 7px 10px 7px 8px; font-size: 14px; border-radius: 10px; }
.select-compact .select-trigger .select-symbol { width: 28px; height: 28px; flex-basis: 28px; border-radius: 7px; }
.select-compact .select-menu { min-width: 290px; }
.bot-form .button { white-space: nowrap; }
@media (hover: hover) {
  .select-trigger:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface); }
}
@media (max-width: 600px) {
  .select-trigger { font-size: 16px; }
  .select-option { gap: 10px; padding: 11px 9px; }
  .select-option-label { font-size: 14px; }
  .select-option-description { font-size: 12px; }
  .select-check { margin-left: 0; }
  .select-compact { min-width: 145px; }
  .select-compact .select-trigger { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .select-trigger, .select-chevron, .select-menu, .select-option, .select-check { transition: none; }
}

.bot-form{max-width:100%;flex-wrap:wrap;justify-content:center}

.room-screen-entry { display: flex; align-items: center; min-height: 76px; margin: 0 0 24px; padding: 15px 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; }
.room-screen-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-right: 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.room-screen-entry > svg { flex: none; margin-left: auto; color: var(--accent); }
.room-screen-entry > span + svg { padding-left: 14px; box-sizing: content-box; }
.room-screen-entry-mobile { display: none; }
.room-screen-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) { .room-screen-entry:hover { border-color: var(--accent); background: var(--surface-raised); } }
@media (max-width: 760px), (max-width: 1000px) and (pointer: coarse) {
  .room-screen-entry-desktop { display: none; }
  .room-screen-entry-mobile { display: flex; margin: 28px 0 0; padding: 14px 16px; }
}

.resume-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 4px;
  padding: 17px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 160ms ease, background 160ms ease;
}
.resume-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 12px; }
.resume-copy { flex: 1; min-width: 0; }
.resume-copy > .eyebrow { display: block; color: var(--accent); font-size: 12px; letter-spacing: 1.1px; margin-bottom: 5px; }
.resume-copy > strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.resume-copy > strong > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.resume-action { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 9px; color: var(--accent-ink); background: var(--accent); font-size: 13px; font-weight: 600; }
.saved-room-action { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 126px; color: var(--accent); font-size: 13px; font-weight: 500; }
@media (hover: hover) { .resume-banner:hover { border-color: var(--accent); background: var(--surface-raised); } }
@media (max-width: 760px) {
  .resume-banner { margin-top: 20px; padding: 14px; gap: 12px; flex-wrap: wrap; }
  .resume-copy > strong { gap: 1px; flex-direction: column; font-size: 14px; }
  .resume-copy > strong > span { font-size: 12px; }
  .resume-copy > .eyebrow { font-size: 12px; letter-spacing: .4px; }
  .resume-action { justify-content: center; width: 100%; min-height: 42px; }
  .saved-room { flex-wrap: wrap; }
  .saved-room .grow { min-width: 140px; }
  .saved-room-action { width: 100%; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .resume-banner { transition: none; } }
.invite-preview { margin: 20px 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.invite-preview>img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.invite-preview>div { padding: 14px 16px; }
.invite-preview strong { display: block; font-size: 14px; }
.invite-preview p { font-size: 12px; margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.room-list-entry { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); overflow: hidden; }
.room-list-entry .saved-room { border: 0; border-radius: 0; margin: 0; }
.room-entry-management { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 20px; padding: 6px 0; border-top: 1px solid var(--line); }
.room-entry-management > span { color: var(--muted); font-size: 12px; }
.room-archive-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 6px; border-radius: 7px; color: var(--muted); font-size: 13px; }
.room-archive-button:hover { color: var(--text); background: var(--surface-raised); }
.room-host-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin: 24px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.room-shell .main-table { padding-bottom: 24px; }
.archived-rooms { margin: 28px 0; padding: 5px 20px 8px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.archived-rooms > summary { display: flex; gap: 12px; align-items: center; min-height: 58px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; }
.archived-rooms > summary::-webkit-details-marker { display: none; }
.archived-rooms > summary > span { flex: 1; }
.archived-rooms > summary > svg { color: var(--muted); }
.archived-rooms > summary > small { color: var(--muted); font-size: 12px; }
.archived-rooms[open] > summary > svg:last-child { transform: rotate(45deg); }
.archived-rooms > p { font-size: 14px; line-height: 1.6; margin: 4px 0 12px; }
.archived-room { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); }
.archived-room .game-emblem { width: 44px; height: 44px; border-radius: 12px; }
.archived-room strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.archived-room small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.archived-room > svg { color: var(--accent); }
.archived-room-panel { max-width: 620px; margin: 36px auto 50px; padding: 28px; border: 1px solid var(--line); border-radius: 23px; background: radial-gradient(ellipse at top right, var(--accent-soft), transparent 70%), var(--surface); }
.archived-room-panel > .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--muted); }
.archived-room-mark { display: grid; place-items: center; width: 65px; height: 65px; margin: 22px 0; border-radius: 19px; color: var(--accent); background: var(--accent-soft); }
.archived-room-panel > .eyebrow { overflow-wrap: anywhere; }
.archived-room-panel h1 { font-size: 34px; margin: 12px 0 17px; }
.archived-room-panel > p { font-size: 15px; line-height: 1.7; }
.archive-preserved { display: flex; align-items: flex-start; gap: 12px; margin: 23px 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); }
.archive-preserved > svg { color: var(--accent); margin-top: 2px; }
.archive-preserved > p, .modal .archive-preserved > p { margin: 0; font-size: 14px; line-height: 1.65; }
.archive-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.archive-panel-actions .button { flex: 1; }
.archived-room-panel > small { display: block; font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 16px; }
@media (max-width: 760px) {
  .room-shell .main-table { padding-bottom: calc(85px + env(safe-area-inset-bottom)); }
  .room-entry-management { margin: 0 14px; }
  .room-host-tools { font-size: 12px; }
  .archived-rooms { padding-left: 16px; padding-right: 16px; }
  .archived-room-panel { padding: 20px; margin-top: 22px; }
  .archived-room-panel h1 { font-size: 29px; }
  .archive-panel-actions { flex-direction: column; }
  .archive-panel-actions .button { width: 100%; font-size: 14px; }
  .modal .archive-panel-actions .button:first-child { order: 1; }
}

.room-search { display: flex; align-items: center; gap: 10px; padding: 0 13px; margin: 0 0 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--muted); }
.room-search input { width: 100%; min-width: 0; border: 0; background: none; padding: 13px 0; font: inherit; font-size: 16px; color: var(--text); outline: none; }
.room-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.room-search button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); }
.room-card .room-updated { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: 11px; font-weight: 400; }
.room-card .saved-room-action { gap: 10px; }

.card-number-art { position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: visible; }
.ace-ornament { opacity: .3; }
.playing-card[data-deck="classic"] .ace-ornament { display: none; }
.classic-court { position: absolute; inset: 20% 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.classic-court b { font: 500 38px/1 Georgia, serif; }
.classic-court > span { font-size: 25px; }
.b-hand-card .classic-court b, .hand-card .classic-court b { font-size: 28px; }
.b-hand-card .classic-court > span, .hand-card .classic-court > span { font-size: 19px; }
.playing-card[data-deck="royal-chaos"] {
  --card: #f8f4ec;
  background: radial-gradient(ellipse at 50% 45%, #fffaf2, var(--card) 80%);
  border-color: #e8d9c4;
  box-shadow: 0 3px 1px #d8c8af, 0 7px 15px #0002;
}
.playing-card[data-deck="royal-chaos"].red { color: #bc402e; }
.playing-card[data-deck="royal-chaos"].black { color: #223548; }
.playing-card[data-deck="royal-chaos"]::after {
  content: '';
  position: absolute;
  inset: 4%;
  border: 1px solid #af825628;
  border-radius: 4% / 2.666667%;
  pointer-events: none;
}
.playing-card[data-deck="royal-chaos"]:has(.card-number-art)::before { content: ''; position: absolute; inset: 12% 19%; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; border-radius: 45%; opacity: .13; pointer-events: none; }
.royal-art {
  background-image: url('/assets/decks/royal-chaos-courts-web-v1.webp');
  background-size: 400% 300%;
  background-position: var(--court-column) var(--court-row);
  left: 14%;
  right: 14%;
  top: 14%;
  bottom: 14%;
}
.suit-spades { --court-column: 0%; }
.suit-hearts { --court-column: 33.333333%; }
.suit-clubs { --court-column: 66.666667%; }
.suit-diamonds { --court-column: 100%; }
.royal-art.figure-11 { --court-row: 0%; }
.royal-art.figure-12 { --court-row: 50%; }
.royal-art.figure-13 { --court-row: 100%; }
:is(.app-shell[data-back="royal-chaos"] .card-back:not([data-back]), .card-back[data-back="royal-chaos"]) {
  background: #21364c;
  color: #edb762;
  border-color: #dcb476;
}
:is(.app-shell[data-back="royal-chaos"] .card-back:not([data-back]), .card-back[data-back="royal-chaos"]) .back-frame {
  background:
    repeating-conic-gradient(from 45deg, #ecb66224 0% 25%, transparent 0% 50%) 50% / 17px 17px,
    #21364c;
  border-color: #dcb476aa;
}
:is(.app-shell[data-back="royal-chaos"] .card-back:not([data-back]), .card-back[data-back="royal-chaos"]) .back-mark {
  display: grid;
  place-items: center;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid #edb76277;
  border-radius: 50%;
  background: #21364c;
}
.borjesson .tile-visual { background: radial-gradient(ellipse at 50% 120%, #826148, #282633 85%); }
.deck-choice:has([data-deck="royal-chaos"]) .deck-preview { background: radial-gradient(ellipse at bottom, #bc825220, transparent); }

.playing-card[data-deck="little-mischief"] {
  --card: #fdf7ef;
  background: var(--card);
  border-color: #e6d4bd;
  box-shadow: 0 3px 1px #e3cdb5, 0 7px 15px #0002;
  container-type: inline-size;
}
.playing-card[data-deck="little-mischief"].red { color: #b84259; }
.playing-card[data-deck="little-mischief"].black { color: #284b65; }
.playing-card[data-deck="little-mischief"]::after {
  content: '';
  position: absolute;
  inset: 4%;
  border: 1px solid #b89b692e;
  border-radius: 4% / 2.666667%;
  pointer-events: none;
}
.little-mischief-art {
  position: absolute;
  background-image: url('/assets/decks/little-mischief-courts-v1-web-v1.webp');
  background-size: 400% 300%;
  background-position: var(--mischief-column) var(--mischief-row);
  background-repeat: no-repeat;
  width: 78%;
  height: auto;
  aspect-ratio: 3 / 4;
  left: 11%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  clip-path: inset(1% 6% 3% 4%);
  pointer-events: none;
}
.playing-card[data-deck="little-mischief"] .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.little-mischief-ace, .little-mischief-joker { background-size: contain; background-position: center; clip-path: none; }
.little-mischief-ace { background-image: url('/assets/decks/little-mischief-ace-v1.webp'); }
.little-mischief-joker { background-image: url('/assets/decks/little-mischief-joker-v1.webp'); }
.playing-card[data-deck="little-mischief"] .card-corner b { font-size: 22cqw; }
.playing-card[data-deck="little-mischief"] .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.deck-choice:has([data-deck="little-mischief"]) .deck-preview {
  background: radial-gradient(ellipse at 30% 100%, #e8b4a02b, transparent 70%), radial-gradient(ellipse at 85% 50%, #90adc224, transparent 65%);
}
:is(.app-shell[data-back="little-mischief"] .card-back:not([data-back]), .card-back[data-back="little-mischief"]) {
  background: #42647a;
  color: #ffebce;
  border-color: #ecd5b1;
}
:is(.app-shell[data-back="little-mischief"] .card-back:not([data-back]), .card-back[data-back="little-mischief"]) .back-frame {
  border-color: #eed7b5b0;
  background:
    radial-gradient(circle at 50% 50%, #fce5bf8c 0 1px, transparent 1.5px) 0 0 / 15px 15px,
    repeating-linear-gradient(45deg, transparent 0 10px, #ecd6b512 10px 11px, transparent 11px 21px),
    #42647a;
}
:is(.app-shell[data-back="little-mischief"] .card-back:not([data-back]), .card-back[data-back="little-mischief"]) .back-mark {
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid #eed7b5b0;
  border-radius: 45%;
  background: #42647a;
  box-shadow: 0 0 0 4px #42647a, 0 0 0 5px #eed7b53d;
}

.playing-card[data-deck="syntax"] {
  --card: #f6f3ea;
  background: var(--card);
  color: #22383b;
  border: 1px solid #d8d6cc;
  box-shadow: 0 3px 0 #d4d1c4, 0 6px 12px #0002;
  isolation: isolate;
  container-type: inline-size;
}
.playing-card[data-deck="syntax"].red { color: #b43d43; }
.playing-card[data-deck="syntax"]::after { content: ''; position: absolute; inset: 4%; border: 1px solid #1f383b16; border-radius: 4px; pointer-events: none; }
.playing-card[data-deck="syntax"] .card-corner { z-index: 1; top: 6%; left: 7%; font-size: 14cqw; }
.playing-card[data-deck="syntax"] .card-corner b { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 22cqw; font-weight: 700; letter-spacing: -.08em; }
.playing-card[data-deck="syntax"] .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.syntax-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.syntax-art text { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
.syntax-file { font-size: 8px; fill: #666f6b; letter-spacing: .5px; }
.syntax-rule { fill: none; stroke: #203d3a; stroke-width: .65; opacity: .2; }
.syntax-brace { fill: none; stroke: #89958c; stroke-width: 1.5; opacity: .5; }
.syntax-art .syntax-monogram { font-size: 29px; font-weight: 700; fill: #fff9eb; letter-spacing: -1.7px; }
.syntax-art .syntax-monogram-wide { font-size: 23px; letter-spacing: -1.5px; }
.syntax-art .syntax-language { font-size: 12.5px; font-weight: 700; fill: #243b3c; letter-spacing: -.4px; }
.syntax-code { font-size: 6.5px; fill: #576b63; letter-spacing: -.3px; }
.syntax-art .syntax-bug-title { font-size: 7.5px; font-weight: 700; fill: #684ca4; }
.syntax-court image { mix-blend-mode: darken; }
.playing-card[data-deck="syntax"].joker-card { color: #684ca4; }
.playing-card[data-deck="syntax"] .joker-label { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 7cqw; }
.deck-choice:has([data-deck="syntax"]) .deck-preview { background: radial-gradient(ellipse at 50% 110%, #518d7966, transparent 80%), #162a2b; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) { background: #173436; color: #b4e8c7; border-color: #61817b; box-shadow: 0 3px 0 #0a2124, 0 5px 12px #0003; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-frame {
  position: absolute;
  inset: 7%;
  height: auto;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid #a6d7bc77;
  background: repeating-linear-gradient(0deg, transparent 0 11px, #abd6bd0b 11px 12px), repeating-linear-gradient(90deg, transparent 0 11px, #abd6bd0b 11px 12px);
}
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-mark { font-size: 0; display: grid; place-items: center; width: 78%; aspect-ratio: 1; container-type: inline-size; border: 1px solid #b8e5cd55; background: #173436; border-radius: 50%; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-mark > span { display: none; }
:is(.app-shell[data-back="syntax"] .card-back:not([data-back]), .card-back[data-back="syntax"]) .back-mark::before { content: '{ }'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 48cqw/1 'SFMono-Regular', Consolas, monospace; color: #c3edc9; letter-spacing: -.1em; padding-right: .1em; white-space: nowrap; }

.your-hand { border: 1px solid transparent; border-radius: 16px; padding: 18px 14px 8px; margin-top: 16px; transition: border-color 180ms ease, background 180ms ease; }
.your-hand.your-turn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.hand-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; }
.hand-heading > div:not(.turn-notice) { min-width: 0; }
.hand-heading > div:not(.turn-notice) > strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A status beside the player, never a separate row above the cards. */
.turn-notice.turn-badge {
  --turn-tone: var(--accent); --turn-ink: var(--accent-ink);
  display: inline-flex; align-items: center; justify-self: end; gap: 6px; flex: 0 0 auto;
  width: auto; max-width: 135px; min-height: 30px; margin: 0; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); text-align: left;
}
.turn-notice[data-turn-kind=buy], .mobile-turn-guide[data-turn-kind=buy] { --turn-tone: #a7dbca; --turn-ink: #173e33; }
.turn-notice.turn-badge .turn-copy { display: block; flex: 1; min-width: 0; color: inherit; }
.turn-notice.turn-badge .turn-copy strong { display: block; font: 700 12px/1.3 Manrope,sans-serif; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn-notice.turn-badge.is-actionable { color: var(--text); border-color: color-mix(in srgb,var(--turn-tone) 28%,var(--line)); background: color-mix(in srgb,var(--turn-tone) 10%,var(--surface)); }
.turn-notice.turn-badge .turn-symbol { display: grid; place-items: center; flex: 0 0 15px; width: 15px; height: 15px; color: inherit; }
.turn-notice.turn-badge.is-actionable .turn-symbol { color: var(--accent); }
.turn-notice.turn-badge[data-turn-kind=buy] .turn-symbol { color: var(--green); }
@media(max-width:380px) {
  .turn-notice.turn-badge { max-width: 124px; gap: 5px; padding-inline: 7px; }
  .turn-notice.turn-badge .turn-copy strong { font-size: 11px; }
}
.turn-ready-dot { flex: 0 0 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .65; margin-inline: 3px; }
.turn-notice.is-arriving { animation: turn-arrives 1400ms ease-out both; }
@keyframes turn-arrives { 0% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--turn-tone) 60%,transparent); } 45% { box-shadow: 0 0 0 7px color-mix(in srgb,var(--turn-tone) 16%,transparent); } 100% { box-shadow: 0 0 0 11px transparent; } }
.turn-settings { margin: 14px 0 0; border-top: 1px solid var(--line); }
.turn-settings summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: var(--muted); list-style: none; }
.turn-settings summary::-webkit-details-marker { display: none; }
.turn-settings summary small { margin-left: auto; font-size: 12px; color: var(--accent); }
.turn-settings summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.turn-settings-content { padding: 4px 0 12px; display: grid; gap: 10px; }
.turn-settings-content p, .turn-settings-content > small { font-size: 12px; color: var(--muted); }
.turn-setting { display: flex; width: 100%; gap: 18px; align-items: center; justify-content: space-between; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-align: left; min-height: 56px; }
.turn-setting strong { display: block; font-size: 13px; }
.turn-setting small { display: block; color: var(--muted); font-size: 12px; }
.turn-switch { width: 34px; height: 20px; border-radius: 12px; padding: 3px; flex: none; background: var(--line); }
.turn-switch::after { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 150ms ease; }
.turn-setting[aria-checked=true] .turn-switch { background: var(--accent); }
.turn-setting[aria-checked=true] .turn-switch::after { background: var(--accent-ink); transform: translateX(14px); }
.turn-settings-content .button { justify-self: start; min-height: 44px; }
@media (max-width: 760px) { .your-hand { padding: 14px 10px 6px; margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .your-hand, .turn-switch::after { transition: none; } .turn-notice.is-arriving, .mobile-turn-guide.is-arriving { animation: none; } }

.borjesson-board { --b-gold: #ecc58a; }
.b-seating { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.b-seating:has(.b-seat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.b-seat.active { border-color: var(--accent); background: var(--accent-soft); }
.b-seat img { border-radius: 10px; }
.b-seat strong { font-size: 12px; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.b-seat strong small { margin-left: 5px; font-size: 10px; color: var(--muted); }
.b-seat > span { color: var(--muted); font-size: 10px; }
.b-seat i { position: absolute; right: -8px; top: 32px; z-index: 1; color: var(--accent); font-style: normal; }
.b-seat:last-child i { display: none; }
.b-table { border: 1px solid var(--table-edge); border-radius: 22px; background: radial-gradient(ellipse at top, color-mix(in srgb, var(--table) 80%, #9b7654), var(--table) 75%); min-height: 350px; padding: 25px 20px; position: relative; overflow: hidden; }
.b-lobby { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px 0; }
.b-lobby .table-wordmark { position: static; transform: none; }
.b-lobby h2 { font-size: 27px; }
.b-lobby p { font-size: 14px; }
.b-lobby .b-lobby-rules { font-size: 12px; max-width: 420px; }
.b-round-goal { display: flex; align-items: center; gap: 23px; text-align: left; padding: 21px 25px; border: 1px solid color-mix(in srgb, var(--b-gold) 24%, transparent); border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--b-gold) 10%, transparent), #00000012); }
.b-goal-art { position: relative; flex: none; width: 70px; height: 88px; display: grid; place-items: center; }
.b-goal-art .playing-card { width: 52px; height: 76px; transform: rotate(-9deg); box-shadow: 0 5px 10px #0002; }
.b-goal-art .playing-card + .playing-card { position: absolute; top: 9px; right: -3px; transform: rotate(9deg); }
.b-goal-art .card-corner { font-size: 10px; top: 4px; left: 4px; }
.b-goal-art .card-corner b { font-size: 16px; }
.b-goal-art .corner-bottom { top: auto; left: auto; bottom: 4px; right: 4px; }
.b-goal-art .card-pip { font-size: 28px; }
.b-goal-spark { position: absolute; top: -7px; right: -5px; color: var(--b-gold); font-size: 21px; }
.b-goal-copy { flex: 1; min-width: 0; }
.b-round-goal .eyebrow { font-size: 10px; letter-spacing: 1.3px; }
.b-round-goal .eyebrow > span { color: var(--muted); font-weight: 500; }
.b-round-goal h2 { font-size: 27px; margin: 4px 0 6px; }
.b-round-goal p { font-size: 14px; max-width: 420px; margin: 0; line-height: 1.6; }
.b-round-progress { display: flex; gap: 5px; margin-top: 13px; max-width: 150px; }
.b-round-progress span { flex: 1; height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.b-round-progress .done { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.b-round-progress .current { background: var(--accent); }
.b-pass-status, .b-round-result { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 40px 0 18px; }
.b-pass-status > svg { color: var(--accent); }
.b-pass-status small, .b-trick-area > small { color: var(--muted); font-size: 11px; }
.b-trick-area { text-align: center; padding-top: 20px; }
.b-trick-label { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.b-trick { display: flex; justify-content: center; gap: 14px; padding: 17px 0; }
.b-trick-seat { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; max-width: 110px; }
.b-trick-seat > span:last-child { max-width: 100%; overflow-wrap: anywhere; font-size: 11px; color: var(--muted); }
.b-trick-seat.trick-winner > .playing-card { outline: 2px solid var(--accent); outline-offset: 3px; }
.b-trick-seat.trick-winner > span:last-child { color: var(--accent); font-weight: 700; }
.showing-result > p strong { color: var(--text); }
.b-trick .playing-card, .b-card-slot { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.b-card-slot { display: grid; place-items: center; border: 1px dashed var(--muted); border-radius: 8px; opacity: .5; font-size: 12px; }
.b-card-slot.next { color: var(--accent); border-color: var(--accent); opacity: 1; }
.b-trick-area > p { font-size: 13px; margin-bottom: 5px; }
.b-hand { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px 7px; padding: 7px 0 12px; }
.b-hand-card { padding: 0; position: relative; border-radius: 7px; transition: transform 160ms ease; }
.b-hand-card:disabled { opacity: .6; }
.pass-hand .b-hand-card:disabled { opacity: .78; }
.b-hand-card .playing-card { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.b-hand-card .card-corner { top: 5px; left: 5px; font-size: 10px; line-height: 1; }
.b-hand-card .card-corner b { font-size: 16px; }
.b-hand-card .corner-bottom { top: auto; left: auto; bottom: 5px; right: 5px; }
.b-hand-card .card-pip { font-size: 25px; }
.b-hand-card.legal { outline: 2px solid var(--accent); outline-offset: 2px; }
.b-hand-card.chosen { outline: 3px solid var(--accent); outline-offset: 2px; transform: translateY(-4px); }
.pass-check { position: absolute; top: -7px; right: -5px; display: grid; place-items: center; border-radius: 50%; width: 20px; height: 20px; background: var(--accent); color: var(--accent-ink); }
.pass-instruction { font-size: 13px; margin: 0 0 15px; }
.pass-submit { margin-top: 12px; }
.b-last-trick { margin-top: 12px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.b-last-trick summary { cursor: pointer; }
.b-last-trick summary strong { float: right; }
.b-last-trick > div { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.b-last-trick p { font-size: 12px; }
.b-last-trick .b-last-trick-cards { display: flex; justify-content: center; gap: 16px; padding: 5px 0; }
.b-last-trick-cards .b-trick-seat { max-width: 70px; }
.b-last-trick-cards .playing-card { width: 100%; height: auto; aspect-ratio: 2 / 3; }
.b-last-trick-cards .card-corner { top: 5px; left: 5px; font-size: 11px; }
.b-last-trick-cards .card-corner b { font-size: 17px; }
.b-last-trick-cards .corner-bottom { top: auto; left: auto; bottom: 5px; right: 5px; }
.b-last-trick-cards .card-pip { font-size: 30px; }
.b-results-scroll { overflow-x: auto; }
.b-results table { border-collapse: collapse; width: 100%; margin-top: 16px; font-size: 11px; }
.b-results th, .b-results td { text-align: right; padding: 7px 5px; border-bottom: 1px solid var(--line); }
.b-results th:first-child { text-align: left; max-width: 80px; overflow-wrap: anywhere; }
.b-results thead { color: var(--muted); }
.game-picker { display: flex; gap: 8px; margin-bottom: 20px; }
.game-picker button { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); font-size: 13px; }
.game-picker button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
@media (max-width: 760px) {
  .game-sidebar { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 22px; }
  .game-sidebar .score-panel, .game-sidebar .activity-panel, .game-sidebar .history-panel { padding: 22px 20px; border-radius: 16px; }
  .game-sidebar .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .game-sidebar h3 { font-size: 19px; margin-bottom: 18px; }
  .game-sidebar .score-row { font-size: 15px; gap: 12px; padding: 15px 0; align-items: center; }
  .game-sidebar .score-row .grow { overflow-wrap: anywhere; }
  .game-sidebar .score-row .grow small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 4px; }
  .game-sidebar .score-row > strong { font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; text-align: right; flex: none; }
  .game-sidebar .score-row > strong small { display: block; font-size: 11px; margin-top: 4px; }
  .game-sidebar .activity-panel li { display: flex; font-size: 14px; line-height: 1.7; margin-top: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .game-sidebar .activity-panel li:last-child { border-bottom: 0; padding-bottom: 0; }
  .game-sidebar .activity-dot { margin-top: 9px; width: 6px; height: 6px; }
  .game-sidebar .b-results table { font-size: 13px; }
  .game-sidebar .b-results th, .game-sidebar .b-results td { padding: 12px 7px; }
  .game-sidebar > .button, .game-sidebar .table-theme-link { font-size: 14px; min-height: 48px; }
  .game-sidebar .history-panel summary { font-size: 15px; }
  .game-sidebar .history-panel p { font-size: 14px; }
  .b-table { padding: 20px 12px; min-height: 310px; }
  .b-last-trick { padding: 16px; font-size: 14px; }
  .b-last-trick-cards .b-trick-seat > span:last-child { font-size: 12px; line-height: 1.5; }
  .b-trick { gap: 9px; }
  .b-hand { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
  .b-hand-card:disabled { opacity: .8; }
  .b-hand-card .card-corner { font-size: 13px; top: 6px; left: 6px; }
  .b-hand-card .card-corner b { font-size: 21px; }
  .b-hand-card .corner-bottom { top: auto; left: auto; right: 6px; bottom: 6px; }
  .b-hand-card .card-pip { font-size: 33px; }
  .b-trick .card-corner { font-size: 12px; top: 5px; left: 5px; }
  .b-trick .card-corner b { font-size: 20px; }
  .b-trick .corner-bottom { top: auto; left: auto; right: 5px; bottom: 5px; }
  .b-round-goal { gap: 16px; padding: 17px 14px; border-radius: 13px; }
  .b-goal-art { width: 54px; }
  .b-goal-art .playing-card { width: 47px; height: 70px; }
  .b-goal-spark { right: -4px; font-size: 17px; }
  .b-round-goal h2 { font-size: 23px; line-height: 1.2; }
  .b-round-goal p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .b-hand-card { transition: none; } }
@media (max-width: 360px) {
  .b-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

:root { --header-height: 98px; }
html { scroll-padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 18px); }
.site-header { position: sticky; top: 0; z-index: 20; isolation: isolate; height: calc(var(--header-height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); border-bottom-color: transparent; }
/* Blur a sibling layer so the fixed mobile navigation keeps the viewport as its containing block. */
.site-header::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 6px 22px #0000000a; pointer-events: none; }
/* Keep the opaque base on TVs without both color mixing and backdrop blur. */
@supports (background: color-mix(in srgb, black 94%, transparent)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.site-header .account-button { min-height: 44px; min-width: 44px; justify-content: flex-end; }
.game-emblem { display: inline-flex; flex: none; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 17px; background: #51406a33; }
.game-emblem svg { display: block; width: 100%; height: 100%; }
.emblem-borjesson { background: #a5753430; }
.emblem-rummy, .emblem-rummy-house { background: #377e6e30; }
.tile-title-row { display: flex; gap: 11px; align-items: center; margin-bottom: 6px; }
.tile-title-row .game-emblem { width: 40px; height: 40px; border-radius: 11px; }
.tile-title-row h3 { margin: 0; }
.rummy-cards { z-index: 1; }
.rummy-run, .borjesson-penalties { position: absolute; z-index: 1; bottom: -25px; left: 50%; display: flex; transform: translateX(-50%); }
.rummy-run { gap: 8px; bottom: 25px; }
.rummy-run .playing-card { width: 101px; height: 149px; border-color: #d6e9df; background: #f1f8f3; color: #21554c; }
.rummy-run .card-corner { top: 7px; left: 7px; font-size: 13px; }
.rummy-run .card-corner b { font-size: 20px; }
.rummy-run .corner-bottom { top: auto; left: auto; right: 7px; bottom: 7px; }
.rummy-run .playing-card:first-child { transform: translate(4px, 13px) rotate(-15deg); }
.rummy-run .playing-card:nth-child(2) { transform: translateY(-5px) rotate(-3deg); }
.rummy-run .playing-card:nth-child(3) { transform: translate(-4px, 9px) rotate(10deg); }
.run-spark { position: absolute; top: -14px; right: -15px; font-size: 28px; color: #a8d9c2; transform: rotate(12deg); }
.borjesson-penalties { align-items: flex-end; gap: 0; }
.borjesson-penalties .playing-card { width: 112px; height: 163px; }
.borjesson-penalties .playing-card:first-child { transform: translate(22px, 25px) rotate(-18deg); width: 98px; height: 144px; }
.borjesson-penalties .playing-card:nth-child(2) { z-index: 2; transform: translateY(-5px) rotate(-5deg); }
.borjesson-penalties .playing-card:last-child { transform: translate(-18px, 14px) rotate(16deg); }
.room-icon .game-emblem { width: 43px; height: 43px; border-radius: 11px; }
.rules-page { max-width: 1120px; margin: 0 auto; }
.rule-game-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 38px; }
.rule-game-link { display: flex; gap: 14px; align-items: center; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color 160ms ease, background 160ms ease; }
.rule-game-link .game-emblem { width: 54px; height: 54px; border-radius: 14px; }
.rule-game-link > span:not(.game-emblem) { flex: 1; min-width: 0; }
.rule-game-link strong { display: block; font-size: 15px; }
.rule-game-link small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.rule-game-link > svg { color: var(--muted); }
.rules-panel.game-rule-panel { max-width: none; border-radius: 22px; padding: 32px; margin-bottom: 28px; }
.rule-header { display: flex; align-items: center; gap: 20px; margin-bottom: 23px; }
.rule-header .game-emblem { width: 82px; height: 82px; border-radius: 22px; }
.rule-kicker { display: block; color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.rule-header h2 { font-size: 32px; margin: 4px 0; letter-spacing: -.04em; }
.rule-header p { margin: 0; font-size: 14px; }
.rule-facts { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.rule-facts > span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; background: var(--surface-raised); border-radius: 8px; font-size: 11px; color: var(--muted); }
.rule-goal { display: flex; gap: 12px; align-items: center; padding: 20px 0; }
.rule-goal > svg { color: var(--accent); }
.rules-panel .rule-goal p { font-size: 14px; margin: 0; }
.rules-panel .rule-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0 0 24px; list-style: none; }
.rules-panel .rule-steps > li { position: relative; padding: 20px; margin: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; }
.rule-step-art { height: 66px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rule-step-art > .rule-card:first-child { transform: rotate(-8deg); }
.rule-step-art > .rule-card:nth-child(2) { transform: rotate(8deg); }
.rule-card { display: inline-flex; flex: none; width: 38px; height: 53px; padding: 5px 7px; border: 1px solid #e7dfd0; border-radius: 6px; background: #fff6e7; color: #293849; flex-direction: column; align-items: flex-start; line-height: 1.05; box-shadow: 0 2px 0 #d4c9b5; }
.rule-card b { font: 700 17px/1 Georgia, serif; color: inherit; }
.rule-card > span { font-size: 20px; align-self: center; }
.rule-card.red-card { color: #b5483d; }
.rule-card-back { background: #665087; border-color: #a895c4; color: #e9ddfa; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 2px 0 #413451; }
.rule-art-spark { color: var(--accent); font-size: 24px; }
.rule-step-number { display: block; font-size: 10px; color: var(--muted); font-weight: 650; letter-spacing: .07em; margin-bottom: 5px; }
.rule-steps .rule-step-number { position: absolute; right: 17px; top: 17px; }
.rule-steps h3, .round-rule-grid h3 { font-size: 16px; color: var(--text); margin: 0 0 6px; }
.rules-panel .rule-steps p, .rules-panel .round-rule-grid p { margin: 0; font-size: 13px; line-height: 1.7; }
.rule-more { margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-more summary { display: flex; gap: 12px; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; min-height: 54px; padding: 13px 0; font-size: 13px; font-weight: 550; }
.rule-more summary::-webkit-details-marker { display: none; }
.rule-more summary > svg { color: var(--muted); transition: transform 160ms ease; }
.rule-more[open] summary > svg { transform: rotate(45deg); }
.rule-more > div { padding-bottom: 12px; }
.rules-panel .rule-more p { margin: 0 0 12px; font-size: 13px; }
.rule-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.rule-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.rule-actions > span { color: var(--muted); font-size: 12px; }
.rule-actions .text-link { font-size: 13px; }
.rule-preparation { margin: 0 0 26px; }
.rule-preparation h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 3px 0 16px; }
.rule-preparation h3 svg { transform: rotate(180deg); color: var(--accent); }
.rule-deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rule-deal-grid > div { padding: 16px 18px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--line); display: flex; gap: 5px; flex-direction: column; }
.rule-deal-grid > div > strong { font-size: 12px; }
.rule-deal-grid > div > span { color: var(--muted); font-size: 13px; }
.rule-deal-grid b { font-size: 21px; color: var(--text); }
.rule-deal-grid small { color: var(--muted); font-size: 11px; }
.rules-panel .rule-preparation > p { font-size: 13px; line-height: 1.7; }
.rule-subheading { font-size: 18px; margin-bottom: 16px; }
.rules-panel .round-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0 0 24px; padding: 0; list-style: none; }
.rules-panel .round-rule-grid > li { padding: 20px; margin: 0; display: flex; align-items: flex-start; gap: 18px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; }
.round-rule-art { padding-top: 7px; flex: none; }
.round-rule-art .rule-card { transform: rotate(-5deg); }
.rule-suit-quartet { display: grid; grid-template-columns: 1fr 1fr; width: 38px; gap: 2px 5px; color: var(--text); font-size: 21px; line-height: 1.15; }
.rule-suit-quartet > span:nth-child(even) { color: #d9786c; }
.rule-important { display: flex; align-items: flex-start; gap: 15px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: var(--accent-soft); border-radius: 14px; padding: 20px; }
.rule-important-icon { font-size: 28px; color: var(--accent); line-height: 1.1; }
.rule-important strong { font-size: 14px; }
.rules-panel .rule-important p { margin: 6px 0 0; font-size: 13px; }
.rule-example { display: flex; gap: 18px; align-items: center; padding: 24px 4px; }
.rule-example .rule-card { transform: rotate(-6deg); }
.rules-panel .rule-example p { margin: 4px 0 6px; font-size: 13px; }
.rule-example > div > strong { font-size: 16px; }
.rule-example strong span { font-weight: 400; font-size: 11px; color: var(--muted); margin-right: 8px; }
.rule-pending { display: flex; gap: 15px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 18px; }
.rule-pending .status-pill { flex: none; }
.rules-panel .rule-pending p { font-size: 13px; margin: 0; }
.own-rules { margin: 45px 0; }
.own-rules > p { font-size: 14px; margin-bottom: 22px; }
.own-rule-panel { max-width: none; }
.own-rule-panel h3 { display: flex; align-items: center; gap: 11px; }
.own-rule-panel h3 svg { color: var(--accent); }
.rules-rummy { --rule-mint: #b9e8d6; --rule-wash: #69c3a912; }
:root[data-theme=daylight] .rules-rummy { --rule-mint: #256c56; --rule-wash: #69c3a90d; }
.rules-rummy .rule-kicker { color: var(--rule-mint); }
.rules-rummy .rule-goal.rummy-rule-goal { justify-content: space-between; gap: 24px; margin: 22px 0 28px; padding: 22px; border: 1px solid #78b9a34d; border-radius: 16px; background: radial-gradient(ellipse at top left, #66c6a91c, transparent 80%), var(--surface); }
.rummy-rule-goal > div:first-child { max-width: 590px; min-width: 0; }
.rummy-rule-goal h3 { margin: 7px 0 9px; font-size: 23px; line-height: 1.3; }
.rules-rummy .rummy-rule-goal p { font-size: 14px; line-height: 1.7; }
.rummy-rule-fan { display: flex; align-items: center; flex: none; padding: 10px 8px; }
.rummy-rule-fan .rule-card { width: 47px; height: 66px; }
.rummy-rule-fan .rule-card:first-child { transform: rotate(-15deg) translateY(5px); }
.rummy-rule-fan .rule-card:nth-child(2) { position: relative; z-index: 1; margin: 0 -13px; transform: translateY(-4px); }
.rummy-rule-fan .rule-card:last-child { transform: rotate(15deg) translateY(5px); }
.rules-rummy .rummy-rule-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.rules-rummy .rummy-rule-steps > li { padding: 20px; background: linear-gradient(135deg, var(--rule-wash), transparent), var(--surface-raised); }
.rummy-step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rummy-rule-steps .rummy-step-top .rule-step-number { position: static; font: 700 26px/1 Manrope, sans-serif; letter-spacing: -.04em; color: var(--rule-mint); opacity: .7; margin: 0; }
.rummy-step-art { display: flex; align-items: center; gap: 6px; min-height: 61px; }
.rummy-step-art > svg { color: var(--rule-mint); }
.rummy-step-art > .rule-card:first-child { transform: rotate(-5deg); }
.rummy-step-art > .rule-card:nth-child(2) { transform: rotate(3deg); }
.rules-rummy .rule-card-back { color: #c8ebdc; border-color: #709b8e; background: #285547; box-shadow: 0 2px 0 #193c30; }
.rummy-added-card { padding: 3px; border: 1px dashed #78b9a399; border-radius: 8px; margin-left: 4px; transform: rotate(5deg); }
.rules-rummy .rummy-rule-steps h3 { font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
.rules-rummy .rummy-rule-steps p { font-size: 14px; line-height: 1.65; }
.rummy-buy-guide { border: 1px solid #78b9a34d; border-radius: 16px; background: var(--rule-wash); padding: 21px; margin-bottom: 16px; }
.rummy-section-title { display: flex; align-items: center; gap: 10px; color: var(--rule-mint); }
.rummy-section-title h3 { font-size: 18px; line-height: 1.4; color: var(--text); margin: 0; }
.rummy-buy-levels { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0; }
.rummy-buy-levels > div { padding-right: 14px; }
.rummy-buy-levels > div + div { padding-left: 24px; border-left: 1px solid #78b9a34d; }
.rummy-buy-levels strong { display: block; color: var(--rule-mint); font: 750 38px/1.2 Manrope, sans-serif; letter-spacing: -.04em; }
.rummy-buy-levels strong > span { font-size: 18px; font-weight: 550; letter-spacing: 0; }
.rummy-buy-levels small { display: block; font-size: 13px; margin-top: 4px; color: var(--muted); }
.rummy-buy-closed { display: flex; align-items: flex-start; gap: 10px; padding-top: 16px; border-top: 1px solid #78b9a32e; }
.rummy-buy-closed > svg { color: var(--rule-mint); margin-top: 3px; }
.rules-rummy .rummy-buy-closed p { margin: 0; font-size: 14px; line-height: 1.65; }
.rules-rummy .rummy-buy-closed strong { color: var(--text); }
.rummy-finish-rule { margin-bottom: 24px; }
.rummy-rule-mark { display: grid; place-items: center; flex: none; width: 31px; height: 31px; color: var(--accent); border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rules-rummy .rummy-finish-rule strong { font-size: 15px; }
.rules-rummy .rummy-finish-rule p { font-size: 14px; line-height: 1.65; }
.rummy-rule-more + .rummy-rule-more { border-top: 0; }
.rummy-rule-more summary { font-size: 15px; min-height: 61px; padding: 16px 0; }
.rummy-rule-more summary > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rummy-rule-more summary > span > svg { color: var(--rule-mint); }
.rules-rummy .rummy-rule-more p { font-size: 14px; line-height: 1.7; }
.rummy-combinations { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 5px 0 18px; }
.rummy-combinations > section { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); }
.rummy-combinations h3, .rummy-joker-swap h3 { font-size: 16px; margin: 14px 0 8px; line-height: 1.4; }
.rules-rummy .rummy-combinations p { margin: 0; }
.rummy-combination-art { display: flex; gap: 6px; align-items: center; padding: 4px 0; }
.rule-card.rule-joker { align-items: center; justify-content: center; gap: 3px; color: #83527b; }
.rule-joker > small { font: 700 6px/1.3 Manrope, sans-serif; letter-spacing: .2px; }
.rummy-joker-swap { margin-top: 18px; padding: 2px 18px 5px; border: 1px solid #78b9a34d; border-radius: 13px; background: var(--rule-wash); }
.rummy-swap-visual { display: flex; gap: 24px; align-items: center; margin: 17px 0; }
.rummy-swap-visual > svg { color: var(--rule-mint); }
.rules-rummy .rummy-rule-rounds { list-style: none; margin: 0; padding: 0; }
.rules-rummy .rummy-rule-rounds > li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 15px 0; }
.rummy-rule-rounds > li + li { border-top: 1px solid var(--line); }
.rummy-rule-rounds > li > div { flex: 1; min-width: 0; }
.rummy-rule-round-number { flex: 0 0 30px; color: var(--rule-mint); font: 700 22px/1 Manrope, sans-serif; letter-spacing: -.04em; }
.rummy-rule-rounds strong { display: block; font-size: 15px; line-height: 1.4; }
.rummy-rule-rounds small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rummy-round-buys { flex: none; border-radius: 6px; padding: 4px 7px; background: var(--rule-wash); color: var(--rule-mint); font-size: 12px; white-space: nowrap; }
.rummy-rule-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.rummy-rule-points > div { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.rummy-rule-points dt { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.rummy-rule-points dd { margin: 16px 0 0; font: 700 28px/1.2 Manrope, sans-serif; color: var(--rule-mint); }
.rummy-rule-points dd > span { font: 400 12px/1.5 'DM Sans', sans-serif; color: var(--muted); }
@media (hover: hover) { .rule-game-link:hover { border-color: var(--accent); background: var(--surface-raised); } }
@media (max-width: 1100px) { .rule-game-nav { gap: 9px; } .rule-game-link { padding: 12px; gap: 10px; } .rule-game-link > svg { display: none; } }
@media (max-width: 760px) {
  .tile-decoration { display: none; }
  .rummy .tile-visual { height: 190px; }
  .rummy-run { bottom: 24px; }
  .rummy-run .playing-card { width: clamp(72px, 22.5vw, 88px); height: auto; aspect-ratio: 2 / 3; }
  .borjesson-penalties { bottom: -23px; }
  .borjesson-penalties .playing-card { width: 98px; height: 151px; }
  .borjesson-penalties .playing-card:first-child { width: 84px; height: 131px; }
  :root { --header-height: 75px; }
  .rule-game-nav { grid-template-columns: 1fr; gap: 9px; margin-bottom: 25px; }
  .rule-game-link { padding: 10px 14px; gap: 15px; }
  .rule-game-link > svg { display: block; }
  .rule-game-link .game-emblem { width: 48px; height: 48px; }
  .rules-panel.game-rule-panel { padding: 22px 18px; border-radius: 18px; margin-bottom: 20px; }
  .rule-header { gap: 14px; margin-bottom: 18px; }
  .rule-header .game-emblem { width: 62px; height: 62px; border-radius: 17px; }
  .rule-header h2 { font-size: 26px; }
  .rule-header p { font-size: 12px; }
  .rule-kicker { font-size: 9px; line-height: 1.6; }
  .rule-facts { gap: 6px; padding-bottom: 17px; }
  .rule-facts > span { font-size: 10px; padding: 5px 8px; }
  .rules-panel .rule-goal p { font-size: 13px; }
  .rules-panel .rule-steps { grid-template-columns: 1fr; gap: 10px; }
  .rules-panel .rule-steps > li { padding: 17px 15px 17px 88px; min-height: 128px; }
  .rule-step-art { position: absolute; left: 15px; top: 25px; width: 58px; gap: 0; }
  .rule-step-art .rule-card { width: 31px; height: 45px; padding: 5px; }
  .rule-step-art .rule-card + .rule-card { margin-left: -11px; margin-top: 9px; }
  .rule-art-spark { font-size: 17px; margin-left: -4px; }
  .rule-step-art > svg { width: 16px; margin-left: 3px; }
  .rule-steps .rule-step-number { position: static; font-size: 9px; }
  .rule-steps h3, .round-rule-grid h3 { font-size: 15px; }
  .rules-panel .rule-steps p, .rules-panel .round-rule-grid p { font-size: 12px; }
  .rule-actions { gap: 15px; }
  .rule-actions .button { min-height: 46px; }
  .rule-preparation h3 { font-size: 15px; align-items: flex-start; }
  .rule-deal-grid { gap: 8px; }
  .rule-deal-grid > div { padding: 12px 10px; }
  .rule-deal-grid > div > span { font-size: 11px; }
  .rule-deal-grid b { font-size: 18px; }
  .rule-subheading { font-size: 17px; }
  .rules-panel .round-rule-grid { grid-template-columns: 1fr; gap: 10px; }
  .rules-panel .round-rule-grid > li { padding: 17px 15px; }
  .rule-important { padding: 16px 14px; gap: 12px; }
  .rule-important strong { font-size: 13px; }
  .rules-panel .rule-important p { font-size: 12px; }
  .rule-example { gap: 14px; }
  .rule-example > div > strong { font-size: 15px; }
  .rule-example strong span { margin-right: 5px; font-size: 10px; }
  .rule-pending { align-items: flex-start; flex-direction: column; gap: 10px; }
  .own-rules .section-heading { align-items: flex-start; gap: 16px; flex-direction: column; }
  .own-rules h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .rule-game-link, .rule-more summary > svg { transition: none; } }
@media (max-width: 760px) {
  .rules-rummy .rule-facts > span { font-size: 11px; }
  .rules-rummy .rule-goal.rummy-rule-goal { padding: 18px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .rummy-rule-goal > div:first-child { flex: 1 1 180px; }
  .rummy-rule-goal h3 { font-size: 21px; }
  .rummy-rule-fan { display: none; }
  .rules-rummy .rummy-rule-steps { grid-template-columns: 1fr; gap: 12px; }
  .rules-rummy .rummy-rule-steps > li { padding: 18px; }
  .rummy-step-top { margin-bottom: 13px; }
  .rummy-step-art { gap: 5px; }
  .rummy-step-art .rule-card { width: 33px; height: 47px; padding: 4px 5px; }
  .rummy-buy-guide { padding: 17px; }
  .rummy-section-title h3 { font-size: 16px; }
  .rummy-buy-levels > div + div { padding-left: 16px; }
  .rummy-buy-levels small { font-size: 12px; }
  .rummy-combinations { grid-template-columns: 1fr; }
  .rummy-rule-more summary { font-size: 14px; }
  .rummy-rule-more summary > span { gap: 8px; }
  .rummy-swap-visual { gap: 15px; }
  .rummy-joker-swap { padding-left: 14px; padding-right: 14px; }
  .rules-rummy .rummy-rule-rounds > li { gap: 8px; }
  .rummy-rule-round-number { flex-basis: 24px; font-size: 19px; }
  .rummy-rule-rounds strong { font-size: 14px; }
  .rummy-rule-rounds small { font-size: 12px; }
  .rummy-round-buys { font-size: 11px; padding: 4px 5px; }
  .rummy-rule-points { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rummy-rule-points > div { padding: 13px; }
  .rummy-rule-points dt { flex-wrap: wrap; gap: 9px; }
}

.game-sidebar .game-panel { --panel-tint: var(--accent); position: relative; overflow: hidden; padding: 20px 16px; border-radius: 18px; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--panel-tint) 8%, transparent), transparent 70%), var(--surface); box-shadow: 0 7px 20px #0000000a; }
.game-panel::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel-tint) 55%, transparent), transparent); pointer-events: none; }
.game-panel.score-panel { --panel-tint: #e2b775; }
.game-panel.activity-panel { --panel-tint: var(--accent); }
.game-panel.b-results, .game-panel.history-panel { --panel-tint: var(--green); }
.game-panel-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.panel-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 11px; transform: rotate(-5deg); }
.panel-mark > svg { transform: rotate(5deg); }
.score-mark { background: #ba843a1c; color: #dbaa64; border-color: #dbaa6438; }
.history-mark { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); border-color: color-mix(in srgb, var(--green) 20%, transparent); }
.game-sidebar .game-panel-heading .eyebrow { font-size: 8px; letter-spacing: .8px; line-height: 1.5; }
.game-sidebar .game-panel-heading h3 { margin: 3px 0 0; font-size: 16px; line-height: 1.25; }
.panel-count { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 5px 7px; flex: none; }
.standings-list { padding: 0; margin: 0; list-style: none; }
.game-sidebar .standings-list .score-row { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-top-color: var(--line); padding: 14px 0; }
.game-sidebar .standings-list .score-row:first-child { border-top-color: transparent; }
.game-sidebar .standings-list .score-row.is-leader { padding: 12px 8px; margin: 0 -8px 4px; border-color: #c3935038; border-radius: 12px; background: linear-gradient(100deg, #c3935014, transparent); }
.score-avatar { position: relative; flex: none; width: 34px; height: 34px; }
.score-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); border-radius: 11px; }
.is-you .score-avatar img { border-color: var(--accent); }
.score-rank { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; background: var(--surface-raised); border: 2px solid var(--surface); font-size: 8px; font-weight: 700; color: var(--muted); }
.is-leader .score-rank { color: #332315; background: #e2b775; }
.game-sidebar .score-player-name { display: block; font-size: 12px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.you-chip { display: inline-block; font-size: 7px; letter-spacing: .05em; color: var(--accent); border-radius: 4px; padding: 2px 4px; background: var(--accent-soft); margin-left: 5px; vertical-align: 1px; }
.game-sidebar .score-identity > small { font-size: 10px; margin-top: 4px; color: var(--muted); line-height: 1.4; }
.game-sidebar .score-row > .score-value { min-width: 47px; display: block; flex: none; text-align: center; font-family: Manrope, sans-serif; font-size: 20px; letter-spacing: -.03em; line-height: 1.1; padding: 9px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); font-variant-numeric: tabular-nums; }
.game-sidebar .score-row > .score-value > small { display: block; font-family: 'DM Sans', sans-serif; font-size: 8px; margin-top: 4px; letter-spacing: 0; line-height: 1.2; }
.game-sidebar .is-leader > .score-value { color: #dbaa64; background: #c3935010; border-color: #c3935030; }
.game-sidebar .activity-timeline { padding: 0; margin: 0; }
.game-sidebar .activity-timeline li { position: relative; display: flex; gap: 10px; padding: 12px 0; margin: 0; font-size: 12px; line-height: 1.65; border: 0; }
.game-sidebar .activity-timeline li::before { content: ''; position: absolute; left: 10px; top: 30px; bottom: -9px; width: 1px; background: var(--line); }
.game-sidebar .activity-timeline li:last-child::before { display: none; }
.activity-node { position: relative; z-index: 1; width: 21px; height: 21px; display: grid; place-items: center; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; margin-top: 1px; color: var(--muted); }
.activity-node > i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.latest-event .activity-node { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.latest-event .activity-copy { color: var(--text); font-weight: 500; }
.activity-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.game-sidebar .b-results th, .game-sidebar .b-results td { font-variant-numeric: tabular-nums; }
.game-sidebar .b-results tbody td:last-child { font-weight: 700; color: var(--green); background: color-mix(in srgb, var(--green) 7%, transparent); }
.game-sidebar .history-panel summary { align-items: center; gap: 10px; justify-content: flex-start; }
.game-sidebar .history-panel summary > svg { color: var(--green); }
.game-sidebar .history-panel summary > span { margin-left: auto; padding: 3px 7px; border-radius: 6px; background: var(--surface-raised); }
.b-last-trick { background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 5%, transparent), transparent 75%), var(--surface); }
@media (max-width: 1100px) and (min-width: 761px) { .game-panel-heading .panel-count { display: none; } }
@media (max-width: 760px) {
  .game-sidebar .game-panel { padding: 23px 20px; border-radius: 19px; }
  .game-panel-heading { gap: 13px; margin-bottom: 18px; }
  .panel-mark { width: 44px; height: 44px; border-radius: 13px; }
  .panel-mark > svg { width: 25px; height: 25px; }
  .game-sidebar .game-panel-heading .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .game-sidebar .game-panel-heading h3 { font-size: 20px; margin-top: 5px; }
  .panel-count { padding: 6px 8px; font-size: 11px; }
  .game-sidebar .standings-list .score-row { gap: 14px; padding: 17px 0; }
  .game-sidebar .standings-list .score-row.is-leader { padding: 15px 10px; margin-left: -10px; margin-right: -10px; }
  .score-avatar { width: 42px; height: 42px; }
  .score-avatar img { border-radius: 13px; }
  .score-rank { width: 20px; height: 20px; font-size: 10px; }
  .game-sidebar .score-player-name { font-size: 15px; }
  .you-chip { font-size: 8px; padding: 2px 5px; }
  .game-sidebar .score-identity > small { font-size: 12px; margin-top: 5px; }
  .game-sidebar .score-row > .score-value { min-width: 63px; font-size: 27px; border-radius: 12px; padding: 11px 9px; }
  .game-sidebar .score-row > .score-value > small { font-size: 10px; }
  .game-sidebar .activity-timeline li { font-size: 14px; padding: 14px 0; gap: 13px; }
  .activity-node { width: 24px; height: 24px; border-radius: 8px; }
  .game-sidebar .activity-timeline li::before { left: 11px; top: 37px; }
}

/* Completed matches keep their own score sheets, including the original names. */
.game-sidebar .match-history > summary { min-height: 44px; }
.game-sidebar .match-result { margin-top: 12px; border-top: 1px solid var(--line); }
.game-sidebar .match-result > summary { min-height: 66px; padding: 12px 0; justify-content: space-between; cursor: pointer; }
.game-sidebar .match-result > summary > span { margin: 0; padding: 0; background: none; display: grid; gap: 5px; min-width: 0; }
.match-result summary small { color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.match-result > p { font-size: 13px; line-height: 1.6; color: var(--muted); }
.match-history table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.match-history th, .match-history td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.match-history td:last-child { font-weight: 700; color: var(--green); }
.game-sidebar .b-results-scroll { max-width: 100%; overscroll-behavior-x: contain; }
.game-sidebar .b-results-scroll th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface); min-width: 128px; max-width: 150px; white-space: normal; overflow-wrap: anywhere; box-shadow: 1px 0 var(--line); }
.game-sidebar .b-results-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.joker-card { color: #85517c; }
.card-corner .joker-label { font: 700 6px/1.5 Manrope, sans-serif; letter-spacing: .4px; }
.joker-symbol { position: absolute; inset: 21% 20%; width: 60%; height: 58%; }
.rummy-board { --r-mint: #b9e8d6; }
:root[data-theme=daylight] .rummy-board { --r-mint: #256c56; }
.rummy-board .table-column { min-width: 0; }
.r-seating { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); margin: 0 0 16px; overflow: hidden; }
.r-seat { display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-width: 0; min-height: 76px; }
.r-seat + .r-seat { border-top: 1px solid var(--line); }
.r-seat.active { background: linear-gradient(100deg, var(--accent-soft), transparent); box-shadow: inset 3px 0 var(--accent); }
.r-seat-avatar { display: block; flex: 0 0 40px; }
.r-seat-avatar img { display: block; width: 40px; height: 40px; border-radius: 50%; }
.r-seat.active .r-seat-avatar img { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-seat-identity { min-width: 0; flex: 1; }
.r-seat-identity > strong { display: block; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.r-seat-identity > small { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 9px; font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 4px; }
.r-seat-turn { color: var(--accent); font-size: 12px; font-weight: 650; white-space: nowrap; }
.r-seat-turn::before { content: '·'; margin-right: 7px; }
.r-opened { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; flex: none; padding: 5px 0 5px 6px; min-height: 48px; color: var(--r-mint); text-align: right; border-radius: 6px; }
.r-opened:hover .r-opened-label strong { text-decoration: underline; text-underline-offset: 4px; }
.r-opened:focus-visible { outline-offset: 2px; }
.r-opened-label { display: flex; align-items: center; gap: 6px; }
.r-opened strong { font-size: 14px; font-weight: 650; white-space: nowrap; }
.r-opened small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.r-seat-collecting { flex: none; text-align: right; }
.r-seat-collecting strong { display: block; color: var(--muted); font-size: 14px; font-weight: 500; }
.r-seat-collecting small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.r-dismiss { display: grid; place-items: center; flex: 0 0 32px; height: 32px; color: var(--muted); border-radius: 8px; }
.r-dismiss:hover { background: var(--line); color: var(--text); }
.r-lobby { padding: 35px 25px; border-radius: 24px; text-align: center; background: radial-gradient(ellipse at top, #69c3a915, transparent 75%), var(--surface); }
.r-lobby h2 { font-size: 25px; margin: 25px 0 10px; }
.r-lobby p { max-width: 420px; margin: auto; font-size: 15px; }
.r-lobby .lobby-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 420px; margin: 24px auto 0; }
.r-lobby .bot-form { justify-content: center; margin: 0 0 4px; }
.r-lobby-screen { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised, var(--surface)); color: var(--text); text-align: left; }
.r-lobby-screen:hover, .r-lobby-screen:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.r-lobby-screen[data-online=true] { border-color: var(--accent); }
.r-lobby-screen-symbol { position: relative; display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.r-lobby-screen-symbol > span { position: absolute; bottom: -2px; right: -2px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); color: var(--bg); }
.r-lobby-screen-copy { flex: 1; min-width: 0; }
.r-lobby-screen-copy strong { display: block; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.r-lobby-screen-copy small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.r-lobby-screen > svg { flex: none; color: var(--muted); }
.r-lobby-cards { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.r-lobby-cards .playing-card { width: 84px; height: 126px; }
.r-lobby-cards>.playing-card:first-child { transform: rotate(-10deg) translateY(9px); }
.r-lobby-cards>.playing-card:last-child { transform: rotate(10deg) translateY(9px); }
.r-goal { border: 1px solid #78b9a34d; background: radial-gradient(ellipse at top left, #66c6a923, transparent 75%), var(--surface); border-radius: 20px; padding: 18px 20px 15px; margin: 0 0 18px; }
.r-goal-heading { display: flex; align-items: center; gap: 16px; }
.r-round-number { display: flex; align-items: baseline; gap: 4px; flex: none; color: var(--r-mint); font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.r-round-number small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.r-goal h2 { font-size: 24px; margin: 5px 0 0; line-height: 1.25; overflow-wrap: anywhere; }
.r-goal .eyebrow { color: var(--r-mint); font-size: 10px; letter-spacing: 1.5px; }
.r-goal-chips { display: flex; gap: 6px 15px; flex-wrap: wrap; margin-top: 12px; }
.r-goal-chips > span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.r-goal-chips svg { color: var(--r-mint); }
.r-goal-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #78b9a329; color: var(--muted); }
.r-goal-meta > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.r-progress { display: flex; gap: 4px; margin-top: 12px; }
.r-progress i { flex: 1; height: 3px; background: var(--line); border-radius: 5px; }
.r-progress .done { background: #477e6e; }.r-progress .current { background: #a6dfcd; }
.r-hand-panel { border: 1px solid var(--line); border-radius: 23px; background: var(--surface); padding: 20px; }
.r-piles { display: flex; gap: 24px; justify-content: center; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.r-pile { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 5px; min-width: 130px; }
.r-pile .playing-card, .r-empty-card { width: 84px; height: 125px; }
.r-pile:disabled { opacity: 1; cursor: default; }.r-pile:enabled .playing-card { outline: 2px solid var(--accent); outline-offset: 4px; }
.r-pile strong { font-size: 12px; margin-top: 6px; }.r-pile small { color: var(--muted); font-size: 11px; }
.r-empty-card { display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 9px; font-size: 12px; }
.r-pile .r-discard-author { max-width: 155px; font-size: 11px; line-height: 1.4; color: var(--r-mint); overflow-wrap: anywhere; }
.r-buy-interest { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #78b9a34d; border-radius: 14px; background: #69c3a90a; margin-bottom: 16px; }
.r-buy-interest > svg { flex-shrink: 0; color: var(--r-mint); }
.r-buy-interest .grow { min-width: 0; }.r-buy-interest strong { display: block; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.r-buy-interest small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.r-buy-interest .button { flex-shrink: 0; min-height: 44px; padding: 9px 12px; font-size: 12px; }
.r-buy-interest.is-requested { border-color: #78b9a380; background: #69c3a914; }
.r-discard-recap { margin: 0 0 18px; }.r-discard-recap > .eyebrow { font-size: 9px; letter-spacing: 1px; }
.r-discard-trail { margin-top: 8px; }
.r-discard-event { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.r-discard-event > .playing-card { flex: 0 0 44px; width: 44px; height: 66px; border-radius: 5px; }
.r-discard-event .card-corner { top: 3px; left: 3px; font-size: 6px; }.r-discard-event .card-corner b { font-size: 12px; }
.r-discard-event .corner-bottom { top: auto; left: auto; bottom: 3px; right: 3px; }
.r-discard-event > div:last-child { min-width: 0; }.r-discard-event small { display: block; font-size: 11px; line-height: 1.4; color: var(--muted); }
.r-discard-event strong { display: block; margin: 2px 0; font-size: 13px; line-height: 1.35; }
.r-discard-event > div:last-child > span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--r-mint); }
.r-buy-prompt { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 15px; padding: 17px; margin-bottom: 18px; }
.r-buy-prompt p { font-size: 12px; margin: 6px 0 0; }.r-buy-prompt strong { font-size: 15px; }
.r-buy-actions { display: flex; gap: 9px; width: 100%; }.r-buy-actions .button { flex: 1; }
.r-opening { padding: 15px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 18px; }
.r-opening-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.r-opening-heading>strong { font-size: 13px; }.r-opening-heading .text-button { font-size: 12px; padding: 7px 0; min-height: 34px; }
.r-opening-heading > span { color: var(--muted); font-size: 12px; }
.r-workbench { position: relative; min-width: 0; --hand-dock-bottom: 12px; }
.r-workbench-head { position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top)); z-index: 9; background: var(--surface); padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.r-workbench .r-hand-label { justify-content: space-between; margin: 0; min-height: 44px; }
.r-workbench .r-hand-label > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.r-workbench .r-hand-label > div:first-child > strong { font-size: 17px; }
.r-workbench .r-hand-label .r-hand-count { font-size: 12px; white-space: nowrap; }
.r-hand-tools { display: flex; align-items: center; gap: 4px; }
.r-help-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; color: var(--muted); }
.r-help-toggle > span { display: grid; place-items: center; width: 21px; height: 21px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 13px; font-weight: 650; }
.r-help-toggle:hover, .r-help-toggle[aria-expanded=true] { color: var(--accent); background: var(--accent-soft); }
.r-opening[hidden] { display: none; }
.r-opening > .text-button { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; margin-top: 5px; }
.r-suggest { display: flex; align-items: center; gap: 7px; min-height: 44px; margin: -8px 0 8px; font-size: 13px; }
.r-hand-sort { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.r-hand-sort button { min-height: 38px; min-width: 52px; padding: 6px 10px; font-size: 12px; border-radius: 8px; color: var(--muted); }
.r-hand-sort button[aria-pressed=true] { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 4px #0002; }
.r-drafts { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 2px 0 7px; margin-top: 10px; scroll-padding-inline: 2px; }
.r-drafts > button { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 110px; min-height: 57px; padding: 9px 11px; text-align: left; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); }
.r-drafts > button.active { border-color: var(--accent); background: var(--accent-soft); }
.r-drafts strong { display: block; font-size: 13px; line-height: 1.2; }
.r-drafts small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.r-drafts .r-draft-number { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 8px; color: var(--muted); background: var(--line); font-size: 12px; font-weight: 750; }
.r-drafts .active .r-draft-number { background: var(--accent); color: var(--accent-ink); }
.r-drafts .complete > svg { color: var(--r-mint); }
.r-workbench .r-hand { padding: 5px 3px 14px; }
.r-hand-dock { position: sticky; bottom: var(--hand-dock-bottom); z-index: 10; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 -8px 28px #0002; padding: 6px 12px 12px; margin-top: 12px; }
.r-selection-toolbar { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.r-selection-toolbar > span { flex: 1; color: var(--muted); font-size: 12px; }
.r-selection-toolbar .text-button { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 0; font-size: 12px; white-space: nowrap; }
.r-selection-note { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.r-opening-lock { display: flex; align-items: center; gap: 7px; min-height: 40px; width: 100%; text-align: left; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.r-opening-lock > span { display: grid; place-items: center; width: 19px; height: 19px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; }
.r-hand.is-choosing-discard { background: linear-gradient(180deg, transparent, var(--accent-soft)); border-radius: 14px; }
.r-waiting-player { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.r-waiting-player > svg { color: #edb363; }
.r-waiting-player strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.r-waiting-player small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.r-waiting-player .text-button { min-height: 44px; font-size: 13px; }
.r-round-scores { max-width: 620px; margin: 22px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.r-round-scores table { border-collapse: collapse; width: 100%; table-layout: fixed; text-align: right; font-variant-numeric: tabular-nums; }
.r-round-scores th, .r-round-scores td { padding: 12px; border-bottom: 1px solid var(--line); }
.r-round-scores thead th { color: var(--muted); font-size: 11px; font-weight: 500; }
.r-round-scores th:first-child { text-align: left; width: 54%; }
.r-round-scores tbody th { font-size: 13px; font-weight: 600; }
.r-round-scores td { font-size: 16px; font-weight: 650; }
.r-round-scores td:last-child { color: var(--r-mint); }
.r-round-scores tbody tr:last-child > * { border-bottom: 0; }
.r-round-scores .is-you { background: var(--accent-soft); }
.r-result-player { display: flex; align-items: center; gap: 9px; }
.r-result-player img { border-radius: 9px; flex-shrink: 0; }
.r-result-player > span { min-width: 0; overflow-wrap: anywhere; }
.r-result-player small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.r-hand-dock .r-hand-actions { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.r-hand-dock .button { min-width: 0; min-height: 48px; padding: 10px 8px; font-size: 13px; gap: 6px; }
.is-opened .r-hand-dock .r-discard { grid-column: 1 / -1; }
.r-workbench .r-hand-card { scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 165px); scroll-margin-bottom: calc(var(--hand-dock-bottom) + 145px); }
.r-workbench .r-hand { scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 160px); }
@media (min-width: 1200px) {
  .r-workbench .r-hand { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.r-opening-guide, .r-opening-note { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.r-opening-guide strong, .r-table-guide strong { color: var(--text); font-weight: 600; }
.r-opening-note { border-top: 1px solid var(--line); padding-top: 12px; margin: 12px 0 0; }
.r-table-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.r-table-guide p { flex: 1 1 220px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.r-table-guide .button { min-height: 44px; }
.r-table-melds { scroll-margin-top: 110px; }
.r-hand-label { display: flex; gap: 10px; align-items: center; margin: 16px 0; }.r-hand-label > div:first-child > strong { font-size: 14px; }.r-hand-label .r-hand-count { flex: 1; color: var(--muted); font-size: 11px; }.r-hand-label .text-button { font-size: 12px; padding: 3px; min-height: 32px; }
.r-hand { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 4px 0; }
.r-hand-card { position: relative; min-width: 0; padding: 0; opacity: 1!important; }
.r-hand-card .playing-card { width: 100%; height: auto; aspect-ratio: 2/3; }
.r-hand-card .card-corner { left: 6px; top: 6px; font-size: 11px; }.r-hand-card .card-corner b { font-size: 19px; }
.r-hand-card .corner-bottom { left: auto; top: auto; right: 6px; bottom: 6px; }
.r-hand-card.selected .playing-card { outline: 2px solid var(--accent); outline-offset: 3px; transform: translateY(-3px); }
.r-selected-mark, .r-group-tag { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 50%; width: 21px; height: 21px; font-size: 10px; font-weight: 800; background: var(--accent); color: var(--accent-ink); }
.r-selected-mark { top: -7px; right: -6px; }.r-group-tag { bottom: -4px; left: -4px; background: #9dd4c1; color: #15382d; }
.r-new-card-tag { position: absolute; z-index: 3; bottom: -5px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border: 1px solid #82baa6; border-radius: 6px; background: #d2eee2; color: #214638; font-size: 10px; font-weight: 700; line-height: 1.3; pointer-events: none; }
.r-hand-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }.r-hand-actions .button { flex: 1; font-size: 12px; min-height: 45px; }.r-discard { min-width: 160px; }
.r-hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 12px 0; }
.r-layoff-picker { margin-top: 18px; padding: 15px; border: 1px solid #78b9a34d; border-radius: 15px; background: #69c3a90a; }
.r-layoff-heading { display: flex; gap: 9px; align-items: center; color: #a6dfcd; font-size: 14px; }
.r-layoff-picker>p { font-size: 12px; margin: 7px 0 12px; }
.r-layoff-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.r-layoff-target { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid #78b9a34d; border-radius: 11px; background: var(--surface); text-align: left; min-height: 64px; }
.r-layoff-target:enabled:hover { border-color: #a6dfcd; background: #69c3a91a; }
.r-layoff-target strong { display: block; font-size: 12px; }.r-layoff-target small { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; margin-top: 4px; }
.r-layoff-target>svg { color: #a6dfcd; }
.r-meld.can-extend { background: #69c3a90b; box-shadow: inset 3px 0 #a6dfcd; }
.r-meld.can-extend .r-meld-heading>.button { border-color: #78b9a380; color: #a6dfcd; }
.r-table-melds { margin-top: 30px; }.r-table-melds h2 { font-size: 23px; }.r-table-count { color: var(--muted); font-size: 12px; }
.r-empty-melds { border: 1px dashed var(--line); padding: 23px; border-radius: 17px; color: var(--muted); font-size: 14px; }
.r-meld-owner { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; margin-bottom: 13px; overflow: hidden; }
.r-meld-owner>summary { display: flex; align-items: center; gap: 9px; padding: 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.r-meld-owner>summary img { border-radius: 50%; }.r-meld-owner>summary>span { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.r-meld { padding: 0 14px 14px; }.r-meld+.r-meld { padding-top: 14px; border-top: 1px solid var(--line); }
.r-meld-heading { display: flex; justify-content: space-between; gap: 9px; align-items: center; margin-bottom: 9px; }.r-meld-heading strong { font-size: 12px; }.r-meld-heading .button { font-size: 11px; min-height: 36px; padding: 8px 12px; }
.r-meld-cards { display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 9px; }
.r-meld-cards .playing-card { width: 59px; height: auto; aspect-ratio: 2 / 3; flex: none; border-radius: 7px; }
.r-meld-cards .card-corner { left: 5px; top: 5px; font-size: 9px; }.r-meld-cards .card-corner b { font-size: 14px; }.r-meld-cards .corner-bottom { left: auto; top: auto; right: 5px; bottom: 5px; }
.r-laid-card { flex: 0 0 59px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.r-laid-card>small { font-size: 10px; color: var(--muted); }.r-replace { min-height: 35px; padding: 7px 3px; font-size: 10px; border: 1px solid var(--accent); border-radius: 7px; color: var(--accent); width: 100%; }
.r-round-result { padding: 28px; border-radius: 21px; text-align: center; }.r-round-result h2 { font-size: 27px; margin-bottom: 13px; }.r-round-result p { font-size: 14px; }.r-round-result .result-actions { align-items: center; margin: 22px 0; }
.r-round-hands { text-align: left; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 17px; }.r-round-hands summary { cursor: pointer; font-size: 14px; }.r-round-hands>div { margin-top: 18px; }.r-round-hands strong { font-size: 12px; }
.r-pause-notice { position: sticky; bottom: 85px; z-index: 12; display: flex; align-items: center; flex-wrap: wrap; gap: 13px; padding: 20px; margin-top: 20px; border: 1px solid var(--accent); border-radius: 17px; background: var(--surface-raised); box-shadow: 0 10px 50px #0005; }.r-pause-notice p { font-size: 12px; margin-top: 5px; }.r-pause-notice .button { margin-left: auto; }
.game-picker { flex-wrap: wrap; }
@media (max-width: 760px) {
  .r-hand-panel { padding: 13px; }.r-hand { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 9px; }
  .r-hand-card .card-corner b { font-size: 20px; }.r-hand-card .card-corner { font-size: 12px; }
  .r-goal { padding: 16px 16px 13px; }.r-goal-heading { gap: 12px; }.r-goal h2 { font-size: 23px; }.r-round-number { font-size: 30px; }
  .r-seat { padding: 10px 12px; gap: 10px; min-height: 74px; }.r-seat-avatar { flex-basis: 36px; }.r-seat-avatar img { width: 36px; height: 36px; }
  .r-seat-identity > strong { font-size: 15px; }.r-opened-label { gap: 5px; }
  .r-workbench { --hand-dock-bottom: calc(73px + env(safe-area-inset-bottom)); }
  .r-workbench-head { padding-top: 6px; }
  .r-hand-sort button { min-height: 44px; min-width: 48px; padding-inline: 8px; }
  .r-selection-toolbar .text-button { min-height: 44px; }
  .r-hand-dock { padding: 2px 10px 10px; }
  .r-lobby { padding: 26px 15px; }.r-lobby h2 { font-size: 23px; }
  .r-piles { gap: 12px; }.r-pile { min-width: 120px; }.r-hand-label { gap: 7px; }.r-hand-label .r-hand-count { font-size: 10px; }
}
@media (max-width: 370px) {
  .r-seat { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .r-opened-label > svg:last-child { display: none; }
  .r-round-number { flex-direction: column; align-items: flex-end; gap: 5px; }
}
@media (max-width: 360px) {
  .r-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r-workbench .r-hand-label > div:first-child { flex-direction: column; gap: 2px; }
  .r-pile { min-width: 0; }
}

/* The shortcut belongs to the header, never to a layer over the game. */
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.site-header:has(.mobile-turn-guide) { gap: 12px; }
.header-actions:has(.mobile-turn-guide) .account-name { display: none; }
.mobile-turn-guide { --turn-tone: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-height: 44px; padding: 0 11px; border: 1px solid color-mix(in srgb,var(--turn-tone) 40%,var(--line)); border-radius: 14px; background: color-mix(in srgb,var(--turn-tone) 10%,var(--bg)); color: var(--text); white-space: nowrap; }
.mobile-turn-guide strong { font: 750 12px/1.2 Manrope,sans-serif; }
.mobile-turn-guide .turn-ready-dot { width: 5px; height: 5px; flex-basis: 5px; margin: 0; color: var(--turn-tone); opacity: 1; }
.mobile-turn-guide > svg { color: var(--turn-tone); }
.mobile-turn-guide:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.mobile-turn-guide:hover { background: color-mix(in srgb,var(--turn-tone) 17%,var(--bg)); }
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header:has(.mobile-turn-guide) nav { gap: 12px; }
  .site-header:has(.mobile-turn-guide) .nav-link { font-size: 12px; gap: 5px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .site-header:has(.mobile-turn-guide) .nav-link > .nav-symbol > svg { display: none; }
}
@media (max-width: 380px) {
  .site-header:has(.mobile-turn-guide) { gap: 6px; }
  .site-header:has(.mobile-turn-guide) .wordmark { font-size: 23px; gap: 6px; }
  .site-header:has(.mobile-turn-guide) .brand-icon { width: 26px; height: 26px; margin-right: 2px; }
  .header-actions { gap: 6px; }
  .mobile-turn-guide { gap: 5px; padding-inline: 8px; }
  .mobile-turn-guide strong { font-size: 11px; }
}
.connection-guide { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 28px); min-height: 48px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: var(--surface-raised); box-shadow: 0 8px 28px #0004; font-size: 13px; }
.r-hand, .r-piles, .r-buy-prompt, .b-hand, .your-hand { scroll-margin-top: 150px; }
@media (max-width: 760px) {
  .r-replace, .r-meld-heading .button, .r-dismiss, .r-open-notice-link, .remove-bot, .r-hand-label .text-button, .r-opening-heading .text-button { min-height: 44px; }
  .r-replace { font-size: 11px; }
  .r-hand-label .r-hand-count { font-size: 12px; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .game-layout { display: block; }
  .game-sidebar { margin-top: 28px; }
  .game-layout .b-hand { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.player-bot-badge { position: absolute; top: -4px; right: -4px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--surface); border-radius: 6px; background: #cfebe0; color: #173e33; box-shadow: 0 1px 4px #0003; }
.player-bot-badge svg { width: 12px; height: 12px; }
.r-seat-avatar, .mini-player-avatar { position: relative; }
.mini-player-avatar { display: inline-flex; flex-shrink: 0; }
.r-meld-owner > summary > .mini-player-avatar { margin: 0; }
.mini-player-avatar .player-bot-badge { top: -3px; right: -3px; width: 15px; height: 15px; border-radius: 5px; }
.mini-player-avatar .player-bot-badge svg { width: 10px; height: 10px; }

/* The default table keeps its existing layout. Compact is a personal, opt-in view. */
.r-market-zone { display: contents; }
.r-seat-laid { display: none; }
.is-compact .r-discard-event .r-latest-card-value { display: none; }
.r-sheet-error { color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; padding: 12px; margin-bottom: 14px; font-size: 14px; }
.r-layout-tools { display: flex; align-items: center; gap: 9px; }
.r-layout-switch { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.r-layout-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 13px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 600; }
.r-layout-switch button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent); }
.r-expand-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface-raised); }
.r-expand-button:hover { color: var(--text); border-color: var(--accent); }
.r-info-button { font-size: 13px; padding-inline: 12px; }
.rummy-board.is-compact { --r-compact-gap: 12px; padding-bottom: 20px; }
.is-compact > .table-header { padding: 18px 0 16px; }
.is-compact > .game-layout { display: block; }
.is-compact .table-column { display: grid; grid-template-columns: 250px minmax(0,1fr); grid-template-areas: 'status status' 'players players' 'goal goal' 'market melds' 'hand hand' 'pause pause'; gap: var(--r-compact-gap); align-items: start; }
.is-compact .table-status { grid-area: status; margin: 0; font-size: 12px; }
.is-compact .r-seating { grid-area: players; display: flex; gap: 8px; padding: 3px 1px 6px; border: 0; border-radius: 0; background: none; margin: 0; overflow-x: auto; scrollbar-width: thin; }
.is-compact .r-seat { flex: 1 0 175px; min-width: 0; gap: 10px; padding: 10px 12px; min-height: 72px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.is-compact .r-seat.active { border-color: var(--accent); background: linear-gradient(105deg,var(--accent-soft),var(--surface)); box-shadow: none; }
.is-compact .r-seat-avatar { flex-basis: 32px; }
.is-compact .r-seat-avatar img { width: 32px; height: 32px; }
.is-compact .r-seat-identity > strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-compact .r-seat-identity > small { font-size: 12px; margin-top: 3px; }
.is-compact .r-seat-collecting, .is-compact .r-opened { min-height: 40px; }
.is-compact .r-seat-collecting strong, .is-compact .r-opened small { display: none; }
.is-compact .r-opened strong { font-size: 12px; }
.is-compact .r-opened-label > svg:last-child { display: none; }
.is-compact .r-goal { grid-area: goal; margin: 0; padding: 11px 16px; border-radius: 19px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 18px; align-items: center; }
.is-compact .r-goal-heading { gap: 12px; grid-column: 1; grid-row: 1 / 3; }
.is-compact .r-goal .eyebrow { font-size: 9px; }
.is-compact .r-goal h2 { font-size: 19px; margin-top: 3px; }
.is-compact .r-round-number { font-size: 27px; }
.is-compact .r-goal-chips { display: none; }
.is-compact .r-goal-meta { display: flex; justify-content: flex-end; gap: 6px 12px; margin: 0; border: 0; padding: 0; }
.is-compact .r-goal-meta > span { font-size: 11px; }
.is-compact .r-progress { grid-column: 2; margin: 0; min-width: 185px; }
.is-compact .r-hand-panel { display: contents; }
.is-compact .r-hand-panel > .hand-heading { display: none; }
.is-compact .r-market-zone { grid-area: market; display: flex; flex-direction: column; padding: 13px; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); min-width: 0; }
.r-compact-turn { display: flex; align-items: center; gap: 7px; min-height: 29px; font-size: 13px; }
.r-compact-turn strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.r-compact-turn > span:last-child { color: var(--muted); font-size: 11px; white-space: nowrap; }
.r-compact-turn.is-mine { color: var(--accent); }
.is-compact .r-piles { margin: 0; padding: 13px 0; gap: 14px; }
.is-compact .r-pile { min-width: 0; flex: 1; padding: 4px; gap: 6px; }
.is-compact .r-pile .playing-card, .is-compact .r-empty-card { width: 64px; height: 96px; }
.is-compact .r-pile strong { font-size: 12px; margin: 4px 0 0; }
.is-compact .r-pile small, .is-compact .r-discard-author { font-size: 11px; line-height: 1.4; }
.is-compact .r-buy-interest { margin: 7px 0 0; padding: 9px; gap: 7px; flex-wrap: wrap; }
.is-compact .r-buy-interest > svg { display: none; }
.is-compact .r-buy-interest strong { font-size: 12px; }
.is-compact .r-buy-interest small { font-size: 11px; margin-top: 2px; }
.is-compact .r-buy-interest .button { font-size: 12px; padding: 7px 10px; }
.is-compact .r-discard-recap { margin: 11px 0 0; }
.is-compact .r-discard-recap > .eyebrow { font-size: 9px; letter-spacing: .7px; }
.is-compact .r-discard-event { padding: 7px 9px; gap: 9px; }
.is-compact .r-discard-event > .playing-card { flex-basis: 30px; width: 30px; height: 45px; }
.is-compact .r-discard-event small { display: none; }
.is-compact .r-discard-event strong { font-size: 12px; }
.r-table-overview { grid-area: melds; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); overflow: hidden; min-width: 0; }
.r-table-overview > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line); }
.r-table-overview > header > div { display: flex; gap: 9px; align-items: center; min-width: 0; }
.r-table-overview > header > div > svg { color: var(--r-mint); }
.r-table-overview header strong { font: 700 17px Manrope,sans-serif; }
.r-table-overview header span { color: var(--muted); font-size: 12px; }
/* Let vertical swipes continue on the page at either end of the embedded board.
   Full containment belongs to the expanded dialog, not this in-page preview. */
.r-overview-scroll { height: auto; max-height: 292px; overflow: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 10px; }
.r-overview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.r-overview-meld { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px 8px; padding: 9px 10px; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.r-overview-meld:hover { background: var(--surface-raised); border-color: color-mix(in srgb,var(--accent) 45%,var(--line)); }
.r-overview-owner { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.r-overview-owner strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.r-overview-owner small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.r-overview-cards { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 6px; padding: 2px 1px 5px; min-width: 0; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; }
.r-overview-cards .playing-card { width: 52px; height: auto; aspect-ratio: 2/3; border-radius: 5px; flex-shrink: 0; }
.r-overview-meld > svg { grid-column: 2; grid-row: 1; color: var(--muted); }
.r-overview-empty { display: flex; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--muted); font-size: 13px; }
.r-overview-empty > svg { color: var(--r-mint); opacity: .65; }
.is-compact .r-workbench { grid-area: hand; padding: 10px 15px 0; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); min-width: 0; }
.is-compact .your-turn .r-workbench { border-color: var(--accent); background: linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--accent) 6%,var(--bg))); }
.is-compact .r-workbench-head { position: static; background: none; padding: 0 0 5px; margin: 0 0 5px; border: 0; }
.is-compact .r-workbench .r-hand-label > div:first-child > strong { font-size: 20px; }
.is-compact .r-workbench .r-hand { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 10px 4px 15px; }
.is-compact .r-workbench .r-hand-card { flex: 0 0 88px; width: 88px; border-radius: 10px; }
.is-compact .r-workbench .r-hand-card.selected { z-index: 4; }
.is-compact .r-drafts { margin-top: 5px; padding-bottom: 6px; gap: 6px; }
.is-compact .r-drafts > button { min-height: 44px; min-width: 105px; padding: 6px 9px; gap: 7px; border-radius: 11px; }
.is-compact .r-drafts small { margin-top: 2px; }
.is-compact .r-draft-number { flex-basis: 22px; height: 22px; border-radius: 7px; }
.is-compact .r-hand-dock { position: static; margin: 0 -15px; padding: 0 15px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 23px 23px; background: var(--surface-raised); }
.is-compact .r-selection-toolbar { min-height: 37px; }
.is-compact .r-selection-toolbar .text-button { min-height: 37px; }
.is-compact .r-hand-dock .r-hand-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
.is-compact .is-opened .r-hand-dock .r-discard { grid-column: auto; }
.is-compact .r-hand-dock .button { min-height: 44px; font-size: 13px; }
.r-compact-decision { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.r-compact-decision strong { display: block; font-size: 14px; }
.r-compact-decision small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.r-turn-choice { margin-bottom:12px; padding:4px 0 12px; border-bottom:1px solid var(--line); }
.r-turn-choice .r-compact-decision { margin:0; padding:0; border:0; }
.r-turn-choice .r-draw-decision { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.r-turn-choice .r-draw-decision > .grow { grid-column:1 / -1; }
.r-turn-choice .button { min-height:44px; font-size:13px; padding:9px 12px; }
.r-buy-wait { display:flex; align-items:center; gap:10px; }
.r-buy-wait > svg { flex:none; color:var(--accent); }
.r-buy-wait > div > strong, .r-buy-wait > div > span { display:block; overflow-wrap:anywhere; }
.r-buy-wait strong { font-size:13px; }
.r-buy-wait > div > span { font-size:12px; color:var(--muted); line-height:1.5; margin-top:3px; }
.r-action-error { margin:8px 0; font-size:13px; color:var(--text); border-left:2px solid var(--accent); padding:8px 10px; }
.r-compact-decision.r-buy-prompt { background: none; border: 0; border-radius: 0; margin: 0; flex-wrap: nowrap; padding-bottom: 0; }
.r-decision-card > .playing-card { width: 38px; height: 57px; flex-shrink: 0; }
.r-compact-decision .r-buy-actions { width: auto; }
.is-compact .r-compact-decision .button { flex: 0 0 auto; padding: 10px 18px; }
.r-draw-open .playing-card { width: 24px; height: 36px; border-radius: 4px; }
.r-draw-decision { border-bottom: 1px solid var(--line); }
.r-request-decision { flex-wrap: nowrap; border-bottom: 1px solid var(--line); }
.r-request-decision.is-requested strong { color: var(--r-mint); }
.is-compact .r-workbench { scroll-margin-block: calc(var(--header-height) + 12px) 85px; }
.is-compact .r-overview-empty { min-height: 60px; }
.is-compact .r-table-overview:has(.r-overview-empty) .r-overview-scroll { height: 75px; }
.is-compact .r-compact-turn button { display: inline-flex; gap: 7px; align-items: center; text-align: left; min-height: 36px; min-width: 0; flex: 1; padding: 0; }
/* Status shares the hand heading; controls retain their own tap targets. */
.is-compact .r-hand-label > .turn-badge { margin-left: auto; }
@media(max-width:760px) {
  .is-compact .r-hand-label > .r-hand-tools { flex-basis: 100%; justify-content: flex-end; }
}
/* The hand cue supplies the heading; the draw controls keep their room for cards. */
.is-compact .r-draw-decision > .grow { display: none; }
.is-compact .r-workbench.hand-expanded .r-hand { display: grid; grid-template-columns: repeat(auto-fill,minmax(85px,1fr)); gap: 13px 10px; }
.is-compact .r-workbench.hand-expanded .r-hand-card { width: 100%; }
.is-compact .r-pause-notice { grid-area: pause; margin: 0; position: static; }
.is-compact .r-hand-panel > .r-hint { grid-column: 1 / -1; margin: 0; }
/* Scale the printed details with each card, including tiny purchase previews. */
.is-compact .playing-card { container-type: inline-size; }
.is-compact .playing-card .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.is-compact .playing-card .card-corner b { font-size: 23cqw; }
.is-compact .playing-card .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.is-compact .r-hand-card .card-corner { font-size: 17cqw; }
.is-compact .r-hand-card .card-corner b { font-size: 27cqw; }
.is-compact .playing-card .joker-label { font-size: 8cqw; letter-spacing: .02em; }
.is-compact .playing-card .classic-court b { font-size: 36cqw; }
.is-compact .playing-card .classic-court > span { font-size: 25cqw; }
.is-compact .card-back .back-frame { position: absolute; inset: 7%; height: auto; grid-template-columns: minmax(0,1fr); container-type: inline-size; }
.is-compact .card-back .back-mark { font-size: 60cqw; }
.is-compact .card-back .back-mark > span { font-size: .45em; top: -.08em; right: -.3em; }
.app-shell[data-back=syntax] .is-compact .card-back:not([data-back]) .back-mark,
.is-compact .card-back[data-back=syntax] .back-mark { font-size: 0; }
.r-compact-sheet { width: min(920px,calc(100% - 40px)); max-width: none; max-height: min(850px,calc(100dvh - 48px)); padding: 0; border: 1px solid var(--line); border-radius: 25px; color: var(--text); background: var(--bg); overflow: auto; overscroll-behavior: contain; box-shadow: var(--shadow); }
.r-compact-sheet::backdrop { background: #070910b3; backdrop-filter: blur(5px); }
.r-sheet-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.r-sheet-header h2 { font-size: 24px; margin-top: 3px; }
.r-sheet-header .eyebrow { font-size: 9px; }
.r-sheet-header .round-button { width: 44px; height: 44px; }
.r-sheet-content { padding: 16px 22px 24px; }
.r-compact-sheet .r-table-melds { margin: 0; }
.r-compact-sheet .r-table-melds > .section-heading { display: none; }
.r-compact-sheet .game-sidebar { display: block; padding: 0; }
.r-compact-sheet .activity-panel { display: block; }
.r-compact-sheet .game-sidebar > section { margin-bottom: 16px; }
.r-sheet-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); }
.r-sheet-selection > strong { font-size: 13px; }
.r-sheet-selection > div { display: flex; gap: 6px; overflow: auto; max-width: 100%; padding-bottom: 4px; }
.r-sheet-selection .playing-card { width: 37px; height: 55.5px; }
.r-sheet-selection > button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; font-size: 13px; }
.r-compact-sheet .r-laid-card { flex-basis: 66px; }
.r-compact-sheet .r-meld-cards .playing-card { width: 66px; }
.r-compact-sheet .r-replace { min-height: 44px; font-size: 11px; }
@media (min-width: 1200px) { .r-overview-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 1000px) and (min-width: 761px) {
  .is-compact .table-column { grid-template-columns: 205px minmax(0,1fr); }
  .r-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rummy-board .table-header:has(.r-layout-tools) { flex-wrap: wrap; }
  .r-layout-tools { flex-basis: 100%; justify-content: space-between; }
  .r-layout-switch { padding: 3px; }
  .r-layout-switch button { min-height: 44px; padding: 7px 12px; font-size: 12px; }
  .r-info-button { min-height: 44px; font-size: 12px; padding-inline: 10px; }
  .rummy-board.is-compact { --r-compact-gap: 9px; padding-bottom: 0; }
  .is-compact > .table-header { padding: 12px 0; gap: 8px; }
  .is-compact > .table-header h1 { font-size: 20px; }
  .is-compact .table-column { grid-template-columns: minmax(0,1fr); grid-template-areas: 'players' 'goal' 'market' 'melds' 'hand' 'pause'; }
  .is-compact .table-status { display: none; }
  .is-compact .r-seating { gap: 6px; padding-bottom: 4px; }
  .is-compact .r-seat { flex: 1 0 128px; min-height: 61px; padding: 8px; gap: 7px; position: relative; }
  .is-compact .r-seat-avatar { flex-basis: 28px; }
  .is-compact .r-seat-avatar img { width: 28px; height: 28px; }
  .is-compact .r-seat-identity > strong { font-size: 12px; max-width: 112px; }
  .is-compact .r-seat-identity > small { font-size: 11px; gap: 3px 6px; }
  .is-compact .r-seat-laid { display: inline-flex; gap: 4px; align-items: center; color: var(--r-mint); }
  .is-compact .r-seat-turn { font-size: 11px; }
  .is-compact .r-seat-turn::before { margin-right: 4px; }
  .is-compact .r-seat-collecting, .is-compact .r-opened { display: none; }
  .is-compact .r-seat.has-opened { border-bottom: 2px solid var(--r-mint); }
  .is-compact .r-goal { padding: 10px 12px; grid-template-columns: minmax(0,1fr); gap: 7px; border-radius: 18px; }
  .is-compact .r-goal-heading { grid-row: 1; }
  .is-compact .r-goal-heading h2 { font-size: 17px; margin: 0; }
  .is-compact .r-goal-heading .eyebrow { display: none; }
  .is-compact .r-round-number { font-size: 22px; flex-direction: row; align-items: baseline; }
  .is-compact .r-goal-meta { justify-content: space-between; gap: 6px; }
  .is-compact .r-goal-meta > span { font-size: 10px; }
  .is-compact .r-progress { display: none; }
  .is-compact .r-market-zone { display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 5px 12px; border-radius: 18px; padding: 8px 10px; }
  .r-compact-turn { grid-column: 1 / -1; min-height: 26px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .is-compact .r-piles { padding: 4px 0 0; border: 0; gap: 10px; justify-content: flex-start; }
  .is-compact .r-pile { flex: 0 0 auto; padding: 3px; gap: 3px; display: grid; grid-template-columns: 52px; align-content: start; }
  .is-compact .r-pile:nth-child(2) { grid-template-columns: 52px minmax(0,1fr); align-items: center; column-gap: 9px; flex: 1; min-width: 0; text-align: left; }
  .is-compact .r-pile .playing-card, .is-compact .r-empty-card { width: 52px; height: 78px; border-radius: 6px; grid-row: 1 / 4; }
  .is-compact .r-pile strong { display: none; }
  .is-compact .r-pile small { font-size: 11px; }
  .is-compact .r-pile:first-child small { display: none; }
  .is-compact .r-pile .r-discard-author { font-size: 11px; }
  .is-compact .r-buy-interest { grid-column: 1 / -1; grid-row: 3; margin: 3px 0 0; padding: 7px 8px; flex-wrap: nowrap; }
  .is-compact .r-discard-recap { margin: 0; padding: 4px 0 0 10px; border-left: 1px solid var(--line); align-self: center; }
  .is-compact .r-discard-recap .eyebrow { font-size: 8px; }
  .is-compact .r-discard-trail { margin: 4px 0 0; }
  .is-compact .r-discard-event { padding: 0; border: 0; background: none; gap: 6px; flex-wrap: wrap; }
  .is-compact .r-discard-event > .playing-card { display: none; }
  .is-compact .r-discard-event strong { font-size: 11px; }
  .is-compact .r-discard-event .r-latest-card-value { display: inline-flex; font-size: 16px; font-weight: 700; color: var(--text); }
  .is-compact .r-discard-event > div:last-child > span { font-size: 10px; }
  .r-table-overview { border-radius: 18px; }
  .r-table-overview > header { padding: 2px 7px 2px 12px; }
  .r-table-overview header strong { font-size: 14px; }
  .r-table-overview header span { font-size: 11px; }
  .r-table-overview > header .r-expand-button { border: 0; background: none; }
  .r-overview-scroll { max-height: 285px; padding: 7px; }
  .r-overview-grid { grid-template-columns: 1fr; gap: 7px; }
  .r-overview-meld { padding: 8px; border-radius: 11px; }
  .is-compact .r-workbench { padding: 7px 10px 0; border-radius: 19px; }
  .is-compact .r-workbench .r-hand-label > div:first-child > strong { font-size: 16px; }
  .is-compact .r-workbench .r-hand-label > div:first-child { gap: 5px; flex-direction: row; align-items: baseline; }
  .is-compact .r-workbench .r-hand-label > div:first-child > span { font-size: 11px; }
  .is-compact .r-hand-tools { gap: 0; }
  .is-compact .r-hand-sort { padding: 2px; }
  .is-compact .r-hand-sort button { min-width: 38px; padding-inline: 6px; min-height: 40px; font-size: 11px; }
  .is-compact .r-hand-tools .r-expand-button { border: 0; background: none; min-width: 36px; }
  .is-compact .r-help-toggle { width: 36px; flex-basis: 36px; }
  .is-compact .r-workbench .r-hand { display: grid; grid-template-columns: repeat(var(--compact-hand-columns),52px); grid-template-rows: repeat(2,105px); gap: 11px 0; padding: 10px 22px 14px 4px; }
  .is-compact .r-workbench .r-hand-card { width: 70px; flex-basis: 70px; }
  .is-compact .r-hand-dock { margin: 0 -10px; padding: 1px 10px 10px; bottom: calc(73px + env(safe-area-inset-bottom)); border-radius: 0 0 19px 19px; }
  .is-compact .r-selection-toolbar, .is-compact .r-selection-toolbar .text-button { min-height: 40px; }
  .is-compact .r-selection-toolbar { gap: 8px; flex-wrap: wrap; }
  .is-compact .r-selection-toolbar .text-button { font-size: 11px; }
  .is-compact .r-selection-toolbar > span { font-size: 11px; }
  .is-compact .r-hand-dock .button { font-size: 12px; }
  .r-compact-decision { gap: 7px; flex-wrap: wrap; }
  .r-compact-decision strong { font-size: 13px; }
  .r-compact-decision small { font-size: 10px; }
  .r-decision-card > .playing-card { width: 29px; height: 43.5px; }
  .is-compact .r-compact-decision .button { padding: 9px 11px; }
  .r-compact-decision .r-buy-actions { gap: 6px; }
  .r-draw-decision > .grow { flex-basis: 100%; }
  .r-draw-decision > .button { flex: 1!important; }
  .is-compact .r-workbench.hand-expanded .r-hand { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: none; gap: 12px 9px; padding-right: 4px; }
  .r-compact-sheet { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 16px); margin: auto 0 0; border-radius: 23px 23px 0 0; }
  .r-sheet-header { padding: 14px 16px; }
  .r-sheet-header h2 { font-size: 22px; }
  .r-sheet-content { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .r-sheet-selection { padding: 8px 10px; gap: 8px; }
  .r-sheet-selection .playing-card { width: 32px; height: 48px; }
  .r-sheet-selection > strong { font-size: 12px; }
  .r-compact-sheet .r-meld-heading .button { min-height: 44px; }
}
@media (max-width: 360px) {
  .is-compact .r-workbench .r-hand-label { flex-wrap: wrap; }
  .is-compact .r-workbench .r-hand-label > div:first-child { flex: 1; }
  .is-compact .r-workbench.hand-expanded .r-hand { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .r-compact-decision.r-buy-prompt { flex-wrap: wrap; }
  .r-compact-decision.r-buy-prompt .r-buy-actions { width: 100%; }
  .r-compact-decision.r-buy-prompt .button { flex: 1; }
}

/* The existing hand stays put; only the optional arranging controls are new. */
.r-workbench .r-hand-label { flex-wrap: wrap; gap: 8px; }
.r-workbench .r-hand-tools { margin-left: auto; }
.r-hand-sort .r-own-order[aria-pressed=true] { color: var(--accent); background: var(--accent-soft); }
.r-order-intro { display: flex; align-items: center; gap: 10px; margin: -4px 0 15px; padding: 11px 12px; border: 1px solid color-mix(in srgb,var(--r-mint) 28%,var(--line)); border-radius: 12px; background: color-mix(in srgb,var(--r-mint) 6%,var(--surface)); color: var(--r-mint); }
.r-order-intro > span { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.5; }
.r-order-intro strong { display: block; color: var(--text); font-size: 13px; }
.r-order-intro > small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.r-order-caption { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 10px; font-size: 12px; color: var(--muted); }
.r-order-caption .text-button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
.r-order-buttons { display: grid; grid-template-columns: 44px 44px minmax(0,1fr) minmax(64px,.6fr); gap: 8px; }
.r-order-buttons .button { min-height: 46px; min-width: 0; padding: 8px; font-size: 12px; gap: 6px; }
.r-workbench.is-arranging { overflow-anchor: none; }
.is-arranging .r-hand-card.selected .playing-card { outline-color: var(--r-mint); transform: none; }
.is-arranging .r-selected-mark { color: var(--bg); background: var(--r-mint); }
.r-plan-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; margin: 0 0 12px; background: var(--surface-raised); font-size: 12px; }
.r-plan-sync > span { flex: 1 1 180px; color: var(--muted); }
.r-plan-sync > button { min-height: 40px; color: var(--accent); font-weight: 650; }
@media(max-width:760px) {
  .r-order-buttons { gap: 6px; }
  .r-order-intro { margin-bottom: 9px; }
  .is-compact .r-order-intro { margin-top: 0; padding: 8px 10px; }
  .is-compact .r-order-controls { padding-top: 5px; }
  .r-order-gather { line-height: 1.25; }
}
@media(max-width:360px) {
  .r-order-buttons { grid-template-columns: 42px 42px minmax(0,1fr) 55px; gap: 5px; }
  .r-order-buttons .button { padding-inline: 4px; font-size: 11px; }
  .r-order-buttons .button:last-child > svg { display: none; }
}

/* Round results live in the browser's modal layer, above every table and nav. */
html:has(.round-result-dialog[open]) { overflow: hidden; }
.round-result-dialog {
  --result-mint: #a9dfcc;
  width: min(560px, calc(100% - 32px)); max-width: none;
  max-height: calc(100dvh - 40px); margin: auto; padding: 0;
  color: var(--text); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-radius: 28px; box-shadow: 0 32px 100px #0007;
  overflow: auto; overscroll-behavior: contain;
}
.round-result-dialog::backdrop { background: #080910cc; backdrop-filter: blur(7px); }
.round-result-dialog[open] { animation: result-arrival .24s ease-out; }
.round-result-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.round-result-game { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.round-result-game .game-emblem { width: 36px; height: 36px; }
.round-result-game small { display: block; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; margin-top: 2px; color: var(--muted); }
.round-result-top .round-button { flex-shrink: 0; width: 44px; height: 44px; }
.round-result-content { padding: 24px; background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%); }
.round-result-hero { text-align: center; padding: 0 2px 23px; }
.round-result-portraits { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto 23px; }
.round-result-portraits > img, .round-result-mark { width: 78px; height: 78px; border-radius: 25px; border: 1px solid color-mix(in srgb, var(--result-mint) 50%, transparent); background: var(--bg); padding: 3px; box-shadow: 0 5px 22px #0002; }
.round-result-portraits:has(img:nth-child(3)) > img { width: 60px; height: 60px; border-radius: 20px; }
.round-result-mark { display: grid; place-items: center; color: var(--result-mint); }
.round-result-medal { position: absolute; right: -7px; bottom: -10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--result-mint); color: #163e33; border: 3px solid var(--surface); }
.round-result-hero .eyebrow { font-size: 10px; letter-spacing: 1.7px; color: var(--accent); }
.round-result-hero h2 { font: 750 clamp(25px, 5vw, 34px)/1.18 Manrope, sans-serif; letter-spacing: -.9px; margin: 10px 0 12px; overflow-wrap: anywhere; text-wrap: balance; outline: none; }
.round-result-hero p { margin: 0 auto; max-width: 360px; color: var(--muted); font-size: 14px; line-height: 1.6; text-wrap: balance; }
.round-result-scores { border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--surface); }
.round-result-scores table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: right; font-variant-numeric: tabular-nums; }
.round-result-scores th, .round-result-scores td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.round-result-scores th:first-child { text-align: left; width: 60%; }
.round-result-scores thead th { padding-block: 10px; color: var(--muted); font-size: 10px; font-weight: 500; }
.round-result-scores tbody tr:last-child > * { border: 0; }
.round-result-scores .is-you { background: var(--accent-soft); }
.round-result-player { display: flex; align-items: center; gap: 10px; }
.round-result-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.round-result-avatar img { border-radius: 11px; }
.round-result-player > span:last-child { min-width: 0; }
.round-result-player strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.round-result-player small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; margin-top: 3px; }
.round-result-scores td { font-size: 17px; }
.round-result-scores td:last-child strong { display: inline-block; min-width: 36px; font-size: 19px; color: var(--result-mint); }
.round-result-footer { position: sticky; bottom: 0; z-index: 2; padding: 15px 24px 20px; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -9px 20px #0001; }
.round-result-footer .button { min-height: 46px; font-size: 14px; padding: 11px 15px; }
.round-result-secondary { display: flex; justify-content: center; gap: 8px; margin-top: 9px; }
.round-result-secondary > .button { flex: 1; }
.round-result-secondary .text-button { font-size: 12px; }
.round-result-wait { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
.round-result-wait svg { flex-shrink: 0; color: var(--accent); }
.round-result-wait span { overflow-wrap: anywhere; }
.round-result-error { color: var(--text); background: var(--accent-soft); padding: 10px 12px; margin: 0 0 12px; font-size: 13px; border-radius: 12px; }
.round-result-reopen { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; margin-block: 20px 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); text-align: left; font-size: 13px; }
.round-result-reopen > svg { color: var(--accent); flex-shrink: 0; }
.round-result-reopen > span { flex: 1; }
.round-result-reopen strong { font-size: 12px; color: var(--accent); }
.round-result-dialog.is-final .round-result-medal { background: #f1cc87; color: #664921; }
[data-theme=daylight] .round-result-dialog { --result-mint: #28695b; }
[data-theme=daylight] .round-result-medal { background: #bae2d3; }
@keyframes result-arrival { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .round-result-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 23px; }
  .round-result-top { padding: 11px 15px; }
  .round-result-content { padding: 20px 14px 16px; }
  .round-result-hero { padding-bottom: 18px; }
  .round-result-hero p { font-size: 13px; }
  .round-result-scores th, .round-result-scores td { padding-inline: 8px; }
  .round-result-scores th:first-child { width: 52%; }
  .round-result-scores th:last-child { width: 26%; }
  .round-result-player { gap: 8px; }
  .round-result-player strong { font-size: 12px; }
  .round-result-avatar img { width: 30px; height: 30px; }
  .round-result-scores td { font-size: 16px; }
  .round-result-scores td:last-child strong { font-size: 18px; }
  .round-result-footer { padding: 12px 15px 15px; }
}
@media (prefers-reduced-motion: reduce) { .round-result-dialog[open] { animation: none; } }

/* Each back is a complete vector drawing, legible at both thumbnail and table size. */
.card-back { --back-art: url('/assets/backs/signature-v2.svg'); --back-edge: #89799e; --back-base: #272337; }
:is(.app-shell[data-back=orbit] .card-back:not([data-back]), .card-back[data-back=orbit]) { --back-art: url('/assets/backs/orbit-v2.svg'); --back-edge: #6b929e; --back-base: #152b38; }
:is(.app-shell[data-back=argyle] .card-back:not([data-back]), .card-back[data-back=argyle]) { --back-art: url('/assets/backs/argyle-v2.svg'); --back-edge: #b89495; --back-base: #352a3c; }
:is(.app-shell[data-back=royal-chaos] .card-back:not([data-back]), .card-back[data-back=royal-chaos]) { --back-art: url('/assets/backs/royal-chaos-v2.svg'); --back-edge: #c2a06e; --back-base: #1f3448; }
:is(.app-shell[data-back=little-mischief] .card-back:not([data-back]), .card-back[data-back=little-mischief]) { --back-art: url('/assets/backs/little-mischief-v2.svg'); --back-edge: #dfc3a4; --back-base: #3c5c6c; }
:is(.app-shell[data-back=syntax] .card-back:not([data-back]), .card-back[data-back=syntax]) { --back-art: url('/assets/backs/syntax-v2.svg'); --back-edge: #719e87; --back-base: #163535; }
.app-shell[data-back] .playing-card.card-back { padding: 0; border: 1px solid var(--back-edge); background: var(--back-base); box-shadow: 0 3px 0 color-mix(in srgb, var(--back-base) 85%, #000), 0 5px 12px #0002; }
.back-art { position: absolute; inset: 0; border-radius: inherit; background-image: var(--back-art); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }

.theme-grid { gap: 20px; }
/* Show complete, correctly proportioned cards even on the narrowest phones. */
.deck-preview { padding: 24px 16px; gap: 8px; }
.deck-preview .playing-card { width: calc((100% - 16px) / 3); max-width: 124px; height: auto; aspect-ratio: 2 / 3; container-type: inline-size; }
.deck-preview .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.deck-preview .card-corner b { font-size: 22cqw; }
.deck-preview .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.deck-preview .classic-court b { font-size: 35cqw; }
.deck-preview .classic-court > span { font-size: 25cqw; }
.theme-choice { display: block; border-radius: 22px; transition: border-color .15s; }
.theme-scene { --scene-bg: #141619; --scene-panel: #202329; --scene-ink: #f5f4fa; --scene-muted: #b1afb9; --scene-accent: #bea8fa; --scene-contrast: #231b37; position: relative; isolation: isolate; overflow: hidden; height: 244px; margin: 9px; border-radius: 16px; padding: 17px; color: var(--scene-ink); background: var(--scene-bg); border: 1px solid #ffffff0c; }
.scene-daylight { --scene-bg: #f3f4f8; --scene-panel: #ffffff; --scene-ink: #232638; --scene-muted: #68697d; --scene-accent: #7652d6; --scene-contrast: #fff; border-color: #25213808; }
.scene-arcade { --scene-bg: #171125; --scene-panel: #2b203c; --scene-ink: #fff5ff; --scene-muted: #c4b3ce; --scene-accent: #dcfa79; --scene-contrast: #20280b; }
.scene-atmosphere { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 60%, #ad94e924, transparent 67%), repeating-linear-gradient(120deg, #ffffff02 0 1px, transparent 1px 5px); }
.scene-midnight .scene-atmosphere::after { content: ''; position: absolute; width: 220px; height: 220px; top: 25px; left: calc(50% - 110px); border: 1px solid #c3adee14; border-radius: 50%; box-shadow: 0 0 0 20px #c3adee04, 0 0 0 40px #c3adee03; }
.scene-daylight .scene-atmosphere { background: radial-gradient(ellipse at 10% 0, #eee3cd99, transparent 65%), linear-gradient(145deg, #fff, #e8e8f2); }
.scene-daylight .scene-atmosphere::after { content: ''; position: absolute; inset: -50%; transform: rotate(-32deg); background: repeating-linear-gradient(90deg, transparent 0 48px, #ffffff6b 48px 72px, transparent 72px 104px); }
.scene-arcade .scene-atmosphere { background: radial-gradient(ellipse at 60% 35%, #b074de40, transparent 65%); }
.scene-arcade .scene-atmosphere::after { content: ''; position: absolute; inset: 40% -25% -55%; transform: perspective(160px) rotateX(42deg); background: repeating-linear-gradient(0deg, transparent 0 23px, #cda8ed12 23px 24px), repeating-linear-gradient(90deg, transparent 0 29px, #cda8ed16 29px 30px); border-top: 1px solid #b892d42b; }
.scene-top, .scene-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scene-turn { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 650; padding: 6px 9px; background: var(--scene-panel); border: 1px solid color-mix(in srgb, var(--scene-accent) 15%, transparent); border-radius: 9px; }
.scene-turn i { width: 5px; height: 5px; border-radius: 50%; background: var(--scene-accent); }
.scene-light { color: var(--scene-accent); }
.scene-hand { position: absolute; inset: 54px 0 auto; display: flex; justify-content: center; align-items: center; }
.theme-scene .scene-hand .playing-card { flex: 0 0 70px; width: 70px; height: 105px; border-radius: 7px; container-type: inline-size; margin-inline: -8px; box-shadow: 0 3px 0 #d6d5df, 0 12px 18px #0002; }
.scene-hand .playing-card:first-child { transform: translate(-7px, 13px) rotate(-17deg); }
.scene-hand .playing-card:nth-child(2) { transform: translateY(0); z-index: 1; }
.scene-hand .playing-card:last-child { transform: translate(7px, 13px) rotate(17deg); }
.theme-scene .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.theme-scene .card-corner b { font-size: 22cqw; }
.theme-scene .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.theme-scene .classic-court b { font-size: 35cqw; }
.theme-scene .classic-court > span { font-size: 25cqw; }
.scene-bottom { position: absolute; left: 17px; right: 17px; bottom: 15px; }
.scene-you { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; }
.scene-you img { width: 30px; height: 30px; border-radius: 10px; }
.scene-you small { display: block; color: var(--scene-muted); font-size: 10px; font-weight: 450; }
.scene-action { display: grid; place-items: center; width: 37px; height: 32px; border-radius: 10px; color: var(--scene-contrast); background: var(--scene-accent); box-shadow: 0 3px 8px #0001; }
.theme-choice .theme-label { padding: 13px 20px 20px; }
.theme-choice .theme-label strong { font-size: 20px; letter-spacing: -.6px; }
.theme-choice .theme-label small { font-size: 12px; }
.theme-choice .choice-dot { flex-shrink: 0; }

.backs-grid { gap: 18px; }
.back-choice { isolation: isolate; overflow: hidden; padding: 26px 18px 21px; gap: 22px; border-radius: 22px; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--back-display-color, #b39bd9) 12%, transparent), transparent 72%), var(--surface); }
.back-choice[data-back=orbit] { --back-display-color: #8cbfca; }
.back-choice[data-back=argyle] { --back-display-color: #d9a69c; }
.back-choice[data-back=royal-chaos] { --back-display-color: #ddb779; }
.back-choice[data-back=little-mischief] { --back-display-color: #b9ccd7; }
.back-choice[data-back=syntax] { --back-display-color: #a4d4b1; }
.back-choice > .playing-card { width: 108px; height: 162px; border-radius: 10px; transform: rotate(-5deg); transition: transform .2s ease; }
.back-choice:nth-child(even) > .playing-card { transform: rotate(5deg); }
.back-caption { text-align: center; padding: 0 22px; }
.back-caption strong { display: block; font-size: 15px; }
.back-caption small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.4; }
.back-choice > .choice-dot { right: 15px; bottom: 25px; }
@media (hover:hover) { .back-choice:hover > .playing-card { transform: translateY(-4px) rotate(0); } .theme-choice:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } }
@media (max-width: 760px) {
  .theme-grid { gap: 12px; }
  .theme-choice { display: grid; grid-template-columns: minmax(125px, 43%) minmax(0, 1fr); align-items: center; border-radius: 19px; }
  .theme-scene { height: 166px; padding: 9px; margin: 7px; border-radius: 13px; }
  .scene-top { gap: 4px; }.scene-turn { font-size: 10px; padding: 4px 6px; gap: 4px; }.scene-light svg { width: 17px; height: 17px; }
  .scene-hand { top: 39px; }
  .theme-scene .scene-hand .playing-card { flex-basis: 45px; width: 45px; height: 67.5px; margin-inline: -9px; border-radius: 4px; }
  .scene-hand .playing-card:first-child { transform: translate(-3px, 8px) rotate(-17deg); }.scene-hand .playing-card:last-child { transform: translate(3px, 8px) rotate(17deg); }
  .scene-bottom { bottom: 10px; left: 10px; right: 10px; }.scene-you { gap: 5px; font-size: 10px; }.scene-you small { display: none; }.scene-you img { width: 23px; height: 23px; border-radius: 8px; }.scene-action { width: 25px; height: 24px; border-radius: 7px; }.scene-action svg { width: 15px; height: 15px; }
  .theme-choice .theme-label { padding: 12px 13px 12px 7px; gap: 7px; }
  .theme-choice .theme-label strong { font-size: 18px; }.theme-choice .theme-label small { font-size: 11px; line-height: 1.5; }
  .backs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .back-choice { padding: 21px 10px 15px; gap: 19px; border-radius: 18px; }
  .back-choice > .playing-card { width: 88px; height: 132px; border-radius: 9px; }
  .back-caption { padding: 0; }.back-caption strong { font-size: 13px; }.back-caption small { font-size: 10px; }
  .back-choice > .choice-dot { position: absolute; right: 9px; top: 9px; bottom: auto; width: 20px; height: 20px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .theme-choice, .back-choice > .playing-card { transition: none; } }

/* Personal card artwork only; table layout and game colours are unchanged. */
.playing-card[data-deck="blockcraft"] {
  --card: #f4f1e7;
  background: var(--card);
  color: #203c38;
  border: 1px solid #d6d7c6;
  box-shadow: 0 3px 0 #c9cbb9, 0 6px 12px #0002;
  container-type: inline-size;
}
.playing-card[data-deck="blockcraft"].red { color: #b5353e; }
.playing-card[data-deck="blockcraft"]::after {
  content: '';
  position: absolute;
  inset: 4%;
  border: 1px solid #355d412b;
  border-radius: 3px;
  pointer-events: none;
}
.playing-card[data-deck="blockcraft"]::before {
  content: '';
  position: absolute;
  inset: 8% 32%;
  background: linear-gradient(90deg, #40644b55 0 14%, transparent 14% 21%, #40644b22 21% 35%, transparent 35% 65%, #40644b22 65% 79%, transparent 79% 86%, #40644b55 86%);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: top;
  border-bottom: 2px solid #40644b33;
  pointer-events: none;
}
.playing-card[data-deck="blockcraft"] .card-corner { z-index: 2; top: 6%; left: 6%; font-size: 14cqw; gap: 2cqw; }
.playing-card[data-deck="blockcraft"] .card-corner b { font: 800 23cqw/.95 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; letter-spacing: -.08em; }
.playing-card[data-deck="blockcraft"] .corner-bottom { top: auto; left: auto; right: 6%; bottom: 6%; }
.blockcraft-suit { display: block; width: 13cqw; height: 14cqw; }
.blockcraft-figure { position: absolute; top: 14%; left: 13%; width: 74%; height: 72%; object-fit: contain; mix-blend-mode: darken; pointer-events: none; }
.playing-card[data-deck="blockcraft"].joker-card { color: #4b6827; }
.playing-card[data-deck="blockcraft"] .joker-label { font: 700 7cqw/1.1 'SFMono-Regular', Consolas, monospace; }
.deck-choice:has([data-deck="blockcraft"]) .deck-preview {
  background: radial-gradient(ellipse at 50% 105%, #8ecb6670, transparent 72%), linear-gradient(135deg, #183b35, #122723);
}
:is(.app-shell[data-back="blockcraft"] .card-back:not([data-back]), .card-back[data-back="blockcraft"]) {
  --back-art: url('/assets/backs/blockcraft-v1.svg');
  --back-edge: #8cab72;
  --back-base: #153b32;
  border-color: var(--back-edge);
  background: var(--back-base);
}

/* Illustrated faces retain the same corners, sizing and interactions as every deck. */
.playing-card[data-deck="sonic"] {
  --card: #faf9f2;
  background: var(--card);
  color: #204174;
  border: 1px solid #dddfdf;
  box-shadow: 0 3px 0 #cbd0d6, 0 6px 12px #0002;
}
.playing-card[data-deck="sonic"].red { color: #c13646; }
.playing-card[data-deck="sonic"]::after {
  content: '';
  position: absolute;
  inset: 4%;
  border: 1px solid currentColor;
  opacity: .17;
  border-radius: 5% / 3.333333%;
  pointer-events: none;
}
.playing-card[data-deck="sonic"] .card-corner { z-index: 2; }
.playing-card[data-deck="sonic"] .card-corner b { font-family: Manrope, sans-serif; font-weight: 800; }
.sonic-figure { position: absolute; top: 13%; left: 12%; width: 76%; height: 74%; object-fit: contain; pointer-events: none; }
.playing-card[data-deck="sonic"].joker-card { color: #8050a4; }
.deck-choice:has([data-deck="sonic"]) .deck-preview {
  background: radial-gradient(ellipse at 50% 100%, #4d89d95c, transparent 74%), linear-gradient(135deg, #172d51, #101b31);
}
.back-choice[data-back="sonic"] { --back-display-color: #467bcc; }
:is(.app-shell[data-back="sonic"] .card-back:not([data-back]), .card-back[data-back="sonic"]) {
  --back-art: url('/assets/backs/sonic-v1.webp');
  --back-edge: #bda76a;
  --back-base: #142c53;
  border-color: var(--back-edge);
  background: var(--back-base);
}

.action-cards { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; position: relative; pointer-events: none; }
.rummy-board .action-cards .playing-card { flex: 0 0 auto; width: 34px; height: 51px; border-radius: 5px; container-type: inline-size; }
.action-cards .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.action-cards .card-corner b { font-size: 22cqw; }
.action-cards .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.action-cards .joker-label { font-size: 8cqw; }
.action-cards .classic-court b { font-size: 35cqw; }
.action-cards .classic-court > span { font-size: 25cqw; }
.action-cards-stock { width: 42px; height: 54px; }
.action-cards-stock .playing-card:first-child { position: absolute; transform: translate(3px, -2px) rotate(7deg); }
.action-cards-stock .playing-card:last-child { position: relative; transform: translate(-2px, 2px) rotate(-5deg); }
.action-cards-buy > svg { flex-shrink: 0; color: var(--muted); }
.rummy-board .action-cards-buy .playing-card { width: 31px; height: 46.5px; }
.r-buy-prompt > .action-cards-buy { padding-block: 3px 6px; }
.rummy-board .r-draw-decision { gap: 10px; }
.rummy-board .r-draw-decision > .button { min-height: 68px; border-radius: 14px; justify-content: flex-start; gap: 11px; padding: 9px 14px; flex: 1; border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 5%, var(--surface-raised)), var(--surface-raised)); }
.r-draw-decision > .button > span:last-child { flex: 1; text-align: left; }
.r-hand-dock .r-hand-actions .r-card-action { min-height:48px; padding:10px; gap:7px; flex-wrap:nowrap; }
.r-card-action > svg { width:20px; height:20px; flex:none; }
.r-card-action > .r-action-label { font:inherit; line-height:1.2; white-space:nowrap; }
.r-card-action > .r-action-badge { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:22px; height:22px; padding:0 4px; border:1px solid color-mix(in srgb,currentColor 16%,transparent); border-radius:6px; background:color-mix(in srgb,currentColor 7%,transparent); font-size:11px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1; }
@media(max-width:760px),(max-height:600px) {
  .r-hand-dock .r-hand-actions .r-card-action { min-height:44px; padding:8px; gap:6px; }
}
.r-overview-owner { align-items: center; gap: 8px; }
.r-overview-owner > strong { flex: 1; }
.r-overview-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.r-overview-avatar > img { width: 23px; height: 23px; border-radius: 8px; }
.r-overview-avatar .bot-badge { width: 12px; height: 12px; right: -3px; top: -3px; border-width: 1px; }
.r-overview-avatar .bot-badge svg { width: 8px; height: 8px; }
.r-overview-meld { background: linear-gradient(125deg, color-mix(in srgb, var(--r-mint) 3%, var(--surface)), var(--surface)); }
.r-overview-owner small { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; }
.r-meld-owner > summary .mini-player-avatar { border-radius: 11px; }
.r-purchase-mark { position: absolute; bottom: -6px; right: -6px; min-width: 24px; height: 21px; display: grid; place-items: center; padding: 0 4px; border-radius: 8px; background: #a8dcc8; color: #173d32; border: 2px solid var(--surface); font-size: 10px; font-weight: 800; z-index: 3; animation: purchase-arrival .22s ease-out; }
@keyframes purchase-arrival { from { transform: translateY(3px) scale(.85); } to { transform: translateY(0) scale(1); } }
@media (hover:hover) {
  .r-draw-decision > .button:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
}
.r-draw-decision > .button:not(:disabled):active { transform: translateY(1px); }
@media (max-width: 760px) {
  .rummy-board .r-draw-decision { gap: 8px; }
  .rummy-board .r-draw-decision > .button { min-height: 65px; gap: 8px; padding: 8px 10px; font-size: 12px; }
  .rummy-board .r-draw-decision .action-cards .playing-card { width: 30px; height: 45px; }
  .r-draw-decision .action-cards-stock { width: 34px; height: 47px; }
  .is-compact .r-compact-decision.r-buy-prompt { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 10px; padding: 12px 0 2px; }
  .is-compact .r-compact-decision.r-buy-prompt .r-buy-actions { grid-column: 1 / -1; width: 100%; }
  .is-compact .r-compact-decision.r-buy-prompt .r-buy-actions .button { flex: 1; min-height: 44px; }
  .is-compact .r-overview-owner { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) { .r-purchase-mark { animation: none; } }

/* Keep confirmations in the existing toolbar, beside the hand, without another panel. */
.r-turn-avatar { position: relative; display: inline-flex; flex: 0 0 26px; width: 26px; height: 26px; }
.r-turn-avatar > img { width: 26px; height: 26px; border-radius: 9px; }
.r-turn-avatar .player-bot-badge { width: 12px; height: 12px; right: -3px; top: -3px; border-width: 1px; }
.r-turn-avatar .player-bot-badge svg { width: 8px; height: 8px; }
.turn-symbol.has-avatar { border-color: var(--line); background: var(--surface); }
.r-turn-mark { display: grid; place-items: center; flex-shrink: 0; }
.r-selection-toolbar > .r-move-feedback, .r-selection-toolbar > .r-waiting-cue { display: flex; align-items: center; gap: 6px; min-width: 0; }
.r-selection-toolbar > .r-move-feedback { color: var(--r-mint); }
.r-move-feedback > svg, .r-waiting-cue > svg { flex-shrink: 0; }
.r-feedback-copy, .r-waiting-cue > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-feedback-card { flex-shrink: 0; padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); color: var(--text); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.r-feedback-card.red { color: var(--red, #d95865); }
.r-move-feedback > small { flex-shrink: 0; font-size: 10px; color: var(--muted); }

/* Room discovery keeps the same surfaces, colours and card artwork as the table. */
.room-heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.room-heading-actions .button { min-height: 46px; }
.room-filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 24px; }
.room-filters > div { display: flex; flex-wrap: wrap; gap: 7px; }
.room-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.room-filters button[aria-pressed=true] { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.room-filters button small { display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border-radius: 7px; background: var(--surface-raised); color: var(--text); font-size: 12px; }
.room-filter-note { color: var(--muted); font-size: 13px; white-space: nowrap; }
.room-browser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.room-browser .room-card { position: relative; overflow: visible; border-radius: 22px; background: radial-gradient(ellipse at 5% 0, color-mix(in srgb, var(--accent) 6%, transparent), transparent 65%), var(--surface); }
.room-browser .room-card-link { display: flex; flex-direction: column; align-items: stretch; gap: 17px; height: 100%; padding: 24px; border: 0; margin: 0; border-radius: inherit; background: transparent; }
.room-card-top { display: flex; align-items: center; gap: 14px; min-width: 0; padding-right: 24px; }
.room-card-emblem { flex: none; }
.room-card-emblem .game-emblem { width: 54px; height: 54px; border-radius: 15px; }
.room-card-title { min-width: 0; }
.room-browser .room-card-title > small { display: block; color: var(--muted); font-size: 12px; margin: 0 0 5px; }
.room-browser .room-card-title > strong { display: block; font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
.room-card-state { display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: center; }
.room-browser .room-card-state > small { font-size: 12px; color: var(--muted); }
.room-state-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.state-playing, .state-lobby { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 23%, var(--line)); }
.state-finished { background: color-mix(in srgb, #a9ddc9 9%, var(--surface)); color: #a9ddc9; }
html[data-theme=daylight] .state-finished { color: #28634f; }
.state-paused { color: var(--text); background: var(--surface-raised); }
.room-card-people { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 1px 0 3px; }
.room-avatar-stack { display: flex; flex: none; padding-right: 4px; }
.room-avatar-stack > span { position: relative; flex: none; width: 35px; height: 35px; border: 2px solid var(--surface); border-radius: 12px; background: var(--surface); }
.room-avatar-stack > span + span { margin-left: -10px; }
.room-avatar-stack img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.room-avatar-stack .player-bot-badge { width: 13px; height: 13px; top: -5px; right: -2px; border-width: 1px; }
.room-avatar-stack .player-bot-badge svg { width: 9px; height: 9px; }
.room-participant-names { color: var(--muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.room-browser .saved-room-action { width: 100%; min-width: 0; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); justify-content: space-between; font-size: 14px; font-weight: 600; }
.room-browser .saved-room-action > svg { width: 31px; height: 31px; padding: 6px; border-radius: 50%; background: var(--accent-soft); }
.room-card-menu { position: absolute; top: 17px; right: 12px; z-index: 2; }
.room-card-menu > summary { width: 44px; height: 44px; display: grid; place-items: center; list-style: none; cursor: pointer; border-radius: 12px; color: var(--muted); }
.room-card-menu > summary::-webkit-details-marker { display: none; }
.room-card-menu[open] > summary { background: var(--surface-raised); color: var(--text); }
.room-card-menu > div { position: absolute; top: 48px; right: 0; padding: 6px; width: 213px; border: 1px solid var(--line); background: var(--surface-raised); border-radius: 12px; box-shadow: 0 12px 30px #0004; }
.room-card-menu button { width: 100%; justify-content: flex-start; padding-inline: 10px; color: var(--text); }
.room-card-menu .room-visibility-button { display: flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 7px; font-size: 13px; }
.room-card-menu .room-archive-button { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 7px 7px; color: var(--muted); }
.room-directory-menu { position: relative; margin-left: auto; flex: none; z-index: 4; }
.room-directory-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; list-style: none; cursor: pointer; color: var(--muted); }
.room-directory-menu > summary::-webkit-details-marker { display: none; }
.room-directory-menu > div { position: absolute; top: 50px; right: 0; width: 216px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px #0004; }
.room-filters .room-directory-menu button { width: 100%; border: 0; justify-content: flex-start; gap: 8px; font-size: 13px; color: var(--text); padding: 10px; }
.room-directory-menu button small { margin-left: auto; }
.hidden-rooms-note { display: flex; align-items: center; gap: 11px; margin: -2px 0 20px; color: var(--muted); }
.hidden-rooms-note strong { display: block; color: var(--text); font-size: 14px; }
.hidden-rooms-note small { display: block; margin-top: 4px; font-size: 12px; }
.room-empty { padding-block: 45px; }
.room-empty .button { margin-top: 19px; }
.room-invitation { max-width: 1040px; margin: 26px auto 50px; }
.invitation-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); margin-bottom: 14px; }
.invitation-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: var(--surface); }
.invitation-game { display: flex; flex-direction: column; justify-content: center; position: relative; padding: 36px; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 80%), var(--surface-raised); border-right: 1px solid var(--line); }
.invitation-game-rummy-house { background: radial-gradient(ellipse at 50% 60%, #579c791d, transparent 80%), var(--surface-raised); }
.invitation-game-borjesson { background: radial-gradient(ellipse at 50% 60%, #dcac581c, transparent 80%), var(--surface-raised); }
.invitation-game-heading { display: flex; align-items: center; gap: 12px; }
.invitation-game-heading .game-emblem { width: 48px; height: 48px; border-radius: 14px; }
.invitation-game-heading small { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1.3px; margin-bottom: 5px; }
.invitation-game-heading strong { font-size: 24px; }
.invitation-game > p { color: var(--text); font-weight: 600; font-size: 21px; line-height: 1.5; max-width: 290px; margin: 5px 0 9px; }
.invitation-game > small { font-size: 13px; color: var(--muted); }
.invitation-cards { position: relative; display: flex; justify-content: center; align-items: center; height: 245px; padding-top: 12px; }
.invitation-cards .playing-card { width: 98px; height: 147px; container-type: inline-size; flex: none; }
.invitation-cards .playing-card:first-child { transform: translate(20px, 8px) rotate(-13deg); }
.invitation-cards .playing-card:nth-child(2) { z-index: 1; transform: translateY(-6px); }
.invitation-cards .playing-card:nth-child(3) { transform: translate(-20px, 8px) rotate(13deg); }
.invitation-cards .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.invitation-cards .card-corner b { font-size: 22cqw; }
.invitation-cards .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.invitation-cards .joker-label { font-size: 8cqw; }
.invitation-cards .classic-court b { font-size: 35cqw; }
.invitation-cards .classic-court > span { font-size: 25cqw; }
.invitation-spark { position: absolute; right: 2%; top: 19%; color: var(--accent); font-size: 25px; }
.room-invitation .invitation-details { max-width: none; width: auto; margin: 0; padding: 35px; background: transparent; border: 0; border-radius: 0; text-align: left; }
.invitation-details > .eyebrow { display: block; overflow-wrap: anywhere; line-height: 1.6; font-size: 11px; }
.invitation-details h1 { font-size: 31px; line-height: 1.2; margin: 12px 0; letter-spacing: -.8px; }
.invitation-details .invitation-explanation { margin: 0; font-size: 14px; line-height: 1.7; }
.invitation-seats { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 14px; }
.invitation-seats > strong { font-size: 14px; }
.invitation-players { list-style: none; padding: 0; margin: 0 0 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.invitation-players > li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.invitation-avatar { flex: none; position: relative; }
.invitation-avatar > img { display: block; border-radius: 12px; }
.invitation-avatar .player-bot-badge { width: 15px; height: 15px; top: -4px; right: -3px; }
.invitation-avatar .player-bot-badge svg { width: 10px; height: 10px; }
.invitation-players li > span:last-child { min-width: 0; }
.invitation-players strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.invitation-players small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.room-invitation form { display: flex; flex-direction: column; gap: 12px; margin: 0; max-width: none; }
.room-invitation form label { font-size: 14px; font-weight: 600; margin: 0; }
.room-invitation form input { width: 100%; min-height: 48px; font-size: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 12px 14px; }
.room-invitation form .button { margin-top: 2px; min-height: 49px; }
.room-invitation .form-note { font-size: 12px; margin: 0; }
.invitation-next { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 20px; }
.invitation-next > .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }
.invitation-connection { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin-top: 18px; }
.invitation-connection svg { flex: none; margin-top: 3px; }
.invite-native-share { margin-bottom: 10px; }
@media (hover: hover) {
  .room-browser .room-card:has(.room-card-link:hover) { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
  .room-card-menu > summary:hover, .room-filters button:hover { background: var(--surface-raised); color: var(--text); }
}
@media (max-width: 1000px) {
  .room-card-people { align-items: flex-start; flex-direction: column; gap: 9px; }
  .room-card-title > strong { font-size: 19px; }
  .invitation-game { padding: 26px; }
  .room-invitation .invitation-details { padding: 28px; }
}
@media (max-width: 760px) {
  .room-heading-actions { width: 100%; }
  .room-heading-actions .button { flex: 1; padding-inline: 12px; font-size: 13px; white-space: nowrap; }
  .room-heading-actions .button:first-child { order: 1; }
  .room-filters { margin-bottom: 17px; }
  .room-filters > div { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .room-filters button { padding: 9px 6px; font-size: 12px; gap: 5px; flex-wrap: wrap; }
  .room-filters button > svg, .room-filter-note { display: none; }
  .room-filters .room-directory-menu button > svg { display: block; }
  .room-filters button small { min-width: 18px; height: 19px; font-size: 10px; }
  .room-browser-grid { grid-template-columns: 1fr; gap: 15px; }
  .room-browser .room-card-link { padding: 20px; gap: 15px; }
  .room-card-top { gap: 12px; }
  .room-card-emblem .game-emblem { width: 46px; height: 46px; }
  .room-browser .room-card-title > strong { font-size: 19px; }
  .room-card-menu { top: 12px; right: 9px; }
  .room-card-people { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 9px; }
  .room-participant-names { font-size: 12px; flex: 1; min-width: 100px; }
  .room-invitation { margin-top: 14px; }
  .invitation-layout { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .invitation-game { display: grid; grid-template-columns: minmax(0, 1fr) 126px; align-items: center; gap: 5px 0; padding: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .invitation-game-heading { gap: 9px; }
  .invitation-game-heading .game-emblem { width: 36px; height: 36px; border-radius: 11px; }
  .invitation-game-heading strong { font-size: 20px; }
  .invitation-game-heading small { font-size: 8px; letter-spacing: .6px; }
  .invitation-game > p { display: none; }
  .invitation-game > small { grid-column: 1; font-size: 11px; line-height: 1.5; }
  .invitation-cards { grid-column: 2; grid-row: 1 / 3; height: 90px; padding: 0; }
  .invitation-cards .playing-card { width: 47px; height: 70.5px; border-radius: 5px; }
  .invitation-cards .playing-card:first-child { transform: translate(10px, 5px) rotate(-13deg); }
  .invitation-cards .playing-card:nth-child(3) { transform: translate(-10px, 5px) rotate(13deg); }
  .invitation-spark { font-size: 13px; top: -4px; right: 0; }
  .room-invitation .invitation-details { padding: 23px 20px; }
  .invitation-details h1 { font-size: 27px; }
  .invitation-seats { margin-top: 20px; }
  .invitation-players { gap: 14px 12px; }
  .invitation-avatar > img { width: 32px; height: 32px; border-radius: 10px; }
  .invitation-players > li { gap: 8px; }
  .invitation-players strong { font-size: 12px; }
  .invitation-next { align-items: stretch; flex-direction: column; }
  .invitation-next .text-link { justify-content: center; }
}
@media (max-width: 360px) {
  .room-filters button small { display: none; }
  .room-browser .room-card-link { padding: 18px; }
  .invitation-game { grid-template-columns: minmax(0, 1fr) 103px; padding: 17px; }
  .invitation-game-heading .game-emblem { display: none; }
  .invitation-cards .playing-card { width: 41px; height: 61.5px; }
  .invitation-players { grid-template-columns: minmax(0, 1fr); }
}
/* One native control covers each game tile, including its illustration. */
.game-tile { position: relative; isolation: isolate; }
.game-tile .tile-visual { isolation: isolate; }
.game-tile .game-tile-action { transform: none; }
.game-tile-action::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 16px; }
.game-tile-action:focus-visible { outline: none; }
.game-tile:has(.game-tile-action:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }

@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/auth/google-sans.ttf') format('truetype'); }
.account-page { max-width: 1100px; margin: 0 auto; padding: 32px 0 60px; }
.account-back { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; padding: 10px 0; }
.account-back:hover { color: var(--text); }
.account-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 6vw, 85px); margin-top: 25px; }
.account-story { position: relative; padding: 24px 0; }
.account-story h1 { font-size: clamp(44px, 5.2vw, 68px); margin: 18px 0; letter-spacing: -.055em; }
.account-story h1 em { color: var(--accent); font-style: normal; }
.account-story > p { font-size: 17px; line-height: 1.65; }
.account-art { position: relative; isolation: isolate; height: 260px; max-width: 360px; margin: 15px 0 0; }
.account-art::before { content: ''; position: absolute; inset: 15px -30px -15px; z-index: -1; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%); }
.account-orbit { position: absolute; width: 240px; height: 240px; border: 1px solid color-mix(in srgb, var(--accent) 17%, transparent); border-radius: 50%; left: 45px; top: 0; }
.account-orbit.inner { inset: 29px auto auto 74px; width: 182px; height: 182px; border-style: dashed; opacity: .6; }
.account-art-card { position: absolute; top: 44px; filter: drop-shadow(0 12px 15px #0003); }
.account-art-card .playing-card { width: 99px; height: 148.5px; container-type: inline-size; }
.account-art-card.left { left: 31px; transform: rotate(-17deg); }
.account-art-card.right { left: 192px; transform: rotate(15deg); }
.account-hero-avatar { position: absolute; left: 104px; top: 76px; padding: 5px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 36px; background: var(--surface); box-shadow: 0 13px 34px #0005; }
.account-hero-avatar > img { display: block; width: 116px; height: 116px; border-radius: 30px; }
.account-hero-avatar > span { position: absolute; right: -6px; bottom: -6px; width: 29px; height: 29px; display: grid; place-items: center; border: 3px solid var(--surface); border-radius: 50%; background: var(--green); color: #143c30; }
.account-spark { position: absolute; color: var(--accent); font-size: 30px; }
.account-spark.one { left: 261px; top: 4px; }
.account-spark.two { left: 35px; top: 200px; font-size: 25px; }
.account-perks { display: flex; flex-wrap: wrap; gap: 12px 22px; padding-top: 4px; color: var(--muted); font-size: 12px; }
.account-perks > span { display: flex; align-items: center; gap: 7px; }
.account-perks svg { color: var(--accent); }
.account-panel { min-width: 0; padding: clamp(24px, 3vw, 38px); border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--line)); border-radius: 28px; background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--green) 6%, transparent), transparent 70%), var(--surface); box-shadow: 0 18px 60px #0002, inset 0 1px 0 #ffffff04; }
.account-kicker { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.account-panel h2 { font-size: clamp(24px, 2.5vw, 31px); line-height: 1.2; margin: 14px 0 12px; }
.account-intro { font-size: 14px; line-height: 1.7; }
.account-identity { display: flex; align-items: center; gap: 12px; margin: 25px 0; padding: 15px 0; border-block: 1px solid var(--line); }
.account-identity > img { border-radius: 17px; flex-shrink: 0; }
.account-identity > div { flex: 1; min-width: 0; }
.account-identity strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.account-identity small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.account-identity-mark { color: var(--green); flex-shrink: 0; }
.auth-providers { display: grid; gap: 12px; }
.auth-provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px; border-radius: 13px; font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface-raised)), var(--surface-raised)); box-shadow: inset 0 1px 0 #ffffff05; transition: border-color .18s, box-shadow .18s, background .18s; }
.auth-google img, .account-provider-icon img { display: block; flex-shrink: 0; width: 20px; height: 20px; object-fit: contain; }
@media (hover: hover) { .auth-provider:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); } }
.auth-provider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.auth-provider:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 12%, var(--surface-raised)); }
.account-divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; margin: 20px 0; }
.account-divider::before, .account-divider::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.account-guest { border: 1px solid var(--line); background: var(--surface-raised); border-radius: 13px; color: var(--text); min-height: 48px; }
.account-guest svg { color: var(--accent); }
.account-footnote { display: flex; align-items: flex-start; justify-content: center; gap: 6px; font-size: 11px; line-height: 1.6; margin-top: 19px; text-align: center; }
.account-footnote svg { margin-top: 2px; }
.account-unavailable { font-size: 12px; margin-top: 10px; }
.account-profile-form label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
.account-name-field { display: flex; gap: 8px; }
.account-name-field input { min-width: 0; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--text); font-size: 16px; }
.account-name-field .button { padding-inline: 17px; min-height: 46px; }
.account-save-status { display: block; color: var(--muted); font-size: 11px; padding-top: 8px; }
.account-connections { margin-top: 26px; }
.account-connections > .eyebrow { font-size: 10px; letter-spacing: .13em; }
.account-connection { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.account-provider-icon { display: flex; align-items: center; }
.account-connection strong { flex: 1; font-weight: 500; }
.account-connection > span:last-child { color: var(--green); display: flex; gap: 5px; align-items: center; font-size: 11px; }
.account-destinations { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
.account-destinations a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); font-size: 12px; }
.account-destinations a > svg:first-child { color: var(--accent); }
.account-destinations a > span { flex: 1; }
.account-destinations a:hover { border-color: var(--accent); }
.account-logout { display: flex; justify-content: center; margin-top: 20px; }
.account-logout button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; color: var(--muted); font-size: 12px; padding: 5px; }
.account-logout button:hover { color: var(--text); }
.account-notice { display: flex; gap: 10px; margin: -4px 0 24px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 14px; background: var(--accent-soft); }
.account-notice > svg { color: var(--accent); margin-top: 2px; }
.account-notice strong { font-size: 13px; }
.account-notice p { font-size: 12px; margin-top: 5px; line-height: 1.6; }
.invitation-login { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; padding: 14px 0 0; }
.invitation-login > span { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; }
@media (max-width: 760px) {
  .account-page { padding: 15px 0 28px; }
  .account-back { font-size: 12px; }
  .account-layout { grid-template-columns: 1fr; gap: 8px; margin-top: 0; }
  .account-story { min-height: 154px; padding: 22px 135px 22px 0; }
  .account-story > .eyebrow { font-size: 9px; letter-spacing: .12em; }
  .account-story h1 { font-size: 37px; margin: 12px 0 0; }
  .account-story > p, .account-perks { display: none; }
  .account-art { position: absolute; right: -3px; top: 15px; margin: 0; width: 330px; height: 240px; transform: scale(.44); transform-origin: top right; }
  .account-panel { padding: 25px 22px; border-radius: 23px; }
  .account-panel h2 { font-size: 27px; }
  .account-identity { margin: 20px 0; }
  .account-identity > img { width: 44px; height: 44px; border-radius: 14px; }
  .account-intro { font-size: 13px; }
}
@media (max-width: 359px) {
  .account-story { padding-right: 115px; }
  .account-story h1 { font-size: 33px; }
  .account-art { transform: scale(.37); top: 25px; }
  .account-panel { padding: 22px 17px; }
  .account-panel h2 { font-size: 24px; }
  .account-destinations a { padding: 12px 9px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .auth-provider { transition: none; } }

/* An existing member goes straight to the profile, without the sign-in introduction. */
.account-page.is-member { max-width: 620px; }
.is-member .account-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.is-member .account-story { min-height: 0; padding: 0; }
.is-member .account-story h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); }
.is-member .account-identity { margin-top: 0; padding-top: 0; border-top: 0; }
.is-member .account-save-status { min-height: 22px; }
.is-member .account-connections { margin-top: 18px; }
.account-back { min-height: 44px; }

/* Sharing and friends use the same surfaces, accents and generous card shapes as the table. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.share-modal{max-width:510px;padding:30px;border-radius:24px;overflow-x:hidden}
.share-modal .modal-close{top:19px;right:19px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;aspect-ratio:1}
.share-modal .eyebrow{font-size:9px;letter-spacing:1.6px;display:block;max-width:calc(100% - 24px);line-height:1.6}
.share-modal h2{font-size:32px;letter-spacing:-1.1px;margin:0 44px 22px 0}
.share-intro{margin:0 0 22px;font-size:15px;color:var(--muted)}
.share-preview{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:var(--bg);margin-bottom:20px}
.share-game-image{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block}
.share-room{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;background:linear-gradient(110deg,color-mix(in srgb,var(--green),transparent 94%),transparent)}
.share-room>div:first-child{min-width:0}.share-room strong{display:block;font-size:15px;overflow-wrap:anywhere}.share-room span{font-size:12px;color:var(--muted)}.share-room>div:first-child>span{display:block;margin-top:4px}
.share-avatars{display:flex;align-items:center;flex-shrink:0;padding-left:5px}.share-avatars img,.share-avatars>span{width:31px;height:31px;margin-left:-8px;border:2px solid var(--surface);border-radius:50%;background:var(--surface-raised);object-fit:cover;display:grid;place-items:center}.share-avatars>span{color:var(--green);border-style:dashed;margin-left:3px}
.share-actions a,.share-actions button{transition:border-color .16s,background .16s,transform .16s}
.share-whatsapp{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--green),transparent 58%);border-radius:15px;background:linear-gradient(120deg,color-mix(in srgb,var(--green),transparent 87%),color-mix(in srgb,var(--green),transparent 95%));text-decoration:none;color:var(--text)}
.share-channel-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:13px;background:#25d366;color:#073923;box-shadow:0 4px 15px #25d36612}
.share-whatsapp>span:nth-child(2){flex:1}.share-whatsapp strong{display:block;font-size:16px}.share-whatsapp small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.share-whatsapp>svg{color:var(--green)}
.share-whatsapp:hover{border-color:var(--green);background:color-mix(in srgb,var(--green),transparent 83%)}
.share-secondary{display:flex;gap:10px;margin-top:10px}.share-secondary button{display:flex;flex:1;align-items:center;justify-content:center;gap:9px;min-height:55px;border:1px solid var(--line);border-radius:13px;background:var(--surface-raised);font-size:14px;font-weight:600;padding:12px;color:var(--text)}.share-secondary button>svg{color:var(--accent)}.share-secondary button.is-copied{border-color:var(--green)}.share-secondary button.is-copied>svg{color:var(--green)}.share-secondary button:hover{border-color:var(--accent)}
.share-actions :focus-visible,.friend-actions :focus-visible,.friend-card button:focus-visible,.friend-stat-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.share-feedback{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;line-height:1.6;min-height:36px;text-align:center;margin:12px 0 0;color:var(--muted)}.share-feedback svg{flex-shrink:0;color:var(--green)}
.share-link-details{border-top:1px solid var(--line);margin-top:9px;padding-top:12px}.share-link-details summary{font-size:12px;color:var(--muted);cursor:pointer}.share-link-details input{display:block;width:100%;margin-top:13px;font-size:13px}.share-link-details small{display:block;color:var(--muted);font-size:11px;margin-top:9px}
.friends-page{max-width:1040px;margin:0 auto;padding-bottom:30px}.friends-back{display:inline-flex;align-items:center;gap:9px;margin-top:30px;font-size:13px;color:var(--muted)}
.friends-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 0 42px}.friends-heading .eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--green)}.friends-heading h1{font-size:clamp(34px,5vw,56px);letter-spacing:-2px;line-height:1.12;margin:13px 0}.friends-heading p{margin:0;color:var(--muted);font-size:16px}
.friends-hero-icon{position:relative;display:grid;place-items:center;width:104px;height:104px;flex-shrink:0;border-radius:30px;border:1px solid color-mix(in srgb,var(--accent),transparent 70%);background:linear-gradient(145deg,color-mix(in srgb,var(--accent),transparent 80%),var(--surface));color:var(--accent);transform:rotate(5deg)}.friends-hero-icon i{position:absolute;right:-9px;top:-13px;color:var(--green);font-size:35px;font-style:normal}
.friends-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 17px}.friends-section-title h2,.friend-requests h2,.friend-suggestions h2{font-size:23px;letter-spacing:-.6px;margin:0}.friends-section-title h2 span,.friend-requests h2 span{font-size:13px;vertical-align:middle;color:var(--muted);font-weight:500;margin-left:7px}.friends-section-title>span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.friends-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.friend-card{border:1px solid var(--line);border-radius:23px;overflow:hidden;background:radial-gradient(ellipse at 10% 0%,color-mix(in srgb,var(--green),transparent 91%),transparent 60%),var(--surface)}
.friend-identity{display:flex;align-items:center;gap:13px;min-width:0}.friend-identity img{flex-shrink:0;width:52px;height:52px;object-fit:cover}.friend-identity>div{min-width:0}.friend-identity strong{display:block;font-size:17px;overflow-wrap:anywhere}.friend-identity small{display:block;font-size:12px;margin-top:4px;color:var(--muted)}.friend-card>.friend-identity{padding:23px 23px 0}
.friend-score{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:12px;text-align:center;margin:25px 23px 0}.friend-score>div{min-width:0}.friend-score strong{font-size:55px;line-height:1.1;letter-spacing:-2px;font-variant-numeric:tabular-nums;font-weight:650}.friend-score>div:first-child strong{color:var(--accent)}.friend-score>div:last-child strong{color:var(--green)}.friend-score>div>span{display:block;overflow-wrap:anywhere;font-size:12px;color:var(--muted);margin-top:7px}.friend-versus{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;font-size:11px;color:var(--muted)}.friend-total{font-size:12px;color:var(--muted);text-align:center;margin:20px 0 24px}
.friend-stat-details{border-top:1px solid var(--line);margin:0 23px}.friend-stat-details>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;padding:17px 0;font-size:13px;font-weight:600}.friend-stat-details>summary::-webkit-details-marker{display:none}.friend-stat-details[open]>summary>svg{transform:rotate(90deg)}.friend-stat-details>p{font-size:12px;line-height:1.65;color:var(--muted);margin:10px 0 18px}.friend-stat-game{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.friend-stat-game>.game-emblem{width:38px;height:38px;flex-shrink:0}.friend-stat-game>div{flex:1;min-width:0}.friend-stat-game strong{display:block;font-size:14px}.friend-stat-game small{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:3px}.friend-stat-game>b{font-size:19px;letter-spacing:1px;white-space:nowrap}
.friend-card-footer{display:flex;align-items:center;gap:12px;min-height:45px;padding:7px 22px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg),transparent 45%)}.friend-card-footer>span{display:flex;align-items:center;gap:5px;flex:1;font-size:11px;color:var(--muted)}.friend-card-footer>span svg{color:var(--green)}.friend-card-footer button{min-width:32px;min-height:32px;font-size:12px;color:var(--muted)}
.friends-empty{border:1px solid var(--line);border-radius:23px;padding:38px 24px;text-align:center;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent),transparent 94%),transparent 75%),var(--surface)}.friends-empty-icon{display:grid;place-items:center;margin:0 auto 17px;width:65px;height:65px;border:1px solid color-mix(in srgb,var(--accent),transparent 70%);border-radius:20px;background:color-mix(in srgb,var(--accent),transparent 91%);color:var(--accent)}.friends-empty h2,.friends-empty h3{font-size:23px;letter-spacing:-.7px;margin:0}.friends-empty p{max-width:420px;margin:12px auto 23px;color:var(--muted);font-size:14px;line-height:1.7}.friends-empty .button{display:inline-flex}
.friend-requests{border:1px solid color-mix(in srgb,var(--accent),transparent 65%);border-radius:22px;padding:22px;background:color-mix(in srgb,var(--accent),transparent 96%)}.friend-connection{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}.friend-connection:last-child{border-bottom:0}.friend-actions{display:flex;align-items:center;gap:13px;flex-shrink:0}.friend-actions .button{font-size:13px;min-height:44px;padding:10px 14px}.friend-actions .text-link{font-size:12px;min-height:44px;padding:6px}.friend-suggestions{margin-top:38px}.friend-suggestions>p{font-size:14px;color:var(--muted);margin:7px 0 5px}.friends-note{display:flex;align-items:flex-start;justify-content:center;gap:7px;color:var(--muted);font-size:12px;line-height:1.6;margin:30px 0 0}.friends-note svg{flex-shrink:0;margin-top:2px}
@media(max-width:760px){.share-modal{padding:27px 20px 21px;width:calc(100vw - 24px);max-height:calc(100dvh - 36px);border-radius:23px}.share-modal h2{font-size:29px}.share-modal .eyebrow{font-size:8px;letter-spacing:1.2px}.share-intro{font-size:14px;margin-bottom:18px}.share-preview{margin-bottom:15px}.share-room{padding:13px}.share-room strong{font-size:14px}.share-avatars img,.share-avatars>span{width:27px;height:27px}.share-whatsapp{padding:12px}.share-secondary button{font-size:13px}.share-feedback{font-size:11px}.friends-back{margin-top:22px}.friends-heading{padding:26px 0 22px;gap:12px}.friends-heading .eyebrow{font-size:8px;letter-spacing:1px}.friends-heading h1{letter-spacing:-1.2px}.friends-heading p{font-size:14px;line-height:1.5}.friends-hero-icon{width:62px;height:62px;border-radius:21px}.friends-hero-icon>svg{width:30px}.friends-hero-icon i{font-size:24px;right:-3px;top:-10px}.friends-grid{grid-template-columns:1fr;gap:17px}.friends-section-title h2,.friend-suggestions h2,.friend-requests h2{font-size:21px}.friends-section-title>span{font-size:10px}.friend-requests{padding:18px}.friend-connection{flex-wrap:wrap;gap:12px}.friend-identity strong{font-size:16px}.friend-actions{margin-left:auto}.friend-suggestions .friend-connection{padding:17px 0}.friends-note{font-size:11px}.friend-card>.friend-identity{padding:20px 20px 0}.friend-score{margin-top:22px}.friend-score strong{font-size:50px}.friends-empty{padding:28px 18px}.friends-empty h2,.friends-empty h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.share-actions a,.share-actions button{transition:none}}
.friend-identity img{border-radius:16px}
.account-destinations a[href="/friends"]{grid-column:1/-1;background:linear-gradient(115deg,color-mix(in srgb,var(--accent),transparent 92%),var(--surface-raised))}
@media(max-width:359px){.share-secondary button{flex-direction:column;gap:6px;min-height:68px;padding:10px 7px}.share-secondary button span{white-space:nowrap}}

/* Friends are a destination, with adding and accepting before match statistics. */
.nav-symbol{position:relative;display:inline-flex;align-items:center;justify-content:center}
.friend-nav-count{position:absolute;top:-10px;right:-12px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--bg);border-radius:20px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:700;line-height:1}
.friends-toolbar{display:flex;align-items:center;gap:18px;margin:0 0 23px}.friends-toolbar>.button{min-height:48px;padding:12px 21px;gap:9px}.friends-toolbar>span{font-size:13px;color:var(--muted)}
.friends-feedback{font-size:13px;color:var(--green);line-height:1.5;margin:0 0 16px}.friends-feedback:empty{display:none}
.friend-requests{margin-bottom:20px}
.friend-discovery{padding:24px;border:1px solid color-mix(in srgb,var(--accent),transparent 64%);border-radius:23px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--accent),transparent 92%),transparent 75%),var(--surface);scroll-margin-top:110px}
.friend-discovery-heading{display:flex;gap:13px;align-items:center;margin-bottom:5px}.friend-discovery-heading>span{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--accent),transparent 88%);color:var(--accent);flex-shrink:0}.friend-discovery-heading h2{font-size:21px;letter-spacing:-.5px;margin:0;outline:none}.friend-discovery-heading h2:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:3px}.friend-discovery-heading p{font-size:13px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.friend-discovery .friend-actions .button{border-color:color-mix(in srgb,var(--accent),transparent 64%);background:color-mix(in srgb,var(--accent),transparent 89%);color:var(--text)}
.friend-guest-mark{color:var(--muted);padding:12px}.friend-guest .friend-identity small{line-height:1.5}.friend-discovery-empty{font-size:14px;line-height:1.6;color:var(--muted);margin:22px 0}
.friend-search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:0 13px;margin:20px 0 3px;background:var(--bg);color:var(--muted)}.friend-search input{background:none;border:0;color:var(--text);width:100%;min-width:0;padding:13px 0;font:inherit;font-size:16px;outline:none}.friend-search:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.friend-discovery-help{border-top:0;margin-top:8px;padding-top:4px}.friend-discovery-help>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:12px;list-style:none;cursor:pointer;font-size:13px;color:var(--muted)}.friend-discovery-help>summary::-webkit-details-marker{display:none}.friend-discovery-help p{font-size:13px;line-height:1.7;color:var(--muted);max-width:560px;margin:6px 0 10px}.friend-discovery-help .text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--accent)}
.friends-waiting{padding:22px;border:1px dashed var(--line);border-radius:18px;margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.player-friend-button{position:absolute;left:-9px;bottom:-9px;width:44px;height:44px;display:flex;align-items:flex-end;justify-content:flex-start;padding:4px;z-index:2;border:0;background:none;border-radius:50%;color:var(--accent)}
.player-friend-button>span{display:grid;place-items:center;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--accent),transparent 45%);border-radius:50%;background:var(--surface-raised);box-shadow:0 1px 4px #0003}.player-friend-button:hover>span{background:var(--accent);color:var(--accent-ink)}.player-friend-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mini-player-avatar:has(.player-friend-button){position:relative}
.player-friend-modal{max-width:370px;padding:30px 25px 25px;border-radius:24px}.player-friend-panel{text-align:center}.player-friend-portrait{position:relative;width:72px;margin:0 auto 20px}.player-friend-portrait>img{border-radius:22px;display:block}.player-friend-portrait>span{position:absolute;right:-7px;bottom:-5px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:3px solid var(--surface)}.player-friend-panel .eyebrow{font-size:8px;letter-spacing:1.2px;color:var(--green)}.player-friend-panel h2{font-size:25px;margin:10px 0 12px;overflow-wrap:anywhere}.player-friend-panel p{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 22px}.player-friend-panel .button{min-height:48px;font-size:14px}.player-friend-panel .friend-panel-status{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--green);font-weight:600;margin:18px 0}.player-friend-panel .friend-panel-note{font-size:13px;margin:0 0 9px}.player-friend-panel .text-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;margin-top:9px;font-size:13px;color:var(--muted)}
@media(min-width:761px) and (max-width:1100px){.site-header nav{gap:19px}.site-header .nav-link{font-size:13px}.site-header .account-name{display:none}}
@media(max-width:760px){.site-header nav{padding-left:3%;padding-right:3%;gap:0}.site-header .nav-link{flex:1;min-width:0;font-size:11px;min-height:54px}.site-header .nav-symbol{height:22px}.friend-nav-count{top:-7px;right:-13px}.friends-toolbar{gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}.friends-toolbar>.button{font-size:14px;flex-shrink:0;padding:12px 17px}.friends-toolbar>span{font-size:12px;line-height:1.5;max-width:115px}.friend-discovery{padding:18px}.friend-discovery-heading h2{font-size:20px}.friend-discovery-heading p{font-size:12px}.friend-discovery .friend-connection{gap:12px}.friend-discovery .friend-actions{width:100%;margin:0}.friend-discovery .friend-actions>.button{width:100%;justify-content:center;min-height:46px}.friend-guest{flex-wrap:nowrap}.friend-guest .friend-identity img{width:43px;height:43px}.friend-guest-mark{padding:5px}.friends-waiting{padding:18px}}

/* Compact directory: play stays at hand, detailed results open on demand. */
.friends-directory { display: flex; flex-direction: column; gap: 10px; }
.friends-directory .friend-row { border-radius: 18px; }
.friend-row-heading { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.friend-profile { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; min-height: 52px; background: none; border: 0; text-align: left; }
.friend-profile > img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 13px; }
.friend-profile > span { min-width: 0; }
.friend-profile strong { display: block; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.friend-profile small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 3px; }
.friend-profile small svg { flex: none; color: var(--accent); }
.friend-row-heading > .friend-play-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; min-height: 44px; flex: none; border: 1px solid color-mix(in srgb,var(--accent),transparent 65%); border-radius: 12px; background: color-mix(in srgb,var(--accent),transparent 93%); color: var(--accent); font-size: 12px; font-weight: 650; }
.friend-row.is-expanded { border-color: color-mix(in srgb,var(--accent),transparent 48%); }
.friend-row-results { border-top: 1px solid var(--line); }
.friend-row-results .friend-score { max-width: 430px; margin: 24px auto 0; padding: 0 22px; }
.friend-row-results .friend-card-footer { justify-content: flex-end; }
.friend-result-label { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; color: var(--muted); font-size: 11px; }
.friend-directory-search { margin: 0 0 16px; }
.friend-search-clear { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 0; padding: 0; background: none; color: var(--muted); }
@media(max-width:380px) { .friend-row-heading { padding: 11px; gap: 8px; } .friend-profile { gap: 9px; } .friend-row-heading > .friend-play-button { padding: 0 10px; } .friend-profile strong { font-size: 14px; } }

/* Direct invitations extend the existing share dialog and social surfaces. */
.invite-channel-choice{display:flex;gap:5px;background:var(--bg);padding:5px;border:1px solid var(--line);border-radius:14px;margin:0 0 13px}
.invite-channel-choice button{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;min-height:44px;border:1px solid transparent;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600}
.invite-channel-choice button[aria-pressed=true]{background:var(--surface-raised);border-color:color-mix(in srgb,var(--accent),transparent 66%);color:var(--text)}
.invite-channel-choice button[aria-pressed=true] svg{color:var(--accent)}
.share-modal:has(.invite-channel-choice) .share-game-image{max-height:150px;object-fit:cover}
.share-modal:has(.invite-channel-choice) .share-intro{margin-bottom:16px}
.invite-friend-picker{min-height:100px}
.invite-friend-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.invite-friend-row>img{width:42px;height:42px;border-radius:14px;flex-shrink:0}
.invite-friend-row>strong{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere;line-height:1.45}
.invite-friend-row>.button{min-height:44px;padding:10px 13px;gap:6px;font-size:12px;border-color:color-mix(in srgb,var(--accent),transparent 60%);background:color-mix(in srgb,var(--accent),transparent 92%);white-space:nowrap;flex-shrink:0}
.invite-friend-state{display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;min-height:44px;font-size:12px;color:var(--muted)}
.invite-friend-state.is-sent{color:var(--green)}
.invite-picker-note{font-size:12px;line-height:1.6;color:var(--muted);margin:15px 0 3px}
.invite-picker-feedback{color:var(--green);font-size:13px;line-height:1.6;margin:13px 0 0}.invite-picker-feedback:empty{display:none}
.invite-picker-error{color:var(--text);border:1px solid color-mix(in srgb,var(--accent),transparent 50%);border-radius:12px;padding:12px;font-size:13px;line-height:1.6;margin:13px 0 0}.invite-picker-error .text-link{display:block;min-height:44px;color:var(--accent)}
.invite-picker-empty{padding:19px 12px 12px;text-align:center}.invite-picker-empty>svg{display:block;margin:0 auto 13px;color:var(--accent)}.invite-picker-empty>strong{display:block;font-size:17px}.invite-picker-empty>p{color:var(--muted);font-size:13px;line-height:1.65;margin:9px auto;max-width:300px}.invite-picker-empty>.text-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:13px;color:var(--accent)}
.invite-friend-picker .friend-search{margin:5px 0}
.game-inbox{margin:0 0 32px;scroll-margin-top:115px}
.game-inbox-heading{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.game-inbox-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid color-mix(in srgb,var(--green),transparent 68%);border-radius:14px;background:color-mix(in srgb,var(--green),transparent 92%);color:var(--green)}
.game-inbox-heading .eyebrow{font-size:9px;letter-spacing:1.5px;color:var(--green)}.game-inbox-heading h2{font-size:24px;line-height:1.2;letter-spacing:-.6px;margin:5px 0 0}.game-inbox-heading h2>span{font-size:13px;vertical-align:middle;margin-left:5px;font-weight:500;color:var(--muted)}
.game-inbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.game-invite-card{display:grid;grid-template-columns:120px minmax(0,1fr);border:1px solid color-mix(in srgb,var(--green),transparent 63%);border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--green),transparent 93%),transparent 80%),var(--surface)}
.game-invite-art{position:relative;min-width:0;background:#101114;overflow:hidden}
.game-invite-art>img{display:block;width:100%;height:100%;object-fit:cover;object-position:87% center}
.game-invite-art>span{position:absolute;bottom:13px;left:8px;right:8px;background:#101114df;color:#f6f5fc;font-size:11px;font-weight:650;text-align:center;padding:7px 4px;border:1px solid #ffffff22;border-radius:20px;line-height:1.3}
.game-invite-body{padding:19px;min-width:0}
.game-invite-person{display:flex;align-items:center;gap:9px}.game-invite-person>img{width:38px;height:38px;border-radius:13px;flex-shrink:0}.game-invite-person>div{min-width:0;flex:1}.game-invite-person strong{display:block;font-size:14px;line-height:1.3;overflow-wrap:anywhere}.game-invite-person div>span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.game-invite-dot{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green),transparent 92%)}
.game-invite-body h3{font-size:19px;letter-spacing:-.4px;line-height:1.3;overflow-wrap:anywhere;margin:18px 0 6px}.game-invite-meta{font-size:12px;line-height:1.6;color:var(--muted);margin:0;overflow-wrap:anywhere}
.game-invite-actions{display:flex;align-items:center;gap:12px;margin-top:18px}.game-invite-actions>.button{min-height:46px;flex:1;gap:10px;font-size:14px;padding:10px 14px}.game-invite-actions>.text-link{min-height:44px;padding:8px 2px;color:var(--muted);font-size:12px}
.game-invite-notice{display:flex;align-items:center;gap:13px;max-width:650px;margin:24px 0 0;padding:13px 17px;border:1px solid color-mix(in srgb,var(--green),transparent 65%);border-radius:17px;background:linear-gradient(110deg,color-mix(in srgb,var(--green),transparent 91%),var(--surface));text-decoration:none;color:var(--text)}
.game-invite-notice>img{width:38px;height:38px;flex-shrink:0;border-radius:12px}.game-invite-notice>span{flex:1;min-width:0}.game-invite-notice strong{display:block;font-size:14px;line-height:1.45;overflow-wrap:anywhere}.game-invite-notice small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px}.game-invite-notice>svg{flex-shrink:0;color:var(--green)}
.invite-channel-choice button:focus-visible,.invite-friend-picker :focus-visible,.game-inbox button:focus-visible,.game-invite-notice:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:760px){.share-modal:has(.invite-channel-choice) .share-game-image{max-height:115px}.game-inbox{margin-bottom:26px;scroll-margin-top:95px}.game-inbox-grid{grid-template-columns:1fr;gap:14px}.game-inbox-heading h2{font-size:23px}.game-invite-card{grid-template-columns:100px minmax(0,1fr);border-radius:20px}.game-invite-body{padding:16px}.game-invite-body h3{font-size:18px;margin-top:15px}.game-invite-person strong{font-size:13px}.game-invite-actions{gap:10px;margin-top:15px}.game-invite-notice{margin-top:18px;padding:12px}.game-invite-notice strong{font-size:13px}}
@media(max-width:359px){.game-invite-card{grid-template-columns:76px minmax(0,1fr)}.game-invite-body{padding:13px}.game-invite-person>img{width:32px;height:32px;border-radius:10px}.game-invite-actions>.button{padding:10px;font-size:13px;gap:7px}.game-invite-dot{display:none}.invite-friend-row{gap:8px}.invite-friend-row>.button{padding:10px;font-size:11px}.invite-friend-row>strong{font-size:13px}.invite-friend-state{font-size:11px;gap:4px}}

/* Personal sharing stays inside the existing, collapsible Add friend panel. */
.personal-friend-link{margin:22px 0 18px;padding:22px;border-radius:19px;background:linear-gradient(115deg,color-mix(in srgb,var(--green),transparent 93%),var(--bg));border:1px solid color-mix(in srgb,var(--green),transparent 77%)}
.personal-link-heading{display:flex;align-items:center;gap:13px;margin-bottom:19px}.personal-link-mark{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;border-radius:14px;background:color-mix(in srgb,var(--green),transparent 90%);color:var(--green)}
.personal-link-heading h3{font-size:19px;letter-spacing:-.4px;margin:0}.personal-link-heading p{margin:5px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.personal-link-consent{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 0}.personal-link-actions{display:flex;gap:10px;flex-wrap:wrap}.personal-link-actions .button{min-height:48px;font-size:14px;gap:9px;padding:12px 18px}.personal-link-actions .personal-link-whatsapp{color:var(--green);border-color:color-mix(in srgb,var(--green),transparent 66%);background:color-mix(in srgb,var(--green),transparent 93%)}
.personal-link-details{margin-top:12px}.personal-link-details>summary{display:inline-flex;gap:8px;align-items:center;min-height:44px;cursor:pointer;font-size:12px;color:var(--muted);list-style:none}.personal-link-details>summary::-webkit-details-marker{display:none}.personal-link-details input{width:100%;min-width:0;font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:11px;color:var(--text);padding:13px}.personal-link-details p{font-size:12px;color:var(--muted);line-height:1.7;max-width:570px}.personal-link-details .text-link{min-height:44px;font-size:13px}.personal-link-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px}.personal-link-feedback{font-size:13px;line-height:1.6;color:var(--green);margin:10px 0 0}.personal-link-feedback:empty{display:none}.friend-fellow-title{font-size:13px;font-weight:600;color:var(--muted);margin:25px 0 0}
.friend-link-page{max-width:700px;margin:0 auto;padding-bottom:36px}.friend-link-welcome{text-align:center;position:relative;isolation:isolate;margin:24px auto 0;border:1px solid color-mix(in srgb,var(--accent),transparent 60%);border-radius:30px;padding:42px 36px 28px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent),transparent 87%),transparent 64%),var(--surface)}
.friend-link-welcome>.eyebrow{font-size:10px;letter-spacing:1.4px;color:var(--green)}.friend-link-portraits{position:relative;width:210px;height:140px;margin:32px auto 18px}.friend-link-host,.friend-link-placeholder{position:absolute;left:12px;top:7px;width:108px;height:108px;border-radius:31px;box-shadow:0 12px 35px #0002;transform:rotate(-7deg)}.friend-link-placeholder{display:grid;place-items:center;background:var(--surface-raised);color:var(--accent)}.friend-link-you{position:absolute;right:10px;top:37px;width:84px;height:84px;border:5px solid var(--surface);border-radius:28px;background:var(--surface-raised);color:var(--accent);display:grid;place-items:center;transform:rotate(7deg)}.friend-link-you img{width:100%;height:100%;border-radius:21px}.friend-link-join{position:absolute;bottom:16px;left:102px;display:grid;place-items:center;width:32px;height:32px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);color:var(--accent-ink)}.are-friends .friend-link-join{background:var(--green);color:var(--bg)}.friend-link-spark{position:absolute;right:15px;top:-4px;font-size:27px;color:var(--accent)}
.friend-link-welcome h1{font-size:clamp(29px,4vw,40px);letter-spacing:-1.1px;line-height:1.18;margin:0 auto 16px;max-width:440px;text-wrap:balance}.friend-link-intro{color:var(--muted);font-size:16px;line-height:1.7;max-width:430px;margin:0 auto 26px;overflow-wrap:anywhere}.friend-link-intro strong{color:var(--text);font-weight:600}.friend-link-next{max-width:380px;margin:auto;display:grid;gap:12px}.friend-link-next .button{font-size:15px;min-height:52px;gap:10px}.friend-link-next small{font-size:12px;color:var(--muted);line-height:1.65;overflow-wrap:anywhere}.friend-link-next .text-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:14px}.friend-link-perks{display:flex;align-items:center;justify-content:center;gap:22px;border-top:1px solid var(--line);margin-top:28px;padding-top:22px;color:var(--muted);font-size:12px}.friend-link-perks>span{display:flex;align-items:center;gap:7px}
@media(max-width:760px){.personal-friend-link{padding:17px 14px;margin:20px -3px 16px}.personal-link-heading{gap:10px}.personal-link-heading h3{font-size:17px}.personal-link-heading p{font-size:12px}.personal-link-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.personal-link-actions .button{padding:12px 8px;font-size:13px;gap:7px}.personal-link-actions>.button:last-child:nth-child(3){grid-column:1/-1}.friend-link-welcome{margin-top:18px;padding:30px 20px 23px;border-radius:25px}.friend-link-welcome>.eyebrow{font-size:8px;letter-spacing:1.2px}.friend-link-intro{font-size:15px}.friend-link-portraits{margin-top:27px}.friend-link-perks{gap:17px;font-size:11px}.personal-link-details input{font-size:16px}.personal-link-confirm{gap:8px}.personal-link-confirm>span{width:100%}}
@media(max-width:359px){.personal-link-heading .personal-link-mark{display:none}.personal-link-actions .button{font-size:12px}.friend-link-welcome{padding:27px 16px 21px}.friend-link-welcome h1{font-size:28px}.friend-link-perks{gap:12px;font-size:10px}}

/* One action on the existing friend card; the game choices open on demand. */
.friend-card-footer .friend-play-button{display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 13px;margin-right:auto;border:1px solid color-mix(in srgb,var(--accent),transparent 65%);border-radius:12px;background:color-mix(in srgb,var(--accent),transparent 91%);color:var(--text);font-size:13px;font-weight:650}
.friend-play-button>svg{color:var(--accent)}.friend-card-footer .friend-play-button:hover{background:color-mix(in srgb,var(--accent),transparent 82%);border-color:var(--accent)}
.friend-card-footer>button:last-child{min-width:44px;min-height:44px}
.modal.friend-game-modal{max-width:450px;padding:28px;border-radius:25px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--green),transparent 92%),transparent 55%),var(--surface);overscroll-behavior:contain}
.friend-game-modal h2{font-size:30px;letter-spacing:-1px;margin:11px 0 15px}
.friend-game-modal .eyebrow{color:var(--green);letter-spacing:1.6px}
.friend-game-modal .modal-close{width:40px;height:40px;top:12px;right:12px}
.friend-game-person{display:flex;align-items:center;gap:10px;margin-bottom:20px;min-width:0;font-size:14px;color:var(--muted)}
.friend-game-person img{flex-shrink:0;object-fit:contain}.friend-game-person strong{color:var(--text);overflow-wrap:anywhere}
.friend-game-options{display:grid;gap:9px}
.friend-game-options>button{display:flex;align-items:center;gap:13px;min-width:0;text-align:left;padding:11px 13px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--text);transition:background .15s,border-color .15s}
.friend-game-options>button[aria-pressed=true]{background:color-mix(in srgb,var(--accent),transparent 90%);border-color:var(--accent)}
.friend-game-options>button:hover:not(:disabled){border-color:var(--accent)}
.friend-game-options .game-emblem{width:45px;height:45px;flex-shrink:0}
.friend-game-options>button>span:nth-child(2){flex:1;min-width:0}.friend-game-options strong{display:block;font-size:16px}.friend-game-options small{display:block;font-size:12px;margin-top:4px;color:var(--muted)}
.friend-game-check{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;border:1px solid var(--line);border-radius:50%}
[aria-pressed=true]>.friend-game-check{background:var(--accent);color:var(--accent-ink,#191226);border-color:var(--accent)}
.friend-game-settings{margin-top:15px;border-bottom:1px solid var(--line)}
.friend-game-settings summary{display:flex;align-items:center;gap:6px;min-height:46px;font-size:13px;cursor:pointer;list-style:none;color:var(--text)}
.friend-game-settings summary::-webkit-details-marker{display:none}
.friend-game-settings summary span{font-size:11px;color:var(--muted);margin-left:auto;text-align:right}.friend-game-settings summary>svg{flex-shrink:0;color:var(--muted);transform:rotate(90deg)}
.friend-game-settings[open] summary>svg{transform:rotate(-90deg)}
.friend-game-fields{padding:14px 0 4px}.friend-game-fields input{font-size:16px}
.friend-game-jokers{padding:0;border:0;margin:0 0 18px;min-width:0}.friend-game-jokers legend{padding:0 0 9px;font-size:13px;font-weight:550}
.friend-game-jokers>div{display:flex;gap:9px}.friend-game-jokers label{flex:1;position:relative;margin:0;cursor:pointer}
.friend-game-jokers label>span{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.friend-game-jokers label:has(:checked)>span{border-color:var(--accent);background:var(--accent-soft)}.friend-game-jokers svg{color:var(--accent)}
.friend-game-jokers input,.friend-game-hints input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.friend-game-jokers label:has(:focus-visible)>span,.friend-game-hints:has(:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.modal .friend-game-hints{position:relative;flex-direction:row;align-items:center;gap:15px;min-height:48px;cursor:pointer;margin-bottom:12px}
.friend-game-hints>span{flex:1;min-width:0}.friend-game-hints strong{font-size:13px;font-weight:550}.friend-game-hints small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:4px}
.friend-game-hints i{position:relative;width:40px;height:24px;flex-shrink:0;border:1px solid var(--line);background:var(--bg);border-radius:20px;pointer-events:none}
.friend-game-hints i:before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--muted)}
.friend-game-hints:has(:checked) i{background:var(--accent);border-color:var(--accent)}.friend-game-hints:has(:checked) i:before{left:19px;background:var(--accent-ink)}
.friend-game-submit{padding-top:15px}.friend-game-submit p{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 14px}
.friend-game-submit .button{min-height:48px}
.friend-game-modal :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:500px){
  .modal.friend-game-modal{padding:24px 19px;max-height:calc(100dvh - 24px);width:calc(100vw - 24px)}
  .friend-game-modal h2{font-size:27px}.friend-game-person{margin-bottom:16px}
  .friend-game-options>button{padding:10px;gap:10px}.friend-game-options strong{font-size:15px}.friend-game-options small{font-size:11px}
  .friend-game-options .game-emblem{width:40px;height:40px}
  .friend-game-settings summary span{max-width:155px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.friend-game-options>button{transition:none}}

.modal.seat-manager-modal{max-width:455px;border-radius:25px;padding:28px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--green),transparent 91%),transparent 55%),var(--surface);overscroll-behavior:contain}
.seat-manager-modal .eyebrow{color:var(--green);letter-spacing:1.4px}.seat-manager-modal h2{font-size:27px;letter-spacing:-.8px;padding-right:15px;overflow-wrap:anywhere}
.seat-manager-modal .modal-close{width:40px;height:40px;right:10px;top:10px}
.seat-avatar{position:relative;display:inline-flex;flex-shrink:0}.seat-avatar img{object-fit:contain}.seat-avatar .bot-badge{right:-3px;top:-3px}
.seat-list{display:grid;gap:8px;margin-top:22px}.seat-list>button,.seat-choices>button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);border-radius:15px;padding:12px;background:var(--bg);color:var(--text);min-height:64px}
.seat-list>button>span:nth-child(2),.seat-choices>button>span{flex:1;min-width:0}.seat-list strong,.seat-choices strong{display:block;font-size:14px;overflow-wrap:anywhere}.seat-list small,.seat-choices small{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.5}
.seat-list>button>svg,.seat-choices>button>svg{flex-shrink:0;color:var(--accent)}.seat-list>button:hover,.seat-choices>button:hover{border-color:var(--accent);background:var(--accent-soft)}
.seat-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:13px;color:var(--muted)}
.seat-person{display:flex;gap:15px;align-items:center;padding:17px 0 22px}.seat-person strong{display:block;font-size:14px}.seat-person small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.seat-choices{display:grid;gap:9px}.seat-confirm h3{font-size:19px;letter-spacing:-.4px;margin:0 0 12px}.seat-confirm>p{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 18px}
.seat-levels{display:flex;gap:9px;margin:20px 0}.seat-levels button{flex:1;min-height:45px;border:1px solid var(--line);background:var(--bg);border-radius:12px;color:var(--text);font-size:14px}.seat-levels [aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
p.seat-note{font-size:12px;color:var(--muted);line-height:1.6;margin:17px 0}.seat-feedback:empty{display:none}.seat-feedback{color:var(--green);font-size:13px;line-height:1.6;margin:15px 0 0}
.seat-share-actions{display:flex;gap:8px;flex-wrap:wrap}.seat-share-actions .button{flex:1;font-size:13px;gap:7px;padding:12px 10px;min-height:47px;white-space:nowrap}.seat-share-actions a>svg{color:var(--green)}
.seat-cancel-link{min-height:44px;margin-top:14px;font-size:12px;color:var(--muted)}#seat-share-link{width:100%;margin-top:12px;font-size:16px}
.seat-manager-modal :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.r-resume-panel{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid color-mix(in srgb,var(--accent),transparent 45%);border-radius:20px;background:linear-gradient(115deg,var(--accent-soft),var(--surface));margin-bottom:18px}
.r-resume-symbol{display:grid;place-items:center;color:var(--accent);width:43px;height:43px;flex-shrink:0;border:1px solid color-mix(in srgb,var(--accent),transparent 60%);border-radius:13px}.r-resume-panel>div{flex:1;min-width:0}.r-resume-panel strong{font-size:16px}.r-resume-panel p{font-size:13px;color:var(--muted);line-height:1.5;margin:5px 0 0}.r-resume-panel .button{font-size:13px;min-height:46px}.r-resume-wait{font-size:13px;color:var(--muted)}
.seat-link-page{max-width:470px;margin:40px auto}.seat-link-welcome{padding:30px;border:1px solid var(--line);border-radius:25px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--green),transparent 90%),transparent 65%),var(--surface)}
.seat-link-welcome>.game-emblem{display:block;width:66px;height:66px;margin-bottom:24px}.seat-link-welcome .eyebrow{font-size:10px;color:var(--green);letter-spacing:1.7px}.seat-link-welcome h1{font-size:34px;line-height:1.16;letter-spacing:-1px;margin:12px 0 18px}.seat-link-welcome>p{font-size:14px;color:var(--muted);line-height:1.7}.seat-link-welcome>p strong{color:var(--text)}
.seat-link-summary{display:flex;gap:17px;align-items:center;border:1px solid var(--line);border-radius:17px;padding:17px;background:var(--bg);margin:22px 0}.seat-link-summary .playing-card{width:57px!important;min-width:57px!important;height:auto!important;aspect-ratio:2/3;flex-shrink:0}.seat-link-summary>div{min-width:0}.seat-link-summary strong{display:block;font-size:15px}.seat-link-summary span{display:block;font-size:13px;color:var(--green);margin:8px 0}.seat-link-summary small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.seat-link-welcome label{display:grid;gap:8px;font-size:13px;margin:0 0 18px}.seat-link-welcome input{font-size:16px;width:100%}.seat-link-welcome .text-link{font-size:12px;display:inline-flex;align-items:center;gap:7px;min-height:44px}
@media(max-width:600px){.modal.seat-manager-modal{padding:24px 20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.seat-manager-modal h2{font-size:24px}.r-resume-panel{padding:16px;gap:12px;flex-wrap:wrap}.r-resume-panel>.button,.r-resume-wait{width:100%}.r-resume-panel strong{font-size:15px}.r-resume-panel p{font-size:12px}.seat-link-page{margin:24px auto}.seat-link-welcome{padding:23px 18px}.seat-link-welcome h1{font-size:29px}}
@media(max-width:360px){.seat-link-welcome>.game-emblem{width:44px;height:44px;margin-bottom:16px}.seat-link-summary{padding:13px;gap:13px;margin:18px 0}.seat-link-welcome h1{font-size:27px;margin:10px 0 14px}}

[data-reaction-player]{position:relative}
[data-reaction-player].is-reacting>img{outline:2px solid var(--green);outline-offset:3px}
.reaction-trigger{position:absolute;left:-9px;bottom:-9px;display:flex;align-items:flex-end;justify-content:flex-start;width:44px;height:44px;padding:4px;border:0;background:none;color:var(--accent);z-index:3;touch-action:manipulation}
.reaction-trigger>span{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent),var(--line) 35%);border-radius:50%;background:var(--surface);box-shadow:0 2px 7px #0003}
.reaction-trigger.is-muted{color:var(--muted)}.reaction-trigger:hover>span,.reaction-trigger[aria-expanded=true]>span{background:var(--accent-soft);border-color:var(--accent)}
.reaction-trigger:focus-visible{outline:none}.reaction-trigger:focus-visible>span{outline:2px solid var(--accent);outline-offset:2px}.reaction-trigger svg{width:15px;height:15px}
.reaction-picker,.reaction-bubble{position:fixed;inset:auto;margin:0;box-sizing:border-box;color:var(--text);background:var(--surface);border:1px solid color-mix(in srgb,var(--accent),var(--line) 50%);box-shadow:0 10px 32px #0004;max-width:calc(100vw - 24px)}
.reaction-picker{padding:12px;border-radius:19px;max-height:calc(100dvh - 150px);overflow:auto;overscroll-behavior:contain}
.reaction-picker::backdrop{background:transparent}.reaction-picker:not(:popover-open),.reaction-bubble:not(:popover-open){display:none}
.reaction-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:3px}.reaction-picker-heading strong{font-size:13px;font-weight:650}
.reaction-close{border:0;background:none;color:var(--muted);width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:10px}
.reaction-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:3px 0 11px}
.reaction-choices>button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;min-height:80px;padding:4px 0 7px;border:1px solid transparent;background:transparent;color:var(--text);border-radius:13px;touch-action:manipulation}
.reaction-choices>button>span:last-child{font-size:12px;line-height:1.4;font-weight:600;white-space:nowrap}
.reaction-choices>button:hover:not(:disabled),.reaction-choices>button:focus-visible{background:var(--accent-soft);border-color:var(--accent)}.reaction-choices>button:disabled{opacity:.42;cursor:default}
.reaction-art{display:block;flex-shrink:0;width:57px;height:57px;background-repeat:no-repeat;background-size:200% 200%;border-radius:10px}
.reaction-preference{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:4px 3px 0;color:var(--muted);font-size:11px}
.reaction-preference>button{width:46px;height:36px;border:0;background:transparent;display:grid;place-items:center;padding:0}.reaction-preference>button>span{display:block;width:31px;height:18px;background:var(--line);border-radius:20px;padding:3px}.reaction-preference>button>span:after{content:'';display:block;width:12px;height:12px;border-radius:50%;background:var(--text)}.reaction-preference>[aria-checked=true]>span{background:var(--accent)}.reaction-preference>[aria-checked=true]>span:after{transform:translateX(13px);background:var(--accent-ink,#191523)}
.reaction-error{font-size:12px;line-height:1.5;margin:8px 3px;color:var(--text)}.reaction-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media(max-height:520px){
  .reaction-picker{padding:10px}
  .reaction-choices{margin:0 0 6px}
  .reaction-choices>button{min-height:72px;padding-block:3px;gap:2px}
  .reaction-picker .reaction-art{width:50px;height:50px}
}
.reaction-bubble:popover-open{display:flex;align-items:center;gap:6px;padding:7px 10px 7px 5px;border-radius:17px;border-color:color-mix(in srgb,var(--green),var(--line) 40%);pointer-events:none;animation:reaction-arrive 180ms ease-out both}
.reaction-bubble .reaction-art{width:43px;height:43px}.reaction-bubble>span:last-child{min-width:0}.reaction-bubble small{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:115px;line-height:1.5}.reaction-bubble strong{display:block;font-size:14px;line-height:1.5;white-space:nowrap}
@keyframes reaction-arrive{from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.reaction-bubble:popover-open{animation:none}}

/* Physical scorebooks reuse Outwit's palette, cards and rounded surfaces. */
.physical-page{max-width:1080px;margin:0 auto;padding:32px 0 12px}.ph-heading{display:flex;align-items:center;gap:18px;margin-bottom:28px}.ph-heading>div{min-width:0;flex:1}.ph-heading h1{font-size:clamp(23px,3vw,34px);line-height:1.2;letter-spacing:-.9px;margin:8px 0 0;overflow-wrap:anywhere}.ph-heading p{color:var(--muted);margin:8px 0 0}.ph-heading .round-button{flex:none}.ph-heading .eyebrow{font-size:10px;letter-spacing:1.6px}.ph-panel{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:26px}.ph-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.ph-section-title h2{font-size:22px;letter-spacing:-.55px;margin:5px 0 0}.ph-section-title h2 small{font-size:13px;color:var(--muted);font-weight:500;margin-left:8px}.ph-section-title>.icon,.ph-section-title>svg{color:var(--green)}.physical-page .eyebrow{font-size:10px;letter-spacing:1.8px}.ph-caption{font-size:14px;color:var(--muted);line-height:1.55}.ph-game-choice,.ph-score-fields{padding:0;border:0;margin:0;min-width:0}.ph-game-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.ph-game-choice>button{display:flex;align-items:center;text-align:left;gap:16px;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:20px}.ph-game-choice>button[aria-pressed=true]{background:linear-gradient(125deg,var(--accent-soft),var(--surface));border-color:var(--accent)}.ph-game-choice .game-emblem{width:48px;height:48px;flex:none}.ph-game-choice>button>span:not(.game-emblem){display:flex;flex-direction:column;gap:4px}.ph-game-choice strong{font-size:20px}.ph-game-choice small{color:var(--muted);font-size:12px}.ph-choice-dot{margin-left:auto;width:23px;height:23px;border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;flex:none}.ph-game-choice [aria-pressed=true] .ph-choice-dot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.ph-setup-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}.ph-seat-list{margin-top:18px}.ph-seat-wrap+.ph-seat-wrap{border-top:1px solid var(--line)}.ph-seat{display:flex;gap:12px;align-items:center;padding:15px 0}.ph-avatar-button{position:relative;padding:0;background:none;border:0;flex:none;width:48px;height:48px}.ph-avatar-button>img{width:100%;height:100%;border-radius:16px}.ph-avatar-button>span{position:absolute;bottom:-3px;right:-3px;background:var(--surface-raised);border:2px solid var(--surface);border-radius:7px;font-size:10px;width:19px}.ph-seat-name{flex:1;min-width:0}.ph-seat-name input,.ph-field input,.ph-field select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);min-height:48px;padding:11px 13px;font-size:16px}.ph-seat-name input{background:transparent;padding:10px 7px}.ph-seat-name input:focus,.ph-field input:focus,.ph-field select:focus{outline:2px solid var(--accent);outline-offset:2px}.ph-seat-controls{display:flex;gap:0;flex:none}.ph-icon-button{border:0;background:transparent;width:40px;height:44px;display:inline-grid;place-items:center;border-radius:12px;color:var(--muted);flex:none}.ph-icon-button:hover{background:var(--surface-raised);color:var(--text)}.ph-icon-button:disabled{opacity:.25}.ph-add-seat{margin-top:18px}.ph-avatar-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:12px 0}.ph-avatar-picker button{padding:2px;background:transparent;border:1px solid transparent;border-radius:10px;min-width:0}.ph-avatar-picker button[aria-pressed=true]{border-color:var(--accent)}.ph-avatar-picker img{width:100%;display:block;border-radius:8px}.ph-friends{margin-top:16px}.ph-friends summary,.ph-help summary{display:flex;align-items:center;gap:9px;cursor:pointer;min-height:44px;font-size:13px;list-style:none;color:var(--muted)}.ph-friends summary::-webkit-details-marker,.ph-help summary::-webkit-details-marker{display:none}.ph-friends summary>svg:last-child,.ph-help summary>svg:last-child{margin-left:auto}.ph-friends>div{display:grid;gap:6px;margin-top:8px}.ph-friends button{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:9px;background:var(--bg);text-align:left}.ph-friends button img{width:32px;height:32px;border-radius:10px}.ph-friends button svg{margin-left:auto}.ph-setup-art{display:flex;align-items:center;justify-content:center;height:176px;position:relative;background:radial-gradient(ellipse,color-mix(in srgb,var(--green),transparent 91%),transparent 70%);margin:-8px 0 18px}.ph-setup-art .playing-card{width:88px!important;height:132px!important;flex:none;transform:rotate(-13deg);margin-right:-7px}.ph-setup-art .playing-card+.playing-card{transform:rotate(12deg) translateY(4px)}.ph-setup-art>span{font-size:26px;color:var(--accent);position:absolute;right:20%;top:12px}.ph-field{display:block;font-size:13px;font-weight:600;margin:18px 0}.ph-field input,.ph-field select{display:block;margin-top:8px}.ph-setup-options>.ph-caption{display:flex;gap:8px;align-items:flex-start;font-size:12px;margin:0 0 24px}.ph-setup-options>.ph-caption svg{flex:none;margin-top:2px}.ph-save-note{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;margin:14px 0 0;text-align:center}.ph-save-note>svg{flex:none;color:var(--green)}.ph-error{background:color-mix(in srgb,#ee7d88,transparent 90%);color:var(--text);border:1px solid color-mix(in srgb,#ee7d88,transparent 65%);border-radius:13px;font-size:14px;padding:14px;margin:14px 0}.ph-error .button{margin-top:12px}.ph-round-focus{position:relative;display:flex;gap:24px;align-items:center;justify-content:space-between;border:1px solid color-mix(in srgb,var(--green),var(--line) 68%);border-radius:25px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--green),transparent 87%),transparent 65%),var(--surface);padding:26px 30px 40px;margin-bottom:24px;scroll-margin-top:110px}.ph-round-copy{min-width:0}.ph-round-copy>.eyebrow{color:var(--green)}.ph-round-copy h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.7px;margin:8px 0 12px;line-height:1.18;overflow-wrap:anywhere}.ph-round-copy p{color:var(--muted);font-size:13px;max-width:600px;margin:10px 0 0}.ph-round-number{font-size:54px;color:var(--green);font-family:Manrope,sans-serif;font-weight:750;line-height:1;letter-spacing:-3px;flex:none;text-align:center}.ph-round-number small{display:block;font:500 12px 'DM Sans',sans-serif;color:var(--muted);letter-spacing:0;margin-top:9px}.ph-goal-chips{display:flex;gap:8px;flex-wrap:wrap}.ph-goal-chips>span{display:flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--green),var(--line) 85%);background:color-mix(in srgb,var(--green),transparent 96%);border-radius:9px;padding:6px 10px;font-size:12px}.ph-goal-chips svg{color:var(--green)}.ph-progress{position:absolute;bottom:18px;left:30px;right:30px;display:flex;gap:5px}.ph-progress i{height:3px;border-radius:2px;background:var(--line);flex:1}.ph-progress .done{background:var(--green)}.ph-progress .current{background:var(--accent)}.ph-play-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}.ph-min-score{color:var(--muted);font-size:12px;max-width:110px;text-align:right}.ph-standings{list-style:none;margin:15px 0 0;padding:0}.ph-standings li{display:flex;align-items:center;gap:12px;padding:19px 0;border-top:1px solid var(--line)}.ph-standings li:first-child{border:0}.ph-place{font-size:12px;color:var(--muted);min-width:15px;text-align:center}.ph-standings li>img{width:46px;height:46px;flex:none;border-radius:15px}.ph-standing-name{min-width:0;flex:1}.ph-standing-name strong{display:block;font-size:16px;overflow-wrap:anywhere;line-height:1.35}.ph-standing-name small{color:var(--muted);display:block;font-size:12px;margin-top:5px}.ph-dealer-tag{color:var(--green)}.ph-total{font-family:Manrope,sans-serif;font-size:29px;letter-spacing:-1px;line-height:1;text-align:right;font-variant-numeric:tabular-nums}.ph-total small{font:400 10px 'DM Sans',sans-serif;letter-spacing:0;display:block;color:var(--muted);margin-top:8px}.ph-leading .ph-place,.ph-leading .ph-total{color:var(--green)}.ph-dealer-card{padding:24px}.ph-dealer-card>.eyebrow{color:var(--green)}.ph-dealer-person{display:flex;align-items:center;gap:13px;margin:20px 0 25px}.ph-dealer-person>img{width:57px;height:57px;border-radius:18px;flex:none}.ph-dealer-person>span{flex:1;min-width:0}.ph-dealer-person strong{font-size:18px;overflow-wrap:anywhere;line-height:1.3;display:block}.ph-dealer-person small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.ph-help{margin-top:12px;padding:0 16px}.ph-help>div{font-size:13px;color:var(--muted);padding:0 0 14px}.ph-help p{margin:8px 0 12px}.ph-help dl{margin:0}.ph-help dl>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:8px 0}.ph-help dd{margin:0;color:var(--text)}.ph-pause-banner{display:flex;align-items:center;gap:14px;padding:20px;margin:0 0 22px}.ph-pause-banner>svg{color:var(--accent);flex:none}.ph-pause-banner>div{flex:1}.ph-pause-banner p{margin:3px 0 0;font-size:12px;color:var(--muted)}.ph-finish-mark{display:flex;gap:16px;align-items:center;color:var(--green);font-size:26px;margin:20px 0 26px}.ph-history{margin-top:34px}.ph-history>.ph-section-title{margin-bottom:16px}.ph-history-row{width:100%;display:flex;align-items:center;gap:18px;text-align:left;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:9px}.ph-history-row:hover{border-color:color-mix(in srgb,var(--accent),var(--line) 60%)}.ph-history-number{font-family:Manrope,sans-serif;font-size:20px;color:var(--green);width:30px;flex:none}.ph-history-row>span:nth-child(2){flex:1;min-width:0}.ph-history-row strong{font-size:14px;display:block}.ph-history-row small{font-size:12px;color:var(--muted);display:block;margin-top:4px}.ph-history-scores{display:flex;gap:12px}.ph-history-scores>span{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}.ph-history-scores img{width:23px;height:23px;border-radius:7px}.ph-history-row>svg{color:var(--muted);flex:none}.ph-private-note{font-size:11px;color:var(--muted);display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}.ph-private-note a{text-decoration:underline;text-underline-offset:3px}.ph-dialog{width:min(540px,calc(100% - 24px));padding:32px!important;border:1px solid var(--line);border-radius:24px;max-height:90dvh;overscroll-behavior:contain}.ph-dialog>h2{font-size:28px;margin:8px 25px 10px 0;letter-spacing:-.8px;overflow-wrap:anywhere}.ph-dialog>.eyebrow{color:var(--green)}.ph-score-help{padding:0;margin:0 0 4px}.ph-dialog form{margin:0}.ph-score-entry{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--line)}.ph-score-entry>img{width:39px;height:39px;border-radius:13px;flex:none}.ph-score-entry label{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere;line-height:1.3;margin:0}.ph-score-entry input{width:80px;flex:none;min-height:52px;padding:8px!important;text-align:center;font-size:24px!important;font-weight:650;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--text);font-variant-numeric:tabular-nums}.ph-score-entry input:focus{outline:2px solid var(--accent);outline-offset:2px}.ph-zero{width:38px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised);color:var(--muted);font-size:14px;flex:none}.ph-score-footer{background:var(--surface);padding:8px 0 4px}.ph-score-footer>.ph-save-note{min-height:40px;margin:0}.ph-dealer-choices{display:grid;gap:10px;margin-top:24px}.ph-dealer-choices .button{justify-content:flex-start}.ph-dealer-choices img{width:40px;height:40px;border-radius:12px}.ph-dealer-choices [aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.ph-dealer-choices svg{margin-left:auto}.ph-result-dialog{text-align:center;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--green),transparent 90%),transparent 48%),var(--surface)}.ph-result-emblem{width:67px;height:67px;border:1px solid color-mix(in srgb,var(--green),transparent 65%);border-radius:22px;display:grid;place-items:center;margin:8px auto 24px;background:color-mix(in srgb,var(--green),transparent 92%);color:var(--green)}.ph-result-dialog>.eyebrow{display:block}.ph-result-dialog>h2{margin-right:0}.ph-result-standings{text-align:left;margin:22px 0}.ph-next-round{border-top:1px solid var(--line);padding-top:8px}.ph-next-round>p{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--muted);flex-wrap:wrap}.ph-next-round img{width:27px;height:27px;border-radius:8px}.ph-next-round strong{color:var(--text)}.ph-mode-choice{display:flex;gap:6px;padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--bg);margin:20px 0}.ph-mode-choice button{flex:1;background:none;border:0;border-radius:10px;padding:12px 8px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:14px}.ph-mode-choice [aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.ph-mode-intro p{font-size:14px;color:var(--muted);margin-bottom:22px}
@media(max-width:760px){.physical-page{padding-top:22px}.ph-heading{gap:12px;margin-bottom:22px}.ph-heading .round-button{width:39px;height:39px}.ph-heading h1{font-size:24px;letter-spacing:-.6px}.ph-heading p{font-size:13px}.ph-heading .eyebrow{font-size:9px}.ph-panel{border-radius:20px;padding:20px}.ph-game-choice{gap:10px;margin-bottom:18px}.ph-game-choice>button{padding:14px 11px;gap:9px;border-radius:17px;flex-wrap:wrap;position:relative}.ph-game-choice .game-emblem{width:34px;height:34px}.ph-game-choice strong{font-size:16px}.ph-game-choice small{font-size:10px;letter-spacing:-.1px}.ph-game-choice .ph-choice-dot{position:absolute;right:10px;top:10px;width:17px;height:17px}.ph-game-choice>button>span:not(.game-emblem):not(.ph-choice-dot){width:100%}.ph-setup-grid,.ph-play-grid{grid-template-columns:1fr;gap:16px}.ph-seat{gap:10px}.ph-avatar-button{width:40px;height:40px}.ph-avatar-button>img{border-radius:13px}.ph-seat-controls .ph-icon-button{width:29px}.ph-seat-name input{padding:10px 5px;font-size:16px}.ph-setup-options{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.ph-setup-options .ph-field{grid-column:1/-1;margin:10px 0}.ph-setup-art{display:none}.ph-setup-options>.ph-caption,.ph-setup-options>.button,.ph-setup-options>.ph-save-note,.ph-setup-options>.ph-error{grid-column:1/-1}.ph-section-title h2{font-size:21px}.ph-round-focus{padding:21px 20px 35px;border-radius:21px;gap:16px;margin-bottom:16px}.ph-round-copy h2{font-size:25px}.ph-round-number{font-size:43px;letter-spacing:-2px}.ph-progress{left:20px;right:20px;bottom:16px;gap:4px}.ph-round-copy p{font-size:12px}.ph-goal-chips{gap:5px}.ph-goal-chips>span{font-size:11px;padding:5px 7px;gap:5px}.ph-scoreboard{padding:18px 20px 4px}.ph-standings{margin-top:8px}.ph-standings li{padding:15px 0;gap:10px}.ph-standings li>img{width:42px;height:42px;border-radius:13px}.ph-standing-name strong{font-size:15px}.ph-standing-name small{font-size:11px}.ph-total{font-size:27px}.ph-place{min-width:12px}.ph-min-score{font-size:10px}.ph-play-actions{display:contents}.ph-dealer-card{grid-row:1;display:grid;grid-template-columns:1fr auto;column-gap:8px;padding:17px 20px}.ph-dealer-card>.eyebrow{grid-column:1/-1;font-size:9px}.ph-dealer-person{margin:12px 0 16px;grid-column:1/-1;gap:11px}.ph-dealer-person>img{width:40px;height:40px;border-radius:13px}.ph-dealer-person strong{font-size:16px}.ph-dealer-person small{font-size:11px}.ph-dealer-card>.button,.ph-dealer-card>.ph-save-note{grid-column:1/-1}.ph-play-grid>.ph-help{grid-row:3;margin-top:0}.ph-finish-mark{grid-column:1/-1}.ph-history{margin-top:25px}.ph-history-row{gap:11px;padding:15px;flex-wrap:wrap}.ph-history-number{font-size:17px;width:24px}.ph-history-row>span:nth-child(2){flex:1}.ph-history-scores{order:4;width:100%;padding-left:35px;gap:12px;flex-wrap:wrap}.ph-history-scores img{width:19px;height:19px}.ph-history-scores>span{font-size:12px}.ph-private-note{font-size:10px}.ph-dialog{padding:26px 20px!important;border-radius:22px;max-height:90dvh}.ph-dialog h2{font-size:26px}.ph-dialog .ph-caption{font-size:13px}.ph-score-entry{gap:8px;padding:12px 0}.ph-score-entry>img{width:35px;height:35px;border-radius:11px}.ph-score-entry label{font-size:14px!important}.ph-score-entry input{width:68px;font-size:22px!important}.ph-zero{width:34px}.ph-score-footer{bottom:-26px}.ph-result-standings .ph-standing-name strong{font-size:14px}.ph-pause-banner{flex-wrap:wrap}.ph-pause-banner .button{min-height:42px;font-size:13px}.room-heading-actions{flex-wrap:wrap}}
@media(max-width:370px){.ph-panel{padding-left:15px;padding-right:15px}.ph-seat{gap:7px}.ph-seat-controls .ph-icon-button{width:26px}.ph-seat-name input{font-size:16px}.ph-game-choice small{font-size:9px}.ph-round-number{font-size:36px}.ph-round-copy h2{font-size:22px}.ph-score-entry>img{display:none}.ph-score-entry input{width:68px}.ph-dialog{padding:25px 16px!important}.ph-heading h1{font-size:22px}.ph-round-focus{gap:10px}.ph-heading .eyebrow{font-size:8px}}

/* Replay keeps the saved result visible and gives the next match one clear action. */
.ph-rematch-actions{display:grid;gap:10px;grid-column:1/-1;min-width:0}
.ph-rematch-note{margin:0;color:var(--muted);font-size:13px;text-align:center;line-height:1.5}
.ph-rematch-dealer{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;color:var(--muted);font-size:13px;line-height:1.5;min-width:0}
.ph-rematch-dealer img{width:26px;height:26px;aspect-ratio:1;border-radius:50%;object-fit:cover;flex:none}
.ph-rematch-dealer span{min-width:0;overflow-wrap:anywhere}
.ph-rematch-dealer strong{color:var(--text);font-weight:600}
.ph-next-round .ph-rematch-note{display:block;margin:0 0 2px;font-size:13px}
.ph-next-round .ph-rematch-dealer{margin:0;font-size:13px}
.ph-next-round>.text-button{margin-top:14px;color:var(--muted)}
.ph-dealer-card>.ph-rematch-actions{margin-bottom:16px}
.ph-next-round:has(.ph-rematch-actions){padding-top:20px}

/* Same hand tools in every game. Native page and card scrolling stay independent. */
.hand-visibility { display: none; }
.is-board-view .hand-visibility, .is-compact .hand-visibility { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 4px 0 2px; }
.hand-visible-count, .hand-scroll-hint { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 11px; color: var(--muted); }
.hand-scroll-hint { min-height: 44px; padding: 0 3px; background: none; border: 0; text-align: left; }
.hand-scroll-hint svg { color: var(--accent); flex: none; }
.hand-show-all { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-height: 44px; padding: 0 10px; border: 1px solid color-mix(in srgb,var(--accent),transparent 77%); border-radius: 12px; color: var(--accent); background: color-mix(in srgb,var(--accent),transparent 94%); font-size: 12px; font-weight: 650; }
.hand-show-all:hover, .hand-scroll-hint:hover { color: var(--text); }
.hand-visibility button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.playing-hand { --r-mint: var(--green); min-width: 0; overflow-anchor: none; }
.shared-hand-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.shared-hand-heading > strong { font-size: 15px; }
.shared-hand-heading small { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 5px; }
.shared-hand-heading .r-hand-sort { margin-left: auto; }
.r-hand-sort .r-own-order { white-space: nowrap; }
.playing-hand .hand-card, .playing-hand .b-hand-card { position: relative; }
.playing-hand.is-arranging .chosen { outline: none; transform: none; }
.playing-hand.is-arranging .chosen > .playing-card { outline: 2px solid var(--green); outline-offset: 3px; }
.playing-hand.is-arranging .legal { outline: none; }
.playing-hand.is-arranging .pass-check { background: var(--green); }
.hand-new-tag { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); background: var(--green); color: var(--bg); font-size: 10px; font-weight: 750; padding: 2px 7px; border-radius: 6px; box-shadow: 0 0 0 1px var(--surface); pointer-events: none; }
.shared-hand-dock { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--surface-raised); margin-top: 12px; min-height: 78px; }
.shared-order-buttons { display: grid; grid-template-columns: 48px 48px minmax(80px,1fr); gap: 8px; }
.shared-hand-dock .button { min-height: 48px; font-size: 13px; }
.shared-hand-dock .pass-submit { margin-top: 12px; }
.shared-draw-decision { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.shared-decision-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shared-decision-copy strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.shared-decision-copy small { display: block; font-size: 11px; margin-top: 3px; color: var(--muted); line-height: 1.45; }
.hand-decision-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.hand-draw-action { flex-shrink: 0; min-width: 130px; }
.explained-action[aria-disabled=true] { opacity: .65; cursor: help; }
.explained-action[aria-disabled=true]:hover { transform: none; }
.action-why { display: inline-grid; place-items: center; flex-shrink: 0; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; line-height: 1; }
.hand-action-explanation { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); padding-top: 10px; margin: 10px 0 0; border-top: 1px solid var(--line); }
.hand-action-explanation > svg { flex-shrink: 0; color: var(--accent); }
.hand-action-explanation > span { flex: 1; }
.hand-action-explanation > button { display: grid; place-items: center; min-width: 36px; min-height: 36px; border-radius: 8px; }
/* Draw / buy decisions use the same location under the hand in either Rummy view. */
.r-hand-dock .r-draw-decision { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.r-hand-dock .r-draw-decision > .grow { grid-column: 1 / -1; }
.r-hand-dock .r-compact-decision .button { min-height: 48px; }
.r-hand-dock .r-request-decision { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
@media(max-width:760px) {
  .shared-hand-heading { margin-top: 12px; }
  .shared-hand-dock { padding: 10px; border-radius: 13px; }
  .shared-draw-decision { gap: 10px; }
  .shared-draw-decision .hand-draw-action { min-width: 122px; padding-inline: 10px; }
  .playing-hand .hand-cards, .playing-hand .b-hand { padding-bottom: 12px; }
  .r-workbench .r-hand-label { align-items: center; }
}
@media(max-width:360px) {
  .r-hand-tools { flex-wrap: wrap; justify-content: flex-end; }
  .r-hand-sort button { padding-inline: 7px; }
  .shared-hand-heading .r-hand-sort { width: 100%; }
  .shared-hand-heading .r-hand-sort button { flex: 1; }
  .shared-draw-decision { grid-template-columns: minmax(0,1fr); }
}
.playing-hand .action-cards .playing-card { flex: 0 0 auto; width: 27px; height: 40.5px; border-radius: 4px; container-type: inline-size; }
.playing-hand .action-cards-stock { width: 33px; height: 45px; }

/* A same-rank play uses the existing hand dock, without another modal. */
.eights-batch { display: grid; gap: 8px; }
.eights-batch-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eights-batch-heading strong { font-size: 13px; }
.eights-batch-heading .text-button { min-height: 36px; padding: 4px 8px; font-size: 12px; }
.eights-batch-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.eights-batch-top > span { font-size: 12px; color: var(--muted); margin-right: 3px; }
.eights-top-choice { min-width: 44px; min-height: 44px; padding: 6px 9px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; }
.eights-top-choice.red { color: #ed7b87; }
:root[data-theme=daylight] .eights-top-choice.red { color: #ad263d; }
.eights-top-choice[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.eights-top-choice:disabled { opacity: .35; }
.eights-batch-submit { gap: 10px; }
.eights-batch-submit > span:not(.action-cards) { flex: 1; text-align: left; }
.playing-hand.is-batch-selecting .hand-card.chosen { transform: none; }
.playing-hand.is-batch-selecting .hand-card.chosen > .playing-card { outline: 2px solid var(--accent); outline-offset: 2px; }

.hand-tools-trigger{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--muted)}
.hand-tools-trigger:hover{color:var(--accent);border-color:var(--accent)}
html:has(.hand-tools-dialog[open]){overflow:hidden}
.hand-tools-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:26px;background:var(--surface);color:var(--text);box-shadow:0 24px 90px #0006;overflow:hidden;overscroll-behavior:contain}
.hand-tools-dialog[open]{display:flex;flex-direction:column;animation:hand-tools-enter .16s ease-out}
.hand-tools-dialog::backdrop{background:#090b10a6;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.hand-tools-dialog>header{display:flex;align-items:center;gap:12px;flex:none;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.hand-tools-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:var(--accent);background:var(--accent-soft)}
.hand-tools-dialog h2{flex:1;margin:0;font-size:23px;letter-spacing:-.6px;line-height:1.2}
.hand-tools-dialog h2:focus{outline:none}
.hand-tools-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;color:var(--muted)}
.hand-tools-close:hover{background:var(--surface-raised);color:var(--text)}
.hand-tools-body{display:grid;gap:24px;min-height:0;padding:20px;overflow:auto;overscroll-behavior:contain}
.hand-tools-body section{min-width:0}
.hand-tools-body h3{margin:0 0 10px;font:600 14px/1.4 'DM Sans',sans-serif;color:var(--muted);letter-spacing:0}
.hand-tools-sorting{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:15px;background:var(--bg)}
.hand-tools-sorting>button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:46px;padding:10px;border-radius:11px;font-size:15px;color:var(--muted)}
.hand-tools-sorting>button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.hand-tools-manual{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:8px;padding:10px 12px;text-align:left;border-radius:12px;font-size:14px}
.hand-tools-manual>span{flex:1}
.hand-tools-manual>svg{color:var(--muted)}
.hand-tools-manual.is-selected{color:var(--accent);background:var(--accent-soft)}
.hand-tools-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hand-tools-views>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:94px;padding:14px 10px;border:1px solid var(--line);border-radius:17px;background:var(--bg);font-size:14px;font-weight:600;color:var(--muted)}
.hand-tools-views>button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.hand-tools-view-icon{position:relative;display:inline-flex}
.hand-tools-view-icon>i{position:absolute;right:-10px;bottom:-4px;display:grid;place-items:center;width:18px;height:18px;border:2px solid var(--accent-soft);border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.hand-tools-dialog button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover){.hand-tools-manual:hover,.hand-tools-sorting>button:hover{background:var(--accent-soft);color:var(--text)}.hand-tools-views>button:hover{border-color:var(--accent)}}
@media(max-width:600px) and (orientation:portrait){.hand-tools-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 24px);margin:auto auto max(8px,env(safe-area-inset-bottom));border-radius:25px}.hand-tools-body{padding-bottom:max(22px,env(safe-area-inset-bottom))}}
@media(max-height:500px) and (orientation:landscape){.hand-tools-dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 20px);border-radius:21px}.hand-tools-dialog>header{padding:9px 18px}.hand-tools-body{grid-template-columns:1fr 1fr;gap:20px;padding:14px 18px}.hand-tools-views>button{min-height:110px}}
@keyframes hand-tools-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hand-tools-dialog[open]{animation:none}}

.hand-tools-body:has(>section:only-child){grid-template-columns:minmax(0,1fr)}

/* Bordsvy is the default. Its breakpoints rearrange the existing live components. */
.arena-disabled, .arena-disabled > .arena-center { display: contents; }
.table-view-choice { flex-shrink: 0; }
.table-view-choice button { min-height: 44px; }
.is-board-view { --arena-edge: color-mix(in srgb,var(--green) 24%,var(--line)); }
.is-board-view > .table-header { padding-block: 16px; gap: 12px; }
.is-board-view > .game-layout { display: block; }
.is-board-view .table-column { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); grid-template-areas: 'status status' 'goal goal' 'market hand' 'melds hand' 'last hand' 'pause pause'; gap: 14px; align-items: start; }
.is-board-view .table-status { grid-area: status; margin: 0; font-size: 12px; }
.is-board-view .r-seating, .is-board-view .b-seating, .is-board-view .opponents { display: none; }
.is-board-view .table-column > .your-hand { grid-area: hand; min-width: 0; margin: 0; padding: 16px; border-radius: 24px; }
.is-board-view .table-column > .r-hand-panel { display: contents; }
.is-board-view .r-goal { grid-area: goal; }
.is-board-view .r-resume-panel { grid-area: pause; margin: 0; }
.is-board-view .r-workbench { grid-area: hand; padding: 12px 14px 0; }
.is-board-view .your-turn .r-workbench { border-color: var(--accent); }
.is-board-view .b-last-trick { grid-area: last; margin: 0; }
.is-board-view .r-table-overview { grid-area: melds; }
.is-board-view .game-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; padding-top: 24px; }
.is-board-view .r-compact-sheet .game-sidebar { display: block; padding: 0; }
.is-board-view .game-sidebar > * { min-width: 0; }

/* Every player has a numbered place, including the viewer at their own edge. */
.arena-enabled { grid-area: market; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(78px,1fr) minmax(150px,2.1fr) minmax(78px,1fr); grid-template-rows: 92px minmax(115px,auto) 92px; gap: 6px; padding: 18px 12px 12px; border: 1px solid var(--arena-edge); border-radius: 32px; background: radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--green) 8%,var(--table)),var(--surface) 78%); }
.arena-enabled::before { content: ''; position: absolute; z-index: -1; inset: 58px 38px 25px; border: 1px solid color-mix(in srgb,var(--green) 12%,transparent); border-radius: 48%; background: radial-gradient(ellipse,color-mix(in srgb,var(--green) 4%,transparent),transparent 70%); pointer-events: none; }
.arena-seats { display: contents; }
.arena-enabled > .arena-center { grid-column: 2; grid-row: 2 / 4; align-self: center; min-width: 0; padding-bottom: 8px; }
.arena-seat { min-width: 0; display: flex; align-items: center; justify-content: center; align-self: center; }
.arena-seat[data-seat-order="1"] { grid-column: 1; grid-row: 3; }
.arena-seat[data-seat-order="2"] { grid-column: 1; grid-row: 1; }
.arena-seat[data-seat-order="3"] { grid-column: 2; grid-row: 1; }
.arena-seat[data-seat-order="4"] { grid-column: 3; grid-row: 1; }
.arena-seat[data-seat-order="5"] { grid-column: 3; grid-row: 3; }
.arena-enabled[data-opponents='1'] .arena-seat[data-seat-order="1"] { grid-column: 2; grid-row: 1; }
.arena-enabled[data-opponents='2'] .arena-seat[data-seat-order="1"] { grid-column: 1; grid-row: 2; }
.arena-enabled[data-opponents='2'] .arena-seat[data-seat-order="2"] { grid-column: 3; grid-row: 2; }
.arena-enabled[data-opponents='2'] > .arena-center { grid-row: 1 / 4; }
.arena-enabled[data-opponents='3'] .arena-seat[data-seat-order="1"] { grid-column: 1; grid-row: 2; }
.arena-enabled[data-opponents='3'] .arena-seat[data-seat-order="2"] { grid-column: 2; grid-row: 1; }
.arena-enabled[data-opponents='3'] .arena-seat[data-seat-order="3"] { grid-column: 3; grid-row: 2; }
.arena-enabled[data-opponents='4'] .arena-seat[data-seat-order="3"] { grid-column: 3; grid-row: 1; }
.arena-enabled[data-opponents='4'] .arena-seat[data-seat-order="4"] { grid-column: 3; grid-row: 3; }
.arena-seat[data-seat-order="0"], .arena-seat[data-seat-order="6"] { grid-column: 2; grid-row: 4; }
.arena-player { width: 100%; max-width: 140px; min-height: 88px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; position: relative; border-radius: 16px; color: var(--text); }
.arena-player:hover, .arena-player[aria-expanded=true] { background: color-mix(in srgb,var(--accent) 7%,transparent); }
.arena-player:focus-visible, .arena-close:focus-visible, .arena-detail-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.arena-avatar { aspect-ratio: 1; position: relative; flex: none; width: 46px; height: 46px; display: block; margin-bottom: 7px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); box-shadow: 0 4px 10px #0002; }
.arena-avatar > img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.arena-player > strong { max-width: 100%; display: flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1.4; }
.arena-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.arena-place { flex: none; font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }
.is-self .arena-name { color: var(--accent); }
.arena-count { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.arena-away { width: 5px; height: 5px; border: 1px solid var(--muted); border-radius: 50%; }
.arena-avatar > .player-bot-badge { right: auto; left: -4px; bottom: -3px; width: 19px; height: 19px; }
.arena-status { aspect-ratio: 1; position: absolute; display: grid; place-items: center; width: 23px; height: 23px; top: -8px; right: -5px; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 2px 6px #0002; }
.status-ready { background: var(--green); color: #142c28; }
.status-request { background: var(--accent); color: var(--accent-ink); }
.is-active .arena-avatar { outline: 2px solid var(--accent); outline-offset: 3px; }
.arena-turn { font-size: 10px; font-weight: 750; color: var(--accent); padding: 2px 7px; margin-top: 2px; border-radius: 8px; background: var(--accent-soft); white-space: nowrap; }
.arena-detail { grid-column: 1 / -1; grid-row: 5; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.arena-detail-avatar { position: relative; flex: 0 0 32px; }
.arena-detail-avatar > img { display: block; border-radius: 11px; }
.arena-detail > .grow { min-width: 0; }
.arena-detail strong { font-size: 12px; overflow-wrap: anywhere; }
.arena-detail p { margin: 3px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.arena-close { display: grid; place-items: center; flex: 0 0 40px; min-height: 44px; border-radius: 12px; color: var(--muted); }
.arena-detail-action { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 12px; min-height: 44px; }
.arena-self { --self-avatar-size: 28px; position: relative; width: var(--self-avatar-size); height: var(--self-avatar-size); display: inline-block; vertical-align: middle; flex: 0 0 var(--self-avatar-size); margin-right: 5px; }
.arena-self > img { display: block; border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
@media (min-width:761px) and (min-height:601px) {
  .arena-seat.is-self .arena-player { display: grid; grid-template-columns: 36px auto; column-gap: 10px; min-height: 48px; width: auto; text-align: left; padding-inline: 10px; }
  .arena-seat.is-self .arena-avatar { width: 32px; height: 32px; margin: 0; grid-row: 1 / 4; }
  .arena-seat.is-self .arena-turn { justify-self: start; }
}

/* The centre uses the real game's piles or trick, keeping every action server-authoritative. */
.is-board-view .arena-center .game-table, .is-board-view .arena-center .b-table { padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.is-board-view .arena-center .table-center { padding: 0; min-height: 0; gap: 10px; }
.is-board-view .arena-center .table-wordmark { position: static; transform: none; display: block; margin: 0 0 10px; font-size: 20px; opacity: .45; }
.is-board-view .arena-center .piles { gap: 16px; margin: 0; }
.is-board-view .arena-center .piles .playing-card { width: 66px; height: 99px; border-radius: 7px; }
.is-board-view .arena-center .piles button { min-width: 0; }
.is-board-view .arena-center .piles > button > span { font-size: 11px; margin-top: 8px; }
.is-board-view .arena-center .discard-caption { display: none; }
.piles .discard-pile > .active-suit { display: inline-flex; justify-content: center; align-items: center; gap: 4px; margin: 8px 0 0; padding: 3px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 16px; line-height: 1; }
.piles .discard-pile > .active-suit.red { color: var(--red, #d95865); }
.piles .discard-pile > .active-suit > span { font-size: 10px; line-height: 1.2; }
.is-board-view .arena-center .table-overlay { position: static; padding: 16px 10px; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.is-board-view .arena-center .table-overlay h2 { font-size: 18px; }
.is-board-view .arena-center .table-overlay p { font-size: 12px; }
.is-board-view .arena-center .r-market-zone { display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; background: none; }
.is-board-view .arena-center .r-compact-turn { display: none; }
.is-board-view .arena-center .r-piles { display: flex; justify-content: center; gap: 12px; padding: 8px 0; margin: 0; }
.is-board-view .arena-center .r-pile, .is-board-view .arena-center .r-pile:nth-child(2) { display: flex; flex-direction: column; flex: 1; padding: 3px; min-width: 0; gap: 5px; text-align: center; }
.is-board-view .arena-center .r-pile .playing-card, .is-board-view .arena-center .r-empty-card { width: 66px; height: 99px; border-radius: 7px; }
.is-board-view .arena-center .r-pile strong { display: block; font-size: 12px; margin: 2px 0 0; }
.is-board-view .arena-center .r-pile small { display: block; font-size: 10px; }
.is-board-view .arena-center .r-pile .r-discard-value { display: none; }
.is-board-view .arena-center .r-discard-author { font-size: 10px; line-height: 1.5; }
.is-board-view .arena-center .r-buy-interest { padding: 8px; margin: 0 0 5px; order: -1; border-radius: 12px; }
.is-board-view .arena-center .r-buy-interest strong { font-size: 11px; }
.is-board-view .arena-center .r-buy-interest small { font-size: 10px; }
.is-board-view .arena-center .r-discard-recap { border: 0; margin: 7px 0 0; padding: 8px 0 0; border-top: 1px solid var(--arena-edge); }
.is-board-view .arena-center .r-discard-recap > .eyebrow { display: block; font-size: 8px; text-align: center; letter-spacing: .06em; }
.is-board-view .arena-center .r-discard-trail { margin: 3px 0 0; }
.is-board-view .arena-center .r-discard-event { justify-content: center; padding: 0; border: 0; background: none; }
.is-board-view .arena-center .r-discard-event > .playing-card { display: block; width: 25px; height: 37.5px; flex: 0 0 25px; border-radius: 3px; }
.is-board-view .arena-center .r-discard-event strong { font-size: 11px; }
.is-board-view .arena-center .r-discard-event .r-latest-card-value { display: none; }
.is-board-view .arena-center .r-discard-event > div:last-child > span { font-size: 10px; }

/* Meld previews are one horizontal shelf; vertical swipes always belong to the page. */
.is-board-view .r-overview-scroll { max-height: none; overflow: visible; padding: 8px; }
.is-board-view .r-overview-grid { display: flex; overflow-x: auto; gap: 8px; padding: 2px 2px 6px; scrollbar-width: thin; }
.is-board-view .r-overview-meld { flex: 0 0 max(210px,calc(var(--meld-card-count,3) * 40px + 24px)); display: grid; }
/* This is a clipped preview, not another scroll area inside the meld shelf.
   A hidden overflow box with containment swallows swipes begun on its cards. */
.is-board-view .r-overview-cards { overflow: clip; overscroll-behavior: auto; gap: 3px; }
.is-board-view .r-overview-cards .playing-card { width: 37px; }
.is-board-view .r-table-overview header strong { font-size: 15px; }
.is-board-view .r-overview-owner { gap: 5px; }
.is-board-view .r-overview-owner strong { font-size: 11px; }
.is-board-view .r-overview-owner small { font-size: 10px; }
.is-board-view .r-table-overview:has(.r-overview-empty) .r-overview-scroll { height: auto; }
.is-board-view .r-overview-empty { min-height: 42px; font-size: 12px; }

/* A two-row hand with real spacing, never a stack of blended card corners. */
.is-board-view .r-workbench .r-hand, .is-board-view .playing-hand .hand-cards, .is-board-view .playing-hand .b-hand { display: grid; grid-template-columns: repeat(var(--table-hand-columns,var(--compact-hand-columns,8)),84px); grid-template-rows: repeat(var(--table-hand-rows,2),126px); grid-auto-flow: row; justify-content: start; align-items: start; gap: 12px 8px; padding: 10px 5px 15px; margin: 0; overflow-x: auto; overscroll-behavior-x: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.is-board-view .r-workbench .r-hand-card, .is-board-view .playing-hand .hand-card, .is-board-view .playing-hand .b-hand-card { width: 84px; min-width: 0; flex: none; padding: 0; margin: 0; }
.is-board-view .hand-card > .playing-card, .is-board-view .b-hand-card > .playing-card { width: 100%; height: auto; aspect-ratio: 2/3; }
.is-board-view .r-workbench.hand-expanded .r-hand, .is-board-view .playing-hand.hand-expanded .hand-cards, .is-board-view .playing-hand.hand-expanded .b-hand { grid-template-columns: repeat(auto-fill,minmax(78px,1fr)); grid-template-rows: none; grid-auto-rows: auto; overflow: visible; gap: 13px 9px; }
.is-board-view .r-workbench.hand-expanded .r-hand-card, .is-board-view .playing-hand.hand-expanded .hand-card, .is-board-view .playing-hand.hand-expanded .b-hand-card { width: 100%; }
.is-board-view .hand-heading { gap: 9px; margin-bottom: 0; }
.is-board-view .hand-heading > .self-avatar { width: 30px; height: 30px; }
.is-board-view .hand-heading > .self-avatar img { width: 30px; height: 30px; }
.is-board-view .hand-heading > div > strong { font-size: 13px; }
.is-board-view .hand-heading > div > small { font-size: 11px; }
.is-board-view .r-hand-label { gap: 10px; flex-wrap: wrap; }
.is-board-view .r-hand-tools { margin-left: auto; }
.is-board-view .r-workbench .r-hand-label > div:first-child { align-items: center; }
.is-board-view .shared-hand-heading { gap: 6px; margin-top: 10px; }
.is-board-view .shared-hand-heading > strong { font-size: 15px; }
.is-board-view .r-hand-sort button { min-height: 42px; padding-inline: 8px; font-size: 11px; }
.is-board-view .r-hand-dock { margin-inline: -14px; padding-inline: 14px; }
.is-board-view .sound-toggle { margin-top: 12px; padding-top: 10px; }
.table-hand-expand { display: none; }
.is-board-view .table-hand-expand { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--muted); border-radius: 10px; }
/* Börjesson shows attributable trick cards; there is no draw pile in this game. */
.borjesson-board.is-board-view .arena-enabled { grid-template-columns: minmax(75px,1fr) minmax(180px,2.7fr) minmax(75px,1fr); }
.is-board-view .arena-center .b-round-goal { border: 0; background: none; padding: 0 0 10px; gap: 8px; text-align: center; }
.is-board-view .arena-center .b-goal-art, .is-board-view .arena-center .b-round-progress { display: none; }
.is-board-view .arena-center .b-round-goal .eyebrow { font-size: 8px; }
.is-board-view .arena-center .b-round-goal h2 { font-size: 17px; margin: 3px 0; }
.is-board-view .arena-center .b-round-goal p { font-size: 11px; line-height: 1.4; }
.is-board-view .arena-center .b-trick-area { padding: 0; }
.is-board-view .arena-center .b-trick { gap: 6px; padding: 10px 0; }
.is-board-view .arena-center .b-trick-seat { gap: 6px; }
.is-board-view .arena-center .b-trick-seat > span:last-child { font-size: 9px; }
.is-board-view .arena-center .b-trick .playing-card, .is-board-view .arena-center .b-card-slot { width: 100%; max-width: 62px; min-height: 0; }
.is-board-view .arena-center .b-trick-area > p { font-size: 11px; }
.is-board-view .arena-center .b-pass-status { padding: 12px 0; gap: 8px; }
.is-board-view .arena-center .b-pass-status h3 { font-size: 17px; }
.is-board-view .arena-center .b-pass-status p { font-size: 12px; }

@media (max-width: 1100px) {
  .is-board-view .table-column { grid-template-columns: minmax(0,1fr); grid-template-areas: 'status' 'goal' 'market' 'hand' 'melds' 'last' 'pause'; }
  .arena-enabled { grid-template-columns: minmax(85px,1fr) minmax(180px,2fr) minmax(85px,1fr); }
  .is-board-view .r-workbench .r-hand, .is-board-view .playing-hand .hand-cards, .is-board-view .playing-hand .b-hand { grid-template-rows: repeat(var(--table-hand-rows,2),114px); grid-template-columns: repeat(var(--table-hand-columns,var(--compact-hand-columns,8)),76px); gap: 10px 7px; }
  .is-board-view .r-workbench .r-hand-card, .is-board-view .playing-hand .hand-card, .is-board-view .playing-hand .b-hand-card { width: 76px; }
}
@media (max-width: 760px) {
  .arena-enabled { --arena-avatar-size: 42px; }
  .arena-enabled:is([data-seats="5"], [data-seats="6"]) { --arena-avatar-size: 36px; }
  .table-header:has(.table-view-choice) { flex-wrap: wrap; gap: 8px; }
  .table-header > .table-view-choice { margin-left: auto; }
  .is-board-view > .table-header { padding-block: 12px; }
  .is-board-view .table-header h1 { font-size: 20px; }
  .is-board-view .table-status { display: none; }
  .is-board-view .table-column { gap: 10px; }
  .is-board-view .r-layout-tools { gap: 6px; }
  .is-board-view .r-info-button { padding-inline: 8px; }
  .is-board-view .r-info-button > span { display: none; }
  .table-view-choice button { font-size: 12px; padding-inline: 11px; }
  .arena-enabled, .borjesson-board.is-board-view .arena-enabled { display: flex; flex-direction: column; padding: 16px 10px 12px; gap: 8px; border-radius: 25px; }
  .arena-enabled::before { inset: 85px 22px 18px; }
  .arena-seats { display: grid; grid-template-columns: repeat(var(--seat-count),minmax(0,1fr)); gap: 4px; }
  .arena-enabled .arena-seats > .arena-seat { grid-column: auto; grid-row: auto; align-self: start; }
  .arena-player { min-height: 80px; padding: 2px 0; border-radius: 11px; }
  .arena-avatar { width: var(--arena-avatar-size); height: var(--arena-avatar-size); border-radius: 50%; margin-bottom: 7px; }
  .arena-avatar > .player-bot-badge { width: 16px; height: 16px; left: -3px; bottom: -3px; }
  .arena-avatar > .player-bot-badge svg { width: 11px; height: 11px; }
  .arena-status { width: 20px; height: 20px; top: -8px; right: -3px; border-radius: 50%; }
  .arena-status > svg { width: 13px; height: 13px; }
  .arena-player > strong { font-size: 11px; }
  .arena-count { font-size: 10px; }
  .arena-turn { font-size: 9px; padding-inline: 4px; white-space: normal; text-align: center; }
  .arena-enabled > .arena-center { width: 100%; max-width: 310px; padding: 0; }
  .is-board-view .arena-center .r-market-zone { display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 4px 9px; }
  .is-board-view .arena-center .r-market-zone:not(:has(.r-discard-recap)) { grid-template-columns: minmax(0,1fr); }
  .is-board-view .arena-center .r-buy-interest, .is-board-view .arena-center .r-waiting-player { grid-column: 1 / -1; }
  .is-board-view .arena-center .r-buy-interest { margin: 0; }
  .is-board-view .arena-center .r-discard-recap { margin: 0; padding: 4px 0 4px 8px; border: 0; border-left: 1px solid var(--arena-edge); align-self: center; }
  .is-board-view .arena-center .r-discard-event { gap: 5px; flex-wrap: wrap; text-align: center; }
  .is-board-view .arena-center .r-discard-event > div:last-child > span { display: flex; justify-content: center; }
  .is-board-view .arena-center .r-pile .playing-card, .is-board-view .arena-center .r-empty-card, .is-board-view .arena-center .piles .playing-card { width: 70px; height: 105px; }
  .is-board-view .arena-center .r-piles { gap: 6px; }
  .is-board-view .arena-center .r-pile strong { font-size: 11px; }
  .is-board-view .arena-center .r-discard-author { font-size: 10px; }
  .is-board-view .arena-center .table-wordmark { display: none; }
  .is-board-view .arena-center .piles { gap: 22px; }
  .is-board-view .arena-center .b-trick { padding: 8px 0; }
  .is-board-view .arena-center .b-trick .playing-card, .is-board-view .arena-center .b-card-slot { max-width: 58px; }
  .is-board-view .table-column > .your-hand { padding: 12px; border-radius: 22px; }
  .is-board-view .table-column > .r-hand-panel { padding: 0; }
  .is-board-view .r-workbench { padding: 10px 10px 0; }
  .is-board-view .r-hand-dock { margin-inline: -10px; padding-inline: 10px; }
  .is-board-view .r-workbench .r-hand-label > div:first-child { align-items: center; }
  .is-board-view .r-workbench .r-hand-label > div:first-child > .arena-self { --self-avatar-size: 25px; }
  .is-board-view .r-workbench .r-hand-label { gap: 4px; }
  .is-board-view .r-workbench .r-hand-tools { margin-left: auto; }
  .is-board-view .game-sidebar { grid-template-columns: minmax(0,1fr); }
  .is-board-view .r-overview-meld { flex-basis: max(190px,calc(var(--meld-card-count,3) * 40px + 24px)); }
}
/* The landscape layout stays in document flow. No nested vertical scrolling,
   fullscreen API or orientation event changes the state of a player's hand. */
@media (orientation: landscape) and (max-height: 600px) and (min-width: 600px) {
  .arena-enabled { --arena-avatar-size: 40px; }
  .arena-enabled:is([data-seats="5"], [data-seats="6"]) { --arena-avatar-size: 36px; }
  .room-shell:has(.table-view-choice) { --header-height: 54px; }
  .room-shell:has(.table-view-choice) .site-header { min-height: 54px; height: 54px; padding-block: 7px; }
  .room-shell:has(.table-view-choice) .site-header .wordmark { font-size: 26px; }
  .room-shell:has(.table-view-choice) .site-header .brand-icon, .room-shell:has(.table-view-choice) .site-header .brand-icon img { width: 28px; height: 28px; }
  .room-shell:has(.table-view-choice) .site-header nav { min-height: 44px; padding-block: 2px; }
  .room-shell:has(.table-view-choice) .site-header .nav-link { min-height: 40px; gap: 2px; font-size: 9px; }
  .room-shell:has(.table-view-choice) .main-table { padding-inline: max(14px,env(safe-area-inset-left)); }
  .is-board-view > .table-header { padding-block: 8px; flex-wrap: nowrap; gap: 8px; }
  .is-board-view > .table-header > .grow { min-width: 0; }
  .is-board-view > .table-header h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .is-board-view > .table-header .eyebrow { font-size: 8px; }
  .is-board-view .r-layout-tools { flex-basis: auto; }
  .is-board-view .r-info-button > span { display: none; }
  .is-board-view .table-status { display: none; }
  .is-board-view .table-column { grid-template-columns: minmax(260px,.85fr) minmax(0,1.15fr); grid-template-areas: 'goal hand' 'market hand' 'melds hand' 'last hand' 'pause pause'; gap: 9px; }
  .arena-enabled, .borjesson-board.is-board-view .arena-enabled { display: flex; flex-direction: column; padding: 13px 9px 10px; gap: 5px; border-radius: 22px; }
  .arena-enabled::before { inset: 75px 15px 12px; }
  .arena-seats { display: flex; justify-content: space-around; gap: 3px; }
  .arena-enabled .arena-seat { flex: 1; min-width: 0; align-self: flex-start; }
  .arena-player { min-height: 70px; padding: 2px 0; }
  .arena-avatar { width: var(--arena-avatar-size); height: var(--arena-avatar-size); border-radius: 50%; margin-bottom: 5px; }
  .arena-player > strong { font-size: 10px; }
  .arena-count, .arena-turn { font-size: 9px; }
  .arena-status { width: 19px; height: 19px; top: -7px; right: -3px; border-radius: 50%; }
  .arena-status svg { width: 12px; height: 12px; }
  .arena-avatar > .player-bot-badge { width: 15px; height: 15px; left: -3px; }
  .arena-avatar > .player-bot-badge svg { width: 10px; height: 10px; }
  .arena-enabled > .arena-center { width: 100%; padding: 0; max-width: 310px; }
  .is-board-view .arena-center .r-market-zone { display: flex; }
  .is-board-view .arena-center .r-piles { padding: 3px 0; }
  .is-board-view .arena-center .r-pile .playing-card, .is-board-view .arena-center .r-empty-card, .is-board-view .arena-center .piles .playing-card { width: 62px; height: 93px; }
  .is-board-view .arena-center .r-discard-recap { padding: 5px 0 0; border: 0; border-top: 1px solid var(--arena-edge); }
  .is-board-view .arena-center .r-discard-event { gap: 7px; text-align: left; }
  .is-board-view .arena-center .r-discard-event > .playing-card { width: 20px; height: 30px; flex-basis: 20px; }
  .is-board-view .arena-center .table-wordmark { display: none; }
  .is-board-view .r-goal { padding: 8px 10px; grid-template-columns: minmax(0,1fr); gap: 4px; }
  .is-board-view .r-goal h2 { font-size: 15px; }
  .is-board-view .r-goal .eyebrow, .is-board-view .r-progress { display: none; }
  .is-board-view .r-goal-heading { grid-row: 1; }
  .is-board-view .r-goal-meta { justify-content: space-between; }
  .is-board-view .r-goal-meta > span { font-size: 9px; }
  .is-board-view .r-round-number { font-size: 20px; flex-direction: row; align-items: baseline; }
  .is-board-view .r-workbench, .is-board-view .table-column > .your-hand { padding: 9px 10px 0; }
  .is-board-view .table-column > .r-hand-panel { padding: 0; }
  .is-board-view .r-workbench .r-hand, .is-board-view .playing-hand .hand-cards, .is-board-view .playing-hand .b-hand { grid-template-columns: repeat(var(--table-hand-columns,var(--compact-hand-columns,8)),64px); grid-template-rows: repeat(var(--table-hand-rows,2),96px); gap: 9px 7px; padding-block: 9px 12px; }
  .is-board-view .r-workbench .r-hand-card, .is-board-view .playing-hand .hand-card, .is-board-view .playing-hand .b-hand-card { width: 64px; }
  .is-board-view .r-workbench .r-hand-label > div:first-child > strong { font-size: 15px; }
  .is-board-view .r-hand-sort button { min-height: 38px; padding-inline: 6px; font-size: 10px; }
  .is-board-view .r-hand-tools { gap: 0; }
  .is-board-view .r-hand-dock { margin-inline: -10px; padding-inline: 10px; }
  .is-board-view .r-drafts > button { min-width: 91px; min-height: 40px; padding: 5px 7px; }
  .is-board-view .r-drafts strong { font-size: 11px; }
  .is-board-view .r-drafts small { font-size: 10px; }
}
/* Public purchase requests already have a dedicated, tappable seat icon. */
.is-board-view .arena-center .r-buy-interest { display: none; }
@media (max-width:760px) {
  .rummy-board:has(.table-view-choice) > .table-header { position: relative; }
  .rummy-board:has(.table-view-choice) > .table-header > .grow { padding-right: 35px; }
  .rummy-board:has(.table-view-choice) .r-manage-players { position: absolute; right: 0; top: 12px; }
}
@media (max-width:760px) {
  .arena-enabled[data-opponents] .arena-seats > .arena-seat { grid-column: auto; grid-row: auto; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:600px) {
  .is-board-view .table-column { grid-template-areas: 'goal hand' 'market hand' 'melds melds' 'last last' 'pause pause'; }
}

.is-board-view .arena-center .game-table { box-shadow: none; }
.is-board-view .arena-center .game-table::before { display: none; }
@media(max-width:760px) {
  .is-board-view .shared-hand-heading { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 0 6px; }
  .is-board-view .shared-hand-heading > strong { grid-column: 1; grid-row: 1; }
  .is-board-view .shared-hand-heading > .table-hand-expand { grid-column: 2; grid-row: 1; }
  .is-board-view .shared-hand-heading > .r-hand-sort { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin: 0; }
}
.table-arena-slot { display: contents; }
.is-board-view .table-arena-slot { display: block; grid-area: market; align-self: stretch; min-width: 0; }
@media(max-width:760px) {
  .is-board-view > .table-header { margin-bottom: 12px; }
}
:root[data-theme=daylight] .arena-status.status-ready { color: #fff; }
@media(max-width:760px) {
  .r-layout-tools:has(.table-view-choice) .r-info-button { padding-inline: 8px; }
  .r-layout-tools:has(.table-view-choice) .r-info-button > span { display: none; }
}
/* Games without a separate Rummy goal have no empty goal track. */
.eights-board.is-board-view .table-column, .borjesson-board.is-board-view .table-column { grid-template-areas: 'status status' 'market hand' 'last hand' 'pause pause'; }
.arena-avatar > .player-bot-badge { top: auto; }
@media(max-width:1100px) {
  .eights-board.is-board-view .table-column, .borjesson-board.is-board-view .table-column { grid-template-areas: 'status' 'market' 'hand' 'last' 'pause'; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:600px) {
  .eights-board.is-board-view .table-column, .borjesson-board.is-board-view .table-column { grid-template-areas: 'market hand' 'last last' 'pause pause'; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:600px) {
  .rummy-board.is-board-view .table-column { grid-template-rows: auto auto auto auto auto; }
}

/* The mobile view picker is consistent across layouts; hand tools collapse only in Board view. */
.responsive-tools, .responsive-tools-content { display: contents; }
.responsive-tools-trigger { display: none; }
@media (max-width:760px) and (orientation:portrait) {
  .room-shell:has(.table-view-choice) { --header-height: 64px; }
  .room-shell:has(.table-view-choice) .site-header { height: 64px; min-height: 64px; }
}
@media (max-width:760px) {
  .table-header:has(.table-view-choice), .rummy-board > .table-header:has(.table-view-choice) { flex-wrap: nowrap; gap: 5px; padding-block: 6px; margin-bottom: 4px; }
  .table-header:has(.table-view-choice) > .grow, .rummy-board > .table-header:has(.table-view-choice) > .grow { min-width: 0; padding-right: 0; }
  .table-header:has(.table-view-choice) h1 { font-size: 17px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .table-header:has(.table-view-choice) .eyebrow { display: block; font-size: 8px; letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .table-header:has(.table-view-choice) .round-button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; aspect-ratio: 1; padding: 0; }
  .rummy-board:has(.table-view-choice) .r-layout-tools { flex-basis: auto; gap: 4px; }
  .rummy-board:has(.table-view-choice) .r-manage-players { position: static; }
  .r-layout-tools:has(.table-view-choice) .r-info-button { min-width: 40px; padding-inline: 8px; }
  :is(.is-board-view, .table-view-choice) .responsive-tools { display: block; position: relative; flex: none; }
  :is(.is-board-view, .table-view-choice) .responsive-tools-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 650; }
  .table-view-choice .responsive-tools-trigger { color: var(--accent); border-color: color-mix(in srgb,var(--accent) 30%,var(--line)); background: var(--accent-soft); }
  :is(.is-board-view, .table-view-choice) .responsive-tools-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  :is(.is-board-view, .table-view-choice) .responsive-tools-content { display: none; position: absolute; z-index: 15; right: 0; top: calc(100% + 6px); width: max-content; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-raised); box-shadow: 0 10px 32px #0005; }
  :is(.is-board-view, .table-view-choice) .responsive-tools.is-open > .responsive-tools-content { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  .r-layout-tools > .table-view-choice { order: 1; }
  .table-view-options { flex-direction: column; min-width: 150px; padding: 0; border: 0; background: none; }
  .table-view-options button { justify-content: flex-start; }
  .is-board-view .r-hand-tools .responsive-tools-content { width: 255px; }
  .is-board-view .r-hand-tools .responsive-tools-content .r-hand-sort { width: 100%; }
  .is-board-view .r-hand-tools .responsive-tools-content .r-hand-sort button { flex: 1; }
  .is-board-view .r-hand-tools .responsive-tools-content .r-expand-button { border: 1px solid var(--line); min-width: 44px; }
  .is-board-view .responsive-tools-content .r-hand-sort button { min-height: 44px; }
  .is-board-view .responsive-tools-content .table-hand-expand { min-width: 44px; }
  .is-board-view .r-hand-label > .r-hand-tools { flex: 0 0 auto; margin-left: 2px; }
  .is-board-view .r-workbench .r-hand-label { flex-wrap: nowrap; gap: 5px; }
  .is-board-view .r-workbench .r-hand-label > div:first-child { flex: 1; min-width: 0; flex-direction: row; flex-wrap: wrap; column-gap: 5px; row-gap: 0; }
  .is-board-view .r-workbench .r-hand-label > div:first-child > strong { font-size: 15px; }
  .is-board-view .r-workbench .r-hand-label > div:first-child > span:last-child { flex: 0 0 auto; font-size: 10px; }
  .is-board-view .r-workbench .r-hand-label > .turn-badge { margin-left: 0; max-width: 124px; }
  .is-board-view .r-workbench-head { z-index: auto; padding-bottom: 0; margin-bottom: 0; }
  .is-board-view .r-order-intro { margin-top: 10px; }
  .is-board-view .r-drafts { margin-top: 3px; padding-block: 2px 0; }
  .is-board-view .r-drafts > button { min-height: 44px; padding-block: 5px; }
  .is-board-view .shared-hand-heading { display: flex; flex-wrap: nowrap; margin: 4px 0 0; gap: 6px; }
  .is-board-view .shared-hand-heading > strong { font-size: 13px; }
  .is-board-view .shared-hand-heading .responsive-tools { margin-left: auto; }
  .is-board-view .shared-hand-heading .responsive-tools-content { width: 240px; }

  /* Omit hidden status tracks and their gaps so the board starts directly below the header. */
  .is-board-view .table-column { gap: 8px; }
  .rummy-board.is-board-view .table-column { grid-template-areas: 'goal' 'market' 'hand' 'melds' 'last' 'pause'; }
  .eights-board.is-board-view .table-column, .borjesson-board.is-board-view .table-column { grid-template-areas: 'market' 'hand' 'last' 'pause'; }
  .is-board-view .r-goal { padding-block: 6px; gap: 3px; }
  .is-board-view .arena-center .r-discard-author { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arena-enabled, .borjesson-board.is-board-view .arena-enabled { padding: 12px 10px 10px; gap: 5px; }
  .arena-enabled::before { inset: 70px 20px 12px; }
  .arena-player { min-height: 70px; }
  .arena-seat.is-self .arena-turn { display: none; }
  .arena-avatar { width: var(--arena-avatar-size); height: var(--arena-avatar-size); margin-bottom: 5px; }
  .arena-enabled:is([data-seats="2"], [data-seats="3"]) .arena-player { display: grid; grid-template-columns: calc(var(--arena-avatar-size) + 4px) minmax(0,1fr); grid-template-rows: auto auto; column-gap: 5px; row-gap: 0; text-align: left; min-height: 52px; max-width: 230px; padding: 4px 3px; }
  .arena-enabled:is([data-seats="2"], [data-seats="3"]) .arena-avatar { grid-column: 1; grid-row: 1 / 3; margin: 0; justify-self: center; }
  .arena-enabled:is([data-seats="2"], [data-seats="3"]) .arena-player > strong { grid-column: 2; grid-row: 1; align-self: end; font-size: 12px; }
  .arena-enabled:is([data-seats="2"], [data-seats="3"]) .arena-count { grid-column: 2; grid-row: 2; align-self: start; }
  .arena-enabled:is([data-seats="2"], [data-seats="3"]) .arena-turn { grid-column: 2; grid-row: 3; justify-self: start; }
  .arena-enabled[data-seats="3"] .arena-player { display: flex; min-height: 76px; text-align: center; }
  .arena-enabled[data-seats="3"] .arena-avatar { margin-bottom: 5px; }
  .arena-enabled[data-seats="3"] .arena-player > strong, .arena-enabled[data-seats="3"] .arena-count { align-self: center; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:600px) {
  /* Both panels share a row and stretch together, including short opened hands.
     Keep the goal above them and scroll the whole row as one document surface. */
  .rummy-board.is-board-view .table-column { grid-template-areas: 'goal goal' 'market hand' 'melds melds' 'last last' 'pause pause'; }
  .eights-board.is-board-view .table-column, .borjesson-board.is-board-view .table-column { grid-template-areas: 'market hand' 'last last' 'pause pause'; }
  .is-board-view .table-arena-slot { display: flex; }
  .is-board-view .arena-enabled { flex: 1; min-width: 0; }
  .is-board-view .arena-enabled > .arena-center { margin-block: auto; }
  .is-board-view .r-workbench, .is-board-view .table-column > .your-hand:not(.r-hand-panel) { align-self: stretch; display: flex; flex-direction: column; }
  .is-board-view .r-workbench > .r-hand-dock { margin-top: auto; }
  .is-board-view .playing-hand { display: flex; flex-direction: column; flex: 1; }
  .is-board-view .playing-hand > .shared-hand-dock { margin-top: auto; }
  /* An intentionally expanded hand uses the full width instead of stretching
     the neighbouring table into a tall, mostly empty column. */
  .is-board-view:has(.hand-expanded) .table-column { grid-template-columns: minmax(0,1fr); }
  .rummy-board.is-board-view:has(.hand-expanded) .table-column { grid-template-areas: 'goal' 'market' 'hand' 'melds' 'last' 'pause'; }
  .eights-board.is-board-view:has(.hand-expanded) .table-column, .borjesson-board.is-board-view:has(.hand-expanded) .table-column { grid-template-areas: 'market' 'hand' 'last' 'pause'; }
}
@media (max-width:360px) {
  .table-view-choice .responsive-tools-trigger > span { display: none; }
  .table-view-choice .responsive-tools-trigger { padding-inline: 7px; gap: 3px; }
  .is-board-view .r-workbench .r-hand-label > div:first-child { display: grid; grid-template-columns: 25px auto; column-gap: 5px; }
  .is-board-view .r-workbench .r-hand-label > div:first-child > .arena-self { grid-row: 1 / 3; }
  .is-board-view .r-workbench .r-hand-label > div:first-child > span:last-child { grid-column: 2; }
}

/* Plump: quiet table, clear promises, readable cards. Scoped to this game. */
.plump-board { --plump-ink: var(--accent); }
.plump-seating { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:8px; margin-bottom:16px; }
.plump-seat { display:flex; align-items:center; gap:10px; padding:12px; min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.plump-seat strong { display:block; font-size:12px; overflow-wrap:anywhere; }
.plump-seat small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.plump-seat img { display:block; border-radius:50%; aspect-ratio:1; }
.plump-seat > .grow { min-width:0; }
.plump-seat.active { border-color:var(--accent); }
.plump-lobby { position:relative; overflow:hidden; padding:30px; border:1px solid var(--line); border-radius:28px; background:radial-gradient(ellipse at 50% 0%,var(--accent-soft),transparent 65%),var(--surface); text-align:center; }
.plump-lobby-art { height:180px; display:flex; align-items:center; justify-content:center; position:relative; margin:0 auto 25px; max-width:280px; }
.plump-lobby-art > .playing-card { width:96px; height:auto; aspect-ratio:2/3; transform:rotate(-12deg); }
.plump-lobby-art > .playing-card + .playing-card { transform:rotate(10deg) translateY(-9px); margin-left:-18px; }
.plump-hit { position:absolute; bottom:0; right:0; display:flex; align-items:center; gap:7px; padding:10px 16px; border:1px solid color-mix(in srgb,var(--green) 50%,var(--line)); border-radius:14px; background:var(--surface); box-shadow:0 8px 20px #0002; color:var(--green); font-size:12px; }
.plump-hit strong { font-size:20px; font-variant-numeric:tabular-nums; }
.plump-lobby h2 { font-size:clamp(30px,3vw,42px); line-height:1.12; letter-spacing:-.04em; margin:14px 0; }
.plump-lobby > p { color:var(--muted); font-size:14px; line-height:1.7; }
.plump-lobby-facts { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:20px 0 24px; color:var(--muted); font-size:12px; }
.plump-lobby-facts > span { display:flex; gap:7px; align-items:center; }
.plump-lobby-actions { display:grid; gap:16px; max-width:420px; margin:auto; }
.plump-lobby-actions .bot-form { justify-content:center; margin:0; }
.plump-lobby-actions > small { color:var(--muted); }
.plump-formats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; text-align:left; }
.plump-formats button { padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.plump-formats button[aria-pressed=true] { border-color:var(--accent); background:var(--accent-soft); }
.plump-formats strong { display:block; font-size:13px; }
.plump-formats small { display:block; color:var(--muted); font-size:11px; line-height:1.5; margin-top:5px; }
.plump-table { border:1px solid var(--line); border-radius:24px; padding:18px; background:radial-gradient(ellipse,var(--accent-soft),transparent),var(--surface); }
.plump-table-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px 12px; color:var(--muted); font-size:11px; }
.plump-table-heading > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:65%; }
.plump-table-bidding { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.plump-table-bidding .game-emblem { width:56px; height:56px; }
.plump-table-bidding strong { font-size:18px; }
.plump-table-bidding > span, .plump-table-bidding p { color:var(--muted); font-size:12px; }
.plump-table-bidding h2 { font-size:21px; }
.plump-trick { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); justify-content:center; gap:16px 10px; max-width:340px; margin:18px auto 10px; }
.plump-trick[data-count='2'] { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:220px; }
.plump-trick[data-count='4'] { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:400px; }
.plump-trick-seat { min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
.plump-trick-seat .playing-card, .plump-card-slot { width:100%; max-width:80px; height:auto; aspect-ratio:2/3; border-radius:8px; }
.plump-card-slot { display:grid; place-items:center; color:color-mix(in srgb,var(--muted) 45%,transparent); border:1px dashed color-mix(in srgb,var(--muted) 25%,transparent); background:color-mix(in srgb,var(--surface) 45%,transparent); }
.plump-card-slot.is-next { border-color:var(--accent); color:var(--accent); }
.plump-trick-seat small { display:flex; align-items:center; gap:4px; max-width:100%; color:var(--muted); font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.plump-trick-seat.is-winner .playing-card { outline:2px solid var(--green); outline-offset:3px; }
.plump-trick-seat.is-winner small { color:var(--green); }
.plump-trick-message { min-height:30px; display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; font-size:12px; color:var(--muted); }
.plump-trick-message strong { color:var(--text); font-weight:600; }
.plump-board.is-board-view .arena-enabled { display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:24px; background:radial-gradient(ellipse at 50% 50%,var(--accent-soft),transparent 80%),var(--surface); }
.plump-board .arena-enabled::before { inset:100px 22px 20px; }
.plump-board .arena-seats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
.plump-board .arena-enabled[data-seats='2'] .arena-seats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.plump-board .arena-enabled[data-seats='4'] .arena-seats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.plump-board .arena-seat { grid-column:auto!important; grid-row:auto!important; align-self:stretch; }
.plump-board .arena-player, .plump-board .arena-seat.is-self .arena-player { display:flex; flex-direction:column; min-height:0; max-width:100%; width:100%; text-align:center; padding:5px 2px; gap:2px; }
.plump-board .arena-avatar, .plump-board .is-self .arena-avatar { width:36px; height:36px; margin:0 0 3px; }
.plump-board .arena-turn { position:absolute; top:-9px; right:0; font-size:8px; }
.plump-board .arena-player > strong { font-size:11px; }
.plump-board .arena-count { min-height:21px; }
.plump-seat-score { display:inline-flex; align-items:baseline; gap:3px; font-variant-numeric:tabular-nums; }
.plump-seat-score b { font-size:15px; color:var(--text); }
.plump-seat-score.is-exact b { color:var(--green); }
.plump-seat-score.is-over { text-decoration:line-through; opacity:.8; }
.plump-board .arena-enabled > .arena-center { width:100%; padding:0; align-self:stretch; }
.plump-board .arena-center .plump-table { border:0; padding:12px 0 0; border-top:1px solid var(--line); border-radius:0; background:none; }
.plump-board .arena-detail { width:100%; }
.plump-board .plump-hand { margin-top:16px; }
.plump-hand .hand-heading { gap:10px; }
.plump-bid-picker { border:1px solid var(--line); border-radius:18px; padding:16px; margin-top:14px; background:var(--surface-raised); }
.plump-bid-picker.is-your-bid { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); background:linear-gradient(135deg,var(--accent-soft),transparent); }
.plump-bid-heading { display:flex; gap:10px; align-items:center; }
.plump-bid-mark { display:grid; place-items:center; flex:0 0 38px; height:38px; border:1px solid var(--line); border-radius:12px; color:var(--accent); }
.plump-bid-heading strong { display:block; font-size:14px; }
.plump-bid-heading small { display:block; font-size:11px; color:var(--muted); margin-top:4px; line-height:1.5; }
.plump-bid-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:7px; margin:14px 0; }
.plump-bid-options button { min-height:46px; font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.plump-bid-options button[aria-pressed=true] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 18%,transparent); }
.plump-bid-options button:disabled { opacity:.35; text-decoration:line-through; }
.plump-bid-options button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.plump-bid-submit { width:100%; min-height:46px; }
.plump-bid-note { color:var(--muted); font-size:11px; line-height:1.5; margin:-2px 0 12px; }
.plump-board.is-bidding .b-hand-card:disabled { opacity:1; filter:none; }
.plump-board.is-bidding .shared-hand-dock { display:none; }
.plump-board.is-bidding .is-arranging .shared-hand-dock { display:block; }
.plump-paused { grid-area:pause; display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid var(--accent); background:var(--accent-soft); padding:18px; border-radius:20px; margin-top:14px; }
.plump-paused p { color:var(--muted); font-size:12px; margin:5px 0 0; }
.plump-scorecard td small { display:block; font-size:10px; color:var(--muted); white-space:nowrap; margin-top:3px; }
.plump-scorecard td.plump-exact > strong { color:var(--green); }
.plump-rules-example { display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:20px; margin:20px 0; border:1px solid var(--line); border-radius:18px; background:var(--accent-soft); }
.plump-rules-example strong { font-size:28px; color:var(--accent); }
.game-picker { flex-wrap:wrap; }
.game-picker button { flex-basis:calc(50% - 8px); }
@media (max-width:760px) {
  .plump-lobby { padding:22px 16px; }
  .plump-lobby-art { height:155px; margin-bottom:20px; }
  .plump-lobby-art > .playing-card { width:83px; }
  .plump-seating { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plump-seat { padding:10px; gap:8px; }
  .plump-board.is-board-view .arena-enabled { padding:12px; gap:10px; }
  .plump-board .arena-avatar, .plump-board .is-self .arena-avatar { width:32px; height:32px; }
  .plump-board .arena-player > strong { font-size:10px; }
  .plump-board .arena-enabled[data-seats='4'] .arena-seats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  .plump-board .arena-turn { right:-3px; top:-7px; padding:2px 4px; }
  .plump-table-bidding { min-height:108px; gap:7px; }
  .plump-table-bidding .game-emblem { width:40px; height:40px; }
  .plump-table-bidding strong { font-size:16px; }
  .plump-trick { gap:11px 7px; max-width:280px; margin-top:12px; }
  .plump-trick-seat .playing-card, .plump-card-slot { max-width:62px; }
  .plump-trick-seat small { font-size:9px; }
  .plump-bid-picker { padding:12px; }
  .plump-bid-heading strong { font-size:13px; }
  .plump-bid-mark { display:none; }
  .plump-bid-options { gap:6px; }
  .plump-board .plump-hand .hand-heading > div:not(.turn-message) strong { font-size:16px; }
  .plump-board.is-board-view .table-column { gap:12px; }
  .plump-board.is-board-view .game-sidebar { grid-template-columns:minmax(0,1fr); padding-top:16px; }
}
@media (min-width:761px) { .game-picker button { flex-basis:0; } }
/* Plump has no draw pile or meld track. Keep the two live panels adjacent. */
.plump-board.is-board-view .table-column { grid-template-areas:'status status' 'market hand' 'pause pause'; }
.plump-board .arena-enabled > .arena-center { max-width:none; }
.plump-board .arena-player { position:relative; }
.plump-board .arena-player .arena-turn { margin:0; }
@media (max-width:1100px) {
  .plump-board.is-board-view .table-column { grid-template-areas:'status' 'market' 'hand' 'pause'; }
}
@media (max-width:760px) {
  .plump-board.is-board-view .table-column { grid-template-areas:'market' 'hand' 'pause'; }
  .plump-board .arena-enabled:is([data-seats='2'],[data-seats='3']) .arena-player { display:flex; flex-direction:column; min-height:0; text-align:center; gap:2px; }
  .plump-board .arena-enabled:is([data-seats='2'],[data-seats='3']) .arena-avatar { margin:0 0 3px; }
  .plump-board .arena-enabled:is([data-seats='2'],[data-seats='3']) .arena-player > strong { align-self:auto; font-size:10px; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:600px) {
  .plump-board.is-board-view .table-column { grid-template-areas:'market hand' 'pause pause'; }
  .plump-board.is-board-view:has(.hand-expanded) .table-column { grid-template-areas:'market' 'hand' 'pause'; }
}
.plump-hand { border:1px solid var(--line); background:var(--surface); }
.plump-hand.your-turn { border-color:var(--accent); }
.plump-hand .shared-hand-heading > strong { display:none; }
.plump-hand .shared-hand-heading { justify-content:flex-end; }
@media (min-width:1101px) {
  .plump-board.is-board-view .plump-trick { grid-template-columns:repeat(var(--plump-seats,3),minmax(0,1fr)); max-width:560px; gap:8px; }
  .plump-board.is-board-view .plump-trick[data-count='2'] { --plump-seats:2; max-width:220px; }
  .plump-board.is-board-view .plump-trick[data-count='4'] { --plump-seats:4; }
  .plump-board.is-board-view .plump-trick[data-count='5'] { --plump-seats:5; }
  .plump-board.is-board-view .plump-trick[data-count='6'] { --plump-seats:6; }
}
@media (max-width:760px) {
  .plump-board.is-bidding .plump-table-bidding { min-height:72px; display:grid; grid-template-columns:32px auto; justify-content:center; gap:1px 12px; padding-block:12px 0; }
  .plump-board.is-bidding .plump-table-bidding .game-emblem { width:32px; height:32px; grid-row:1/3; }
  .plump-board.is-bidding .plump-table-bidding strong { align-self:end; font-size:14px; text-align:left; }
  .plump-board.is-bidding .plump-table-bidding > span { align-self:start; text-align:left; font-size:11px; }
}
@media (max-width:760px) {
  /* Put the hand menu beside its title instead of consuming another row. */
  .plump-hand { position:relative; }
  .plump-hand .hand-heading { padding-right:46px; }
  .plump-hand .shared-hand-heading { height:0; min-height:0; margin:0; }
  .plump-hand .shared-hand-heading .responsive-tools { position:absolute; top:12px; right:12px; }
}
@media (orientation:landscape) and (max-height:600px) and (min-width:600px) {
  .plump-board.is-board-view .playing-hand:not(.hand-expanded) .b-hand { grid-template-columns:repeat(var(--hand-count,10),64px); grid-template-rows:96px; grid-auto-flow:column; }
  .plump-board .arena-enabled > .arena-center { margin-block:12px auto; }
  .plump-board .plump-table-bidding { min-height:80px; }
  .plump-board .plump-table-bidding .game-emblem { width:32px; height:32px; }
  .plump-board .plump-bid-picker { padding:12px; }
  .plump-board .plump-bid-mark { display:none; }
  .plump-board .plump-bid-heading small { display:none; }
  .plump-board .plump-bid-options { margin:10px 0; }
}
/* These rule cards use text steps, so reserve no empty illustration column. */
.rules-plump .rule-steps .rule-step-number { position:static; margin:0 0 12px; color:var(--accent); font-size:20px; line-height:1; letter-spacing:-.02em; }
.rules-plump .rule-more summary > span { display:flex; align-items:center; gap:8px; }
@media (max-width:760px) {
  .rules-panel.rules-plump .rule-steps > li { padding:18px; min-height:0; }
}

/* A quiet shortcut shares the existing hand toolbar in every Rummy view. */
.r-meld-shortcut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 44px; padding: 4px 8px; color: var(--r-mint); font-size: 12px; font-weight: 650; border-radius: 11px; touch-action: manipulation; }
.r-meld-shortcut small { display: grid; place-items: center; min-width: 21px; height: 21px; padding-inline: 4px; border: 1px solid color-mix(in srgb,var(--r-mint) 25%,var(--line)); border-radius: 7px; background: color-mix(in srgb,var(--r-mint) 7%,var(--surface)); font-size: 10px; font-variant-numeric: tabular-nums; }
.r-meld-shortcut:hover { background: color-mix(in srgb,var(--r-mint) 8%,var(--surface)); }
.r-meld-shortcut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-meld-shortcut-row { display: flex; justify-content: flex-end; border-bottom: 1px solid var(--line); }
.r-selection-toolbar { flex-wrap:wrap; padding-block:6px 8px; }
.r-selection-toolbar > span[role=status] { min-width: 65px; white-space: nowrap; }
.r-selection-toolbar > .r-meld-shortcut { margin-left: auto; }
.r-selection-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-left:auto; flex:none; }
.r-selection-actions:empty { display:none; }
.r-selection-toolbar > .r-selection-status { min-width:0; }
.r-selection-chip { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 10px; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:12px; font-size:12px; font-weight:600; white-space:nowrap; touch-action:manipulation; }
.r-selection-chip > svg { flex:none; opacity:.8; }
.r-plan-undo { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:50%; touch-action:manipulation; }
.r-plan-remove { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 10px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:12px; font-size:12px; font-weight:550; white-space:nowrap; touch-action:manipulation; }
.r-plan-remove > svg { flex:none; color:var(--muted); }
.r-selection-chip:focus-visible,.r-plan-undo:focus-visible,.r-plan-remove:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (hover:hover) { .r-plan-undo:not(:disabled):hover,.r-plan-remove:not(:disabled):hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); color:var(--accent); } .r-selection-chip:hover { border-color:var(--accent); } }

/* Private workbench: the hand and confirmation stay in view while the table scrolls. */
html:has(.rb-dialog[open]) { overflow:hidden; }
.rb-dialog { --rb-card:72px; width:min(1160px,calc(100% - 64px)); height:min(830px,calc(100dvh - 64px)); max-width:none; max-height:none; margin:auto; padding:0; overflow:hidden; color:var(--text); background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:26px; box-shadow:0 28px 100px #0006; }
.rb-dialog::backdrop { background:#05070cc2; backdrop-filter:blur(8px); }
.rb-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; animation:rb-enter .2s ease-out; }
.rb-header { display:flex; align-items:center; gap:13px; padding:18px 24px; border-bottom:1px solid var(--line); background:var(--surface); }
.rb-heading-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:14px; }
.rb-header h2 { font-size:23px; line-height:1.2; letter-spacing:-.5px; margin:0 0 3px; }
.rb-header > div > span { font-size:12px; color:var(--muted); }
.rb-header .r-sheet-close { display:grid; place-items:center; margin-left:auto; width:44px; height:44px; min-height:44px; flex:none; border-radius:50%; color:var(--muted); border:1px solid var(--line); background:var(--bg); }
.rb-workspace { min-height:0; display:grid; grid-template-columns:280px minmax(0,1fr); overflow:hidden; }
.rb-hand { display:flex; flex-direction:column; min-width:0; min-height:0; padding:14px 16px; border-right:1px solid var(--line); background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent 60%),var(--surface); }
.rb-section-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; flex:none; min-height:40px; margin-bottom:8px; }
.rb-section-heading > strong { font-size:15px; display:flex; align-items:center; gap:7px; margin-right:auto; white-space:nowrap; }
.rb-section-heading > strong > span { color:var(--muted); font-weight:450; font-variant-numeric:tabular-nums; }
.rb-clear { display:inline-flex; align-items:center; justify-content:flex-end; min-height:44px; gap:4px; white-space:nowrap; color:var(--accent); font-size:12px; padding:0 2px; }
.rb-clear:disabled { color:var(--muted); opacity:1; }
.rb-hand-cards { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 9px; overflow-y:auto; overscroll-behavior:contain; padding:5px 3px 9px; align-content:start; scrollbar-width:thin; }
.rb-hand-card, .rb-table-card { position:relative; display:block; min-width:0; width:100%; padding:0; border:0; border-radius:10px; touch-action:pan-x pan-y; background:transparent; isolation:isolate; }
.rb-dialog .playing-card { width:100%; height:auto; aspect-ratio:2/3; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.rb-hand-card { align-self:start; transition:opacity .16s,box-shadow .16s; }
.rb-hand-card[aria-pressed=true] { outline:3px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 5px var(--accent-soft); }
.rb-card-check { display:grid; place-items:center; position:absolute; top:-5px; right:-5px; width:23px; height:23px; border:2px solid var(--surface); border-radius:50%; background:var(--accent); color:var(--accent-ink); z-index:2; }
.rb-hand-card.is-placed > .playing-card { opacity:.24; filter:saturate(.4); }
.rb-hand-card.is-placed { outline:1px dashed color-mix(in srgb,var(--accent) 36%,var(--line)); outline-offset:2px; }
.rb-hand-card.is-placed .rb-card-check { background:var(--surface-raised); color:var(--accent); border-color:var(--line); }
.rb-hand-card:disabled, .rb-table-card:disabled, .rb-target:disabled { opacity:1; cursor:default; }
.rb-joker-tag { position:absolute; bottom:5px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--accent-ink); border-radius:5px; padding:2px 5px; font-size:10px; font-weight:650; }
.rb-hand-hint { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--muted); font-size:11px; line-height:1.5; padding:13px 0 2px; flex:none; }
.rb-hand-hint > svg { flex:none; }
.rb-board { --rb-board-pad:20px; overflow-y:auto; min-height:0; min-width:0; padding:var(--rb-board-pad); overscroll-behavior:contain; scrollbar-width:thin; background:var(--bg); scroll-padding:16px; }
.rb-owner + .rb-owner { margin-top:25px; }
.rb-owner > header { display:flex; align-items:center; gap:9px; margin:0 2px 9px; position:sticky; top:calc(-1*var(--rb-board-pad)); z-index:3; background:var(--bg); padding:10px 0; box-shadow:0 -20px 0 var(--bg),0 3px 0 var(--bg); }
.rb-owner > header > img { width:30px; height:30px; flex:none; border-radius:50%; object-fit:cover; }
.rb-owner > header > strong { font-size:14px; overflow-wrap:anywhere; }
.rb-owner-count { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:42px; height:28px; padding:0 8px; margin-left:auto; flex:none; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:9px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.rb-owner-count > svg { flex:none; opacity:.8; }
.rb-owner-melds { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:12px; align-items:start; }
.rb-meld { position:relative; min-width:0; border:1px solid var(--line); border-radius:17px; padding:14px 10px; background:var(--surface); }
.rb-target { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:inherit; background:transparent; touch-action:manipulation; }
.rb-meld-cards { display:flex; flex-wrap:wrap; gap:10px 7px; pointer-events:none; }
.rb-table-card { flex:0 0 clamp(48px,calc((100% - 21px)/4),var(--rb-card)); width:clamp(48px,calc((100% - 21px)/4),var(--rb-card)); pointer-events:auto; }
.rb-table-card.is-pending { outline:2px dashed var(--accent); outline-offset:2px; animation:rb-place .2s ease-out; }
.rb-pending-mark { position:absolute; top:-6px; right:-5px; display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); border-radius:50%; width:20px; height:20px; border:2px solid var(--surface); }
.rb-joker-value { position:absolute; left:50%; bottom:-3px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:4px; min-width:35px; padding:2px 5px; background:var(--surface-raised); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; }
.rb-footer { padding:14px 24px max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); }
.rb-footer-actions { display:flex; align-items:center; gap:16px; }
.rb-undo { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 10px; border:1px solid var(--line); border-radius:12px; font-size:13px; }
.rb-undo:disabled { opacity:.4; }
.rb-summary { display:flex; align-items:baseline; gap:5px; font-size:13px; color:var(--muted); }
.rb-summary strong { color:var(--text); font-weight:650; }
.rb-confirm { margin-left:auto; min-width:150px; min-height:48px; border-radius:13px; gap:10px; font-size:14px; }
.rb-confirm:disabled { opacity:.4; }
.rb-notice { display:flex; align-items:center; gap:8px; padding:0 0 12px; font-size:13px; line-height:1.5; color:var(--muted); }
.rb-notice > svg { flex:none; }
.rb-notice.is-error { color:var(--text); }
.rb-notice.is-error > svg { color:var(--accent); }
.rb-notice > button { color:var(--accent); min-height:44px; padding:4px 8px; font-weight:600; margin-left:auto; }
.rb-leave { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:20px; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(8px); }
.rb-leave > div { width:min(360px,100%); display:grid; justify-items:center; gap:12px; text-align:center; padding:26px; border:1px solid var(--line); border-radius:22px; background:var(--surface-raised); box-shadow:0 15px 55px #0003; }
.rb-leave h3 { margin:6px 0 0; font-size:22px; letter-spacing:-.5px; }
.rb-leave p { font-size:14px; color:var(--muted); margin:0 0 8px; }
.rb-leave .button { width:100%; min-height:46px; }
.rb-dialog button:focus-visible, .rb-board:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.rb-dialog .r-empty-melds { display:grid; justify-items:center; align-content:center; gap:14px; text-align:center; min-height:200px; color:var(--muted); }
.rb-dialog .r-empty-melds strong { color:var(--text); }
.rb-dialog .r-empty-melds p { margin:0; font-size:13px; }
.r-meld-entry { display:block; width:100%; text-align:left; color:var(--text); }
.r-meld-entry .r-meld-heading { display:flex; justify-content:space-between; }
@media (hover:hover) { .rb-dialog button:not(:disabled):hover { filter:brightness(1.08); } .rb-meld:has(.rb-target:not(:disabled)):hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); } }
@media (max-width:699px) and (min-height:521px) {
  .rb-dialog { --rb-card:66px; width:100%; height:100dvh; margin:0; border:0; border-radius:0; }
  .rb-header { padding:max(10px,env(safe-area-inset-top)) 16px 10px; gap:10px; }
  .rb-header h2 { font-size:21px; }
  .rb-header > div > span { font-size:11px; }
  .rb-heading-icon { width:38px; height:38px; border-radius:12px; }
  .rb-workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .rb-hand { padding:4px 14px 8px; border-right:0; border-bottom:1px solid var(--line); }
  .rb-section-heading { margin:0; min-height:35px; }
  .rb-section-heading > strong { font-size:14px; }
  .rb-clear { min-height:44px; }
  .rb-hand-cards { display:flex; overflow-x:auto; overflow-y:hidden; padding:6px 4px 8px; gap:11px; min-height:0; }
  .rb-hand-card { flex:0 0 clamp(62px,18vw,82px); width:clamp(62px,18vw,82px); }
  .rb-hand-hint { padding:4px 0 0; font-size:10px; }
  .rb-board { --rb-board-pad:14px; }
  .rb-owner + .rb-owner { margin-top:20px; }
  .rb-footer { padding:10px 14px max(12px,env(safe-area-inset-bottom)); }
  .rb-footer-actions { gap:9px; }
  .rb-undo { padding:0 10px; }
  .rb-summary { display:grid; gap:0; font-size:11px; line-height:1.4; }
  .rb-summary strong { font-size:13px; }
  .rb-confirm { min-width:130px; padding-inline:14px; min-height:46px; }
  .rb-notice { font-size:12px; padding-bottom:8px; }
}
@media (max-height:520px) {
  .rb-dialog { --rb-card:58px; width:calc(100% - 24px); height:calc(100dvh - 16px); border-radius:18px; }
  .rb-header { padding:5px 14px; gap:10px; }
  .rb-header h2 { font-size:19px; margin:0; }
  .rb-header > div > span { display:none; }
  .rb-heading-icon { width:32px; height:32px; border-radius:10px; }
  .rb-workspace { grid-template-columns:clamp(210px,32vw,280px) minmax(0,1fr); }
  .rb-hand { padding:2px 10px 5px; }
  .rb-section-heading { min-height:44px; margin:0; }
  .rb-section-heading > strong { font-size:13px; }
  .rb-clear { min-height:44px; font-size:11px; }
  .rb-hand-cards { gap:9px 8px; padding:5px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rb-hand-hint { display:none; }
  .rb-board { --rb-board-pad:12px; }
  .rb-owner > header { margin-bottom:8px; padding:6px 0; }
  .rb-owner > header > img { width:26px; height:26px; }
  .rb-footer { padding:7px 14px; }
  .rb-confirm { min-height:44px; }
  .rb-notice { font-size:11px; padding-bottom:5px; }
  .rb-notice > button { min-height:44px; }
  .rb-leave > div { gap:8px; padding:18px; }
  .rb-leave .rb-heading-icon { display:none; }
}
@media (max-width:360px) and (min-height:521px) { .rb-dialog { --rb-card:58px; } .rb-undo > span { display:none; } .rb-undo { width:44px; } .rb-confirm { min-width:124px; } .rb-header { padding-inline:12px; } }
@keyframes rb-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes rb-place { from { opacity:.6; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .rb-dialog[open],.rb-table-card.is-pending { animation:none; } .rb-hand-card { transition:none; } }

@media (max-height:360px) {
  .rb-dialog { --rb-card:52px; }
  .rb-board { --rb-board-pad:8px; }
  .rb-meld { padding-block:10px; }
  .rb-owner > header { padding:3px 0; margin-bottom:7px; }
  .rb-owner + .rb-owner { margin-top:16px; }
}

/* The entire preview opens Min stil. The artwork uses the player's own choices. */
.style-teaser {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 14px 28px;
  margin-top: 30px;
  padding: 26px 32px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 22px;
  color: var(--text);
  background: radial-gradient(ellipse at 100% 30%, color-mix(in srgb, var(--green) 9%, transparent), transparent 60%), linear-gradient(115deg, var(--surface), var(--bg));
  box-shadow: inset 0 1px 0 #ffffff04;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.style-teaser-copy { grid-column: 1; grid-row: 1; min-width: 0; align-self: end; }
.style-teaser h3 { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -.7px; }
.style-teaser p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.style-teaser-action { grid-column: 1; grid-row: 2; align-self: start; display: inline-flex; align-items: center; gap: 12px; width: fit-content; min-height: 44px; font-size: 14px; font-weight: 650; color: var(--accent); }
.style-teaser-action > span { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 50%; background: var(--accent-soft); }
.style-teaser-art { position: relative; grid-column: 2; grid-row: 1 / 3; width: 220px; height: 150px; justify-self: end; pointer-events: none; }
.style-teaser-art::before { content: ''; position: absolute; inset: 22px 0 4px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); transform: rotate(-12deg); }
.style-teaser .playing-card { width: 84px; height: 126px; container-type: inline-size; }
.style-teaser-back, .style-teaser-face { position: absolute; top: 8px; filter: drop-shadow(0 6px 8px #0002); }
.style-teaser-back { left: 36px; transform: rotate(-14deg); }
.style-teaser-face { left: 101px; transform: rotate(10deg); }
.style-teaser-avatar { position: absolute; right: 14px; bottom: 0; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid var(--surface); border-radius: 50%; background: var(--surface); box-shadow: 0 4px 12px #0003; }
.style-teaser-avatar img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.style-teaser:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) {
  .style-teaser:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow: 0 5px 20px #0001, inset 0 1px 0 #ffffff07; }
}
@media (max-width: 760px) {
  .style-teaser { grid-template-columns: minmax(0, 1fr) 140px; gap: 14px 8px; padding: 22px; margin-top: 22px; border-radius: 20px; }
  .style-teaser-copy { grid-column: 1 / -1; align-self: start; }
  .style-teaser h3 { font-size: 23px; }
  .style-teaser p { margin-top: 6px; font-size: 13px; }
  .style-teaser-art { grid-row: 2; width: 140px; height: 113px; }
  .style-teaser .playing-card { width: 62px; height: 93px; }
  .style-teaser-back { left: 9px; top: 7px; }
  .style-teaser-face { left: 61px; top: 5px; }
  .style-teaser-avatar { width: 38px; height: 38px; right: 0; bottom: 1px; }
  .style-teaser-avatar img { width: 30px; height: 30px; }
  .style-teaser-action { align-self: center; font-size: 13px; gap: 8px; flex-wrap: wrap; }
  .style-teaser-action > span { width: 30px; height: 30px; }
}
@media (max-width: 359px) {
  .style-teaser { padding: 20px; grid-template-columns: minmax(0, 1fr) 120px; }
  .style-teaser-art { width: 120px; }
  .style-teaser-back { left: 0; }
  .style-teaser-face { left: 43px; }
  .style-teaser-action { gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
  .style-teaser-action > span { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .style-teaser { transition: none; } }

.story-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; margin-top: 24px; }
.story-table { position: absolute; top: 10%; right: -1%; bottom: 7%; left: -1%; border: 1px solid #bca98b26; border: 1px solid color-mix(in srgb,var(--story-ink) 12%,transparent); border-radius: 50%; background: radial-gradient(ellipse,color-mix(in srgb,var(--story-ink) 8%,transparent),transparent 70%); }
.story-table::after { content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid #bca98b12; border: 1px solid color-mix(in srgb,var(--story-ink) 5%,transparent); border-radius: inherit; }
.story-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.story-kicker { display: flex; align-items: center; }
.story-start { pointer-events: none; }
.story-art { pointer-events: none; perspective: 1100px; container-type: size; }
.story-watermark { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); font-family: Manrope,sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -.07em; color: var(--story-ink); opacity: .08; white-space: nowrap; }
.story-watermark > span { margin-left: 4px; font-size: .65em; }
.story-card { position: absolute; left: 50%; top: 50%; width: var(--card-width); height: calc(var(--card-width) * 1.5); }
.story-card .card-pip { top: 0; right: 0; bottom: 0; left: 0; }
.story-card .playing-card { width: 100%; height: calc(var(--card-width) * 1.5); }
.story-hit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; width: 100%; height: 100%; border: 0; border-radius: inherit; background: none; padding: 0; }
.story-footer { grid-column: 1 / -1; display: flex; align-items: center; align-self: stretch; border-top: 1px solid; }
.story-number { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
.story-track { display: block; width: 80px; height: 2px; border-radius: 2px; background: color-mix(in srgb,var(--story-ink) 13%,transparent); overflow: hidden; }
.story-track i { display: block; width: 100%; height: 100%; transform: scaleX(var(--story-progress)); transform-origin: left; background: var(--story-ink); }
.story-footer a { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-left: auto; color: var(--muted); font-size: 12px; }
.story-footer a:hover { color: var(--text); }
.story-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.story-rummy-target { position: absolute; left: 50%; width: calc(var(--card-width) * 3.5); height: calc(var(--card-width) * 1.7); border: 1px solid #93d5b52b; border: 1px solid color-mix(in srgb,var(--story-ink) 32%,transparent); border-radius: 15px; opacity: var(--reveal); transform: translate(-50%,-50%); background: color-mix(in srgb,var(--story-ink) 3%,transparent); }
.story-combination { position: absolute; left: 50%; display: flex; align-items: center; gap: 5px; color: var(--story-ink); font-size: 10px; font-weight: 650; white-space: nowrap; opacity: var(--reveal); transform: translateX(-50%); }
.eight-flipper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; perspective: 900px; }
.eight-front, .eight-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.eight-front { transform: rotateY(calc(-180deg * (1 - var(--turn)))); opacity: clamp(0,calc((var(--turn) - .49) * 100),1); }
.eight-back { transform: rotateY(calc(180deg * var(--turn))); opacity: clamp(0,calc((.51 - var(--turn)) * 100),1); }
.story-suits { position: absolute; top: 8%; right: 5%; bottom: 8%; left: 5%; transform: rotate(calc(-12deg + 24deg * var(--deal))); }
.story-suits > span { position: absolute; display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid color-mix(in srgb,var(--story-ink) 18%,transparent); border-radius: 50%; color: var(--story-ink); font-family: Georgia,serif; font-size: 24px; opacity: .5; }
.story-suit-change { position: absolute; top: calc(50% + var(--card-width) * .97); left: 50%; transform: translateX(-50%); width: 110px; height: 36px; }
.story-suit-change > span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); font-size: 22px; }
.story-suit-change small { font-family: 'DM Sans',sans-serif; font-size: 11px; color: #eeeaf4; }
.story-suit-before { opacity: calc(1 - var(--reveal)); }
.story-suit-after { color: #d95865; opacity: var(--reveal); }
.story-seat { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--story-ink) 40%,transparent); background: var(--surface); }
.story-trick-caption { position: absolute; top: 8%; left: 50%; transform: translateX(-50%) translateY(calc((1 - var(--reveal)) * 8px)); opacity: var(--reveal); display: flex; align-items: center; gap: 7px; color: var(--story-ink); font-size: 12px; white-space: nowrap; }
#home-style { scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 20px); }

/* Additional games retain the compact library presentation. */
.story-library { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.story-library-card { position: relative; isolation: isolate; display: flex; align-items: center; gap: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); scroll-margin-top: calc(var(--header-height) + 20px); }
.story-library-art { display: flex; flex: 0 0 116px; align-items: center; padding-left: 8px; pointer-events: none; }
.story-library-art > .playing-card { width: 74px; height: auto; aspect-ratio: 2/3; flex: 0 0 74px; transform: rotate(-10deg); }
.story-library-art > .playing-card + .playing-card { margin-left: -40px; transform: rotate(10deg); }
.story-library-copy { min-width: 0; }
.story-library-copy h3 { font-size: 24px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.03em; }
.story-library-copy p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.story-library-copy .story-meta { margin-top: 16px; }
.story-library-action { display: flex; align-items: center; gap: 12px; color: var(--accent); font-size: 13px; font-weight: 650; margin-top: 20px; }
.story-library-card:has(.story-hit:disabled) .story-library-action { color: var(--muted); }
.story-library-card:has(.story-hit:disabled) .story-library-action svg { display: none; }

@media (max-width: 1100px) and (min-width: 761px) { .story-library-card { gap: 18px; padding: 22px; } }
@media (max-width: 760px) {
  .story-library { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .story-library-card { gap: 20px; padding: 24px 20px; }
  .story-library-art { flex-basis: 94px; }
  .story-library-art > .playing-card { width: 66px; flex-basis: 66px; }
  .story-library-copy h3 { font-size: 22px; }
  .story-library-copy p { font-size: 13px; }
  .story-library-copy .story-meta { font-size: 10px; gap: 6px; }
}

/* Large game scenes: copy remains visible while only the artwork moves. */
.game-stories { display: grid; gap: 28px; }
.game-story { --story-ink: #bca9f1; --scene-dark: #171526; --look-x: 0; --look-y: 0; height: auto; margin: 0; --story-progress: 1; --deal: 1; --turn: 1; --gather: .84; --reveal: 1; scroll-margin-top: calc(var(--header-height) + env(safe-area-inset-top) + 16px); }
.story-rummy { --story-ink: #93d5b5; --scene-dark: #10251e; }
.story-borjesson { --story-ink: #e1b987; --scene-dark: #282017; }
.game-story .story-stage {
  position: relative; isolation: isolate; top: auto; height: 540px; min-height: 0;
  display: grid; grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr); grid-template-rows: minmax(0,1fr) 48px;
  align-items: center; column-gap: 0; padding: 32px 44px 10px; border-radius: 28px; overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--story-ink) 16%,#24272a);
  background: radial-gradient(ellipse at 83% 40%,color-mix(in srgb,var(--story-ink) 11%,transparent),transparent 58%),linear-gradient(115deg,#15181a 20%,var(--scene-dark));
  box-shadow: inset 0 1px 0 #ffffff08,0 18px 55px #00000018;
  transition: border-color .35s;
}
.game-story .story-stage::before {
  content: ''; position: absolute; pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.77' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.15' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
  opacity: .12; mix-blend-mode: soft-light;
}
.game-story .story-stage::after { content: ''; position: absolute; pointer-events: none; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--story-ink) 40%,transparent),transparent); }
.game-story .story-copy { position: relative; z-index: 1; padding: 0 0 22px; min-width: 0; }
.game-story .story-kicker { gap: 10px; font-size: 9px; letter-spacing: .15em; font-weight: 600; color: var(--story-ink); }
.game-story .story-kicker .game-emblem { width: 32px; height: 32px; flex-basis: 32px; }
.game-story .story-copy h3 { font-size: clamp(48px,5.3vw,76px); line-height: 1.03; letter-spacing: -.065em; margin: 24px 0 16px; font-weight: 750; }
.game-story .story-copy h3 > span { color: var(--story-ink); }
.game-story .story-copy > p { font-size: 17px; line-height: 1.6; color: #b9bfbe; max-width: 27ch; margin: 0; }
.game-story .story-meta { gap: 8px; font-size: 11px; color: #909c99; margin-top: 26px; }
.game-story .story-meta svg { width: 15px; height: 15px; }
.game-story .story-start { min-height: 49px; margin-top: 30px; padding: 14px 20px; gap: 32px; font-size: 13px; border-radius: 12px; background: #c1adf5; color: #251d3c; box-shadow: inset 0 1px 0 #ffffff3d,0 5px 20px #0002; }
.game-story .story-hit:focus-visible { outline: 2px solid var(--story-ink); outline-offset: -5px; }
.game-story .story-art {
  --card-width: 160px; position: relative; min-height: 0; width: 100%; height: 430px; max-height: none; margin: 0;
  transform: perspective(1100px) rotateY(calc(var(--look-x) * 7deg)) rotateX(calc(var(--look-y) * -5deg));
  transition: transform .45s ease-out; transform-style: preserve-3d;
}
.game-story .story-art::before { content: ''; position: absolute; top: 15%; right: -5%; bottom: 9%; left: -5%; background: radial-gradient(ellipse,color-mix(in srgb,var(--story-ink) 12%,transparent),transparent 67%); filter: blur(14px); pointer-events: none; }
.game-story .story-card { filter: drop-shadow(3px 19px 12px #0007); }
.game-story .story-card .playing-card { box-shadow: 0 2px 0 #d3d4cb,0 4px 0 #aab1ab; }
.game-story .story-table { top: 6%; right: 0; bottom: 8%; left: 0; border-color: color-mix(in srgb,var(--story-ink) 14%,transparent); background: radial-gradient(ellipse,color-mix(in srgb,var(--story-ink) 5%,transparent),transparent 70%); }
.game-story .story-table::after { top: 12px; right: 12px; bottom: 12px; left: 12px; border-color: color-mix(in srgb,var(--story-ink) 7%,transparent); }
.game-story .story-watermark { opacity: .055; font-size: 57px; }
.game-story .story-footer { position: relative; z-index: 3; gap: 16px; border-color: #ffffff0d; }
.game-story .story-number { font-size: 10px; gap: 5px; color: #6c7774; }
.game-story .story-number b { font-size: 12px; color: var(--story-ink); font-weight: 500; }
.game-story .story-track { width: 60px; height: 1px; opacity: .75; }
.game-story .story-footer a { font-size: 11px; color: #9ca5a2; gap: 12px; }
/* Rummy: two staggered trays, offset like cards laid out across a felt table. */
.story-rummy .story-art { --card-width: 107px; }
.story-rummy .story-table { top: 5%; right: 2%; bottom: 7%; left: 2%; border-radius: 34%; transform: rotate(-12deg); }
.story-rummy .story-table::after { border-radius: 32%; }
.game-story .rummy-deal { transform: translate(-50%,-50%) translate(calc(var(--from-x) + (var(--to-x) - var(--from-x)) * var(--deal)),calc(var(--from-y) + (var(--to-y) - var(--from-y)) * var(--deal))) rotate(calc(var(--from-angle) * (1 - var(--deal)) + var(--to-angle) * var(--deal))); }
.rummy-card-0 { --from-x: -136%; --from-y: 3%; --from-angle: -25deg; --to-x: -132%; --to-y: -61%; --to-angle: -10deg; }
.rummy-card-1 { --from-x: -82%; --from-y: -10%; --from-angle: -15deg; --to-x: -22%; --to-y: -74%; --to-angle: -10deg; }
.rummy-card-2 { --from-x: -28%; --from-y: -16%; --from-angle: -5deg; --to-x: 88%; --to-y: -87%; --to-angle: -10deg; }
.rummy-card-3 { --from-x: 28%; --from-y: -16%; --from-angle: 5deg; --to-x: -79%; --to-y: 66%; --to-angle: -10deg; }
.rummy-card-4 { --from-x: 82%; --from-y: -10%; --from-angle: 15deg; --to-x: 31%; --to-y: 53%; --to-angle: -10deg; }
.rummy-card-5 { --from-x: 136%; --from-y: 3%; --from-angle: 25deg; --to-x: 141%; --to-y: 40%; --to-angle: -10deg; }
.game-story .story-rummy-target { width: calc(var(--card-width) * 3.63); height: calc(var(--card-width) * 1.82); border-radius: 14px; border-color: color-mix(in srgb,var(--story-ink) 15%,transparent); background: color-mix(in srgb,var(--story-ink) 3%,transparent); transform: translate(-50%,-50%) rotate(-10deg); }
.game-story .target-set { left: calc(50% - var(--card-width) * .22); top: calc(50% - var(--card-width) * 1.11); }
.game-story .target-run { left: calc(50% + var(--card-width) * .31); top: calc(50% + var(--card-width) * .795); }
.game-story .story-combination { font-size: 9px; padding: 4px 8px; gap: 4px; border-radius: 6px; background: #19352b; box-shadow: 0 0 0 1px #ffffff0a; }
.game-story .combination-set { left: calc(50% + var(--card-width) * 1.24); top: calc(50% - var(--card-width) * .82); transform: rotate(-10deg); }
.game-story .combination-run { left: calc(50% - var(--card-width) * 1.53); top: calc(50% + var(--card-width) * 1.62); transform: rotate(-10deg); }
/* Börjesson: a broad table, four approaches and an asymmetric collected trick. */
.story-borjesson .story-art { --card-width: 124px; transform: none; transition: none; transform-style: flat; perspective: none; }
.story-borjesson .trick-card { filter: none; }
.story-borjesson .trick-card .playing-card { box-shadow: 0 2px 0 #d3d4cb,0 4px 0 #aab1ab,3px 19px 24px #0007; }
.story-borjesson .story-table { top: 9%; right: 3%; bottom: 10%; left: 3%; transform: rotate(-18deg); border-radius: 35%; border-color: #d1a46426; background: repeating-linear-gradient(90deg,#dcba7902 0px,#dcba7902 1px,transparent 1px,transparent 5px),radial-gradient(ellipse,#a9743020,transparent 75%); }
.story-borjesson .story-table::after { top: 14px; right: 14px; bottom: 14px; left: 14px; border-radius: 32%; }
.game-story .trick-card { transform: translate(-50%,-50%) translate(calc(var(--from-x) * (1 - var(--deal)) + var(--to-x) * var(--deal) * (1 - var(--gather)) + var(--end-x) * var(--gather)),calc(var(--from-y) * (1 - var(--deal)) + var(--to-y) * var(--deal) * (1 - var(--gather)) + var(--end-y) * var(--gather))) rotate(calc(var(--angle) * (1 - var(--gather)) + var(--stack-angle) * var(--gather))); }
.trick-card-0 { --from-x: -8%; --from-y: -60%; --to-x: -24%; --to-y: -35%; --angle: -15deg; --end-x: -63%; --end-y: -25%; --stack-angle: -25deg; }
.trick-card-1 { --from-x: 112%; --from-y: -12%; --to-x: 48%; --to-y: -9%; --angle: 17deg; --end-x: 48%; --end-y: -10%; --stack-angle: 19deg; }
.trick-card-2 { --from-x: 10%; --from-y: 56%; --to-x: 12%; --to-y: 36%; --angle: -5deg; --end-x: 4%; --end-y: 27%; --stack-angle: -7deg; }
.trick-card-3 { --from-x: -112%; --from-y: 0%; --to-x: -43%; --to-y: 4%; --angle: -24deg; --end-x: -10%; --end-y: -12%; --stack-angle: 9deg; }
.game-story .story-seat { width: 9px; height: 9px; border-color: #d4b38550; background: #403325; box-shadow: 0 0 0 5px #eac08505; }
.game-story .seat-north { top: 4%; left: 58%; }
.game-story .seat-east { right: 2%; top: 43%; }
.game-story .seat-west { left: 0; top: 55%; }
.game-story .seat-south { left: 28%; bottom: 10%; background: color-mix(in srgb,var(--story-ink) 63%,#403325); box-shadow: 0 0 18px color-mix(in srgb,var(--story-ink) 38%,transparent); }
.game-story .story-trick-caption { top: auto; bottom: 2%; font-size: 11px; gap: 7px; color: var(--story-ink); }
/* Vändåtta: an oversized card turn across a tilted orbit of suit markers. */
.story-eights .story-art { --card-width: 167px; }
.story-eights .story-table { top: 5%; right: -2%; bottom: 7%; left: -2%; transform: rotate(-25deg); border-color: #bda9ef26; }
.story-eights .story-table::after { top: 20px; right: 20px; bottom: 20px; left: 20px; border-color: #bda9ef13; }
.game-story .eight-under { transform: translate(-80%,-51%) rotate(-19deg); }
.game-story .eight-moving { transform: translate(-30%,-52%) translate(calc(44% * (1 - var(--deal))),calc(-9% * (1 - var(--deal)))) rotate(calc(20deg - 9deg * var(--deal))); }
.game-story .story-suits { top: 5%; right: -1%; bottom: 6%; left: -1%; transform: rotate(calc(-16deg + 21deg * var(--deal))); }
.game-story .story-suits > span { background: #a18aca07; border-color: #c8b7f62b; color: #c4b1f2; opacity: .65; width: 46px; height: 46px; font-size: 25px; }
.game-story .story-suits > span:nth-child(1) { left: 11%; top: 0; transform: rotate(-16deg); }
.game-story .story-suits > span:nth-child(2) { right: 0; top: 23%; transform: rotate(17deg); }
.game-story .story-suits > span:nth-child(3) { left: 0; bottom: 20%; transform: rotate(-9deg); }
.game-story .story-suits > span:nth-child(4) { right: 10%; bottom: 0; transform: rotate(15deg); }
.game-story .story-suit-change { top: 88%; width: 115px; height: 32px; }
.game-story .story-suit-change > span { background: #272232; border-color: #d0b9ff2b; box-shadow: 0 4px 12px #0002; }
.game-story .story-suit-change small { font-size: 10px; }
.story-library { margin-top: 0; gap: 22px; }
#games { scroll-margin-top: calc(var(--header-height) + 20px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .game-story .story-stage:has(.story-hit:hover) { border-color: color-mix(in srgb,var(--story-ink) 34%,#24272a); }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .game-story .story-stage { height: 480px; padding: 26px 28px 8px; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); }
  .game-story .story-art { height: 380px; }
  .story-rummy .story-art { --card-width: 80px; }
  .story-borjesson .story-art { --card-width: 96px; }
  .story-eights .story-art { --card-width: 128px; }
  .game-story .story-copy h3 { font-size: 49px; }
  .game-story .story-copy > p { font-size: 14px; }
  .game-story .story-kicker { font-size: 7px; gap: 7px; letter-spacing: .08em; }
  .game-story .story-kicker .game-emblem { width: 27px; height: 27px; flex-basis: 27px; }
  .game-story .story-start { gap: 20px; }
  .game-story .story-combination { font-size: 8px; padding: 3px 6px; }
}
@media (max-width: 760px) {
  .game-stories { gap: 22px; }
  .game-story .story-stage { height: auto; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto 292px auto auto 40px; padding: 22px 22px 8px; border-radius: 25px; background: radial-gradient(ellipse at 65% 49%,color-mix(in srgb,var(--story-ink) 13%,transparent),transparent 65%),linear-gradient(135deg,#15181a,var(--scene-dark)); }
  .game-story .story-copy { display: contents; }
  .game-story .story-kicker { grid-row: 1; font-size: 7.5px; letter-spacing: .1em; gap: 8px; }
  .game-story .story-kicker .game-emblem { width: 25px; height: 25px; flex-basis: 25px; }
  .game-story .story-copy h3 { grid-row: 2; font-size: 46px; margin: 13px 0 7px; }
  .game-story .story-copy > p { grid-row: 3; font-size: 13px; line-height: 1.5; max-width: none; }
  .game-story .story-art { grid-row: 4; height: 272px; margin: 9px 0 11px; width: calc(100% + 12px); justify-self: center; }
  .game-story .story-meta { grid-row: 5; margin: 5px 0 0; font-size: 10px; }
  .game-story .story-start { grid-row: 6; justify-self: stretch; justify-content: space-between; min-height: 47px; margin: 18px 0 20px; padding: 12px 16px; font-size: 13px; border-radius: 11px; }
  .game-story .story-footer { grid-row: 7; gap: 12px; }
  .game-story .story-footer a { font-size: 10px; min-height: 40px; }
  .game-story .story-number { font-size: 9px; }
  .game-story .story-number b { font-size: 11px; }
  .game-story .story-track { width: 45px; }
  .story-rummy .story-art { --card-width: 56px; }
  .story-borjesson .story-art { --card-width: 64px; }
  .story-eights .story-art { --card-width: 90px; }
  .game-story .story-combination { font-size: 8px; padding: 3px 5px; gap: 3px; }
  .game-story .story-combination svg { width: 11px; height: 11px; }
  .game-story .story-watermark { font-size: 37px; }
  .game-story .story-suits > span { width: 31px; height: 31px; font-size: 19px; }
  .game-story .story-suit-change { height: 28px; width: 98px; }
  .game-story .story-suit-change > span { font-size: 19px; }
  .game-story .story-trick-caption { font-size: 9px; }
}
@media (max-width: 360px) {
  .game-story .story-stage { padding-inline: 18px; grid-template-rows: auto auto auto 267px auto auto 40px; }
  .game-story .story-copy h3 { font-size: 42px; }
  .game-story .story-kicker { font-size: 6.7px; letter-spacing: .05em; }
  .game-story .story-art { height: 247px; }
  .game-story .story-copy > p { font-size: 12px; }
}
/* Keep unsupported units out of custom properties: var() fallbacks do not
   recover when a substituted container unit is invalid in an older browser. */
@supports (width: 1cqw) and (height: 1cqh) {
  .game-story .story-art { --card-width: min(160px,30cqw); }
  .story-rummy .story-art { --card-width: min(112px,25cqh,25cqw); }
  .story-borjesson .story-art { --card-width: min(135px,29cqh,27cqw); }
  .story-eights .story-art { --card-width: min(174px,34cqw,39cqh); }
  @media (max-width: 760px) {
    .story-rummy .story-art { --card-width: min(72px,24cqh,23cqw); }
    .story-borjesson .story-art { --card-width: min(92px,29cqh,27cqw); }
    .story-eights .story-art { --card-width: min(119px,36cqw,39cqh); }
  }
}
/* Declarations containing var() can fail at computed-value time; set these
   fallbacks explicitly instead of relying on an earlier declaration. */
@supports not (color: color-mix(in srgb, #000, #fff)) {
  .game-story .story-stage { border: 1px solid #343a3b; background: linear-gradient(115deg,#15181a 20%,var(--scene-dark)); }
  .game-story .story-table { border: 1px solid #bca98b26; background: radial-gradient(ellipse,#bca98b0d,transparent 70%); }
  .game-story .story-table::after { border: 1px solid #bca98b12; }
  .game-story .story-rummy-target { border: 1px solid #93d5b52b; background: #93d5b508; }
  .game-story .story-track { background: #bca98b22; }
  .game-story .seat-south { background: #a68a63; box-shadow: 0 0 18px #e1b98760; }
}
html[data-theme="daylight"] .game-story .story-stage { color: #f0f1ee; }
html[data-theme="daylight"] .story-borjesson { --story-ink: #e1b987; }
html[data-theme="daylight"] .game-story .story-copy h3 { color: #f0f1ee; }
@media (prefers-reduced-motion: reduce) {
  html:has(.game-stories) { scroll-behavior: auto; }
  .game-story { --story-progress: 1!important; --deal: 1!important; --turn: 1!important; --gather: .84!important; --reveal: 1!important; }
  .game-story .story-art,.game-story .story-stage { transition: none; transform: none; }
}

.style-page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.style-share-control{display:inline-flex;flex-shrink:0}
.style-share-control>.button{white-space:nowrap;gap:9px}
.shareable-deck{--deck-caption-inset:22px;--deck-caption-top:12px;position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 44px var(--deck-caption-inset);grid-template-rows:auto auto 1fr}
/* Share and select remain separate buttons, but use the same caption row. */
.shareable-deck>.deck-choice{grid-area:1/1/4/4;display:grid;grid-template-rows:subgrid;min-width:0;width:100%}
.shareable-deck .theme-label{grid-row:2/4;display:grid;grid-template-columns:minmax(0,1fr) 22px 44px;grid-template-rows:subgrid;min-width:0;padding:var(--deck-caption-top) var(--deck-caption-inset) 18px;column-gap:12px;row-gap:0}
.shareable-deck .theme-label>span:first-child{display:contents}
.shareable-deck .theme-label strong{grid-area:1/1;align-self:center;overflow-wrap:break-word}
.shareable-deck .theme-label small{grid-area:2/1/3/4;align-self:start;margin-top:4px;overflow-wrap:break-word}
.shareable-deck .choice-dot{grid-area:1/2;align-self:center}
.shareable-deck>.style-share-control{grid-area:2/2;align-self:center;justify-self:center;margin-top:var(--deck-caption-top);z-index:1}
.style-share-small{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:var(--surface)}
.style-share-small:focus-visible,.style-share-control>.button:focus-visible,.shared-style-page :focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.style-share-modal{text-align:left;white-space:normal}
.style-share-modal .share-room>svg{color:var(--accent);flex-shrink:0}
.shared-style-page{max-width:1080px;margin:0 auto;padding:30px 0 40px}
.shared-style-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-height:44px}
.shared-style-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,70px);margin-top:24px}
.shared-style-visual{min-width:0;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:var(--surface)}
.style-art{--art-bg:#17181f;--art-accent:#bda8fa;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.18;background:radial-gradient(ellipse at 55% 50%,color-mix(in srgb,var(--art-accent),transparent 85%),transparent 70%),var(--art-bg)}
.style-art[data-style-theme=daylight]{--art-bg:#eef0f6;--art-accent:#7953d4}
.style-art[data-style-theme=arcade]{--art-bg:#1d1330;--art-accent:#d8f479}
.style-art-orbit{position:absolute;inset:15% 13%;border:1px solid color-mix(in srgb,var(--art-accent),transparent 86%);border-radius:50%;transform:rotate(-20deg);box-shadow:0 0 0 22px color-mix(in srgb,var(--art-accent),transparent 98%)}
.style-art-cards{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:7%}
.style-art-card{position:relative;flex:0 0 31%;min-width:0;margin:0 -4%;transform:translateY(6%) rotate(-11deg)}
.style-art-card:nth-last-child(2){z-index:3;transform:translateY(-5%) rotate(0)}
.style-art-card:last-child{z-index:2;transform:translateY(6%) rotate(12deg)}
.style-art-card.style-art-back{transform:translateY(12%) rotate(-19deg);z-index:0}
.style-art-card>.playing-card{width:100%;height:auto;aspect-ratio:2/3;container-type:inline-size;border-radius:8%;box-shadow:0 4px 0 #b8b5ac,0 12px 23px #0003}
.style-art-spark{position:absolute;right:11%;top:15%;font-size:25px;color:var(--art-accent)}
.shared-style-details{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;padding:17px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.shared-style-details>span{display:inline-flex;align-items:center;gap:7px}
.shared-style-details svg{color:var(--accent)}
.shared-style-copy{min-width:0}
.shared-style-copy>.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--accent)}
.shared-style-copy h1{font-size:clamp(38px,5vw,66px);line-height:1.07;letter-spacing:-2px;margin:16px 0 20px;overflow-wrap:break-word}
.shared-style-copy h1>span{color:var(--accent)}
.shared-style-copy>p{font-size:18px;line-height:1.6;margin:0 0 15px}
.shared-style-play{margin-top:15px;min-height:52px;width:100%;justify-content:space-between}
.shared-style-guest{display:block;margin-top:12px;font-size:12px;line-height:1.6;text-align:center;color:var(--muted)}
.shared-style-share{display:flex;justify-content:center;margin-top:22px}
.shared-style-share .button{min-height:42px;font-size:13px;padding:9px 16px;background:transparent;border-color:transparent;color:var(--muted)}
.shared-style-copy>.shared-style-error{color:var(--red,#e57880);font-size:13px;margin:15px 0 0}
.shared-style-games{display:flex;justify-content:center;gap:16px;margin:38px 0 0;padding-top:25px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.shared-style-games>span{color:var(--accent)}
@media(hover:hover){.style-share-small:hover{color:var(--accent);border-color:var(--accent)}.shared-style-share .button:hover{color:var(--text);border-color:var(--line)}}
@media(max-width:760px){
  .style-page-heading{align-items:flex-start;flex-direction:column;gap:15px}
  .style-page-heading>.style-share-control>.button{min-height:44px;font-size:13px;padding:10px 16px}
  .shareable-deck{--deck-caption-inset:15px;--deck-caption-top:8px}
  .shareable-deck .theme-label{padding-bottom:15px}
  .shared-style-page{padding-top:12px}
  .shared-style-hero{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:14px}
  .shared-style-visual{border-radius:22px}
  .shared-style-visual>.style-art{aspect-ratio:1.45}
  .shared-style-copy h1{font-size:42px;margin:12px 0 15px}
  .shared-style-copy>p{font-size:16px}
  .shared-style-games{gap:12px;font-size:12px;margin-top:26px}
  .shared-style-share{margin-top:14px}
}
@media(max-height:500px) and (orientation:landscape){.shared-style-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px}.shared-style-copy h1{font-size:36px}.shared-style-share{margin-top:8px}}

/* Card details follow the card itself, including tiny action and meld previews.
   Game-specific hand sizes and the larger compact-hand indices stay in control. */
.playing-card { container-type: inline-size; border-radius: 8% / 5.333333%; }
.playing-card .card-corner { top: 6%; left: 7%; font-size: 14cqw; }
.playing-card .card-corner b { font-size: 22cqw; }
.playing-card .corner-bottom { top: auto; left: auto; right: 7%; bottom: 6%; }
.playing-card .joker-label { font-size: 7cqw; line-height: 1.2; letter-spacing: .02em; }
.playing-card .classic-court b { font-size: 35cqw; }
.playing-card .classic-court > span { font-size: 25cqw; }

/* Shared display: a separate, read-only surface. Never style the normal game globally. */
.shared-screen { --screen-container-layout:0; --screen-gutter:3vw; min-height:100vh; min-height:100svh; padding:24px var(--screen-gutter) 32px; background:var(--bg); color:var(--text); position:relative; isolation:isolate; }
.screen-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-left:calc(0px - var(--screen-gutter)); margin-right:calc(0px - var(--screen-gutter)); padding:0 var(--screen-gutter) 22px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; background:var(--bg); }
.screen-brand { display:flex; align-items:center; gap:10px; font-family:Manrope,sans-serif; font-size:30px; letter-spacing:-1.5px; font-weight:800; }
.screen-brand img { border-radius:12px; width:36px; height:36px; }
.screen-brand b { color:var(--accent); }
.screen-header-tools { display:flex; align-items:center; gap:22px; }
.screen-header-tools .round-button { width:42px; height:42px; flex:none; }
.screen-live { display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; color:var(--green); }
.screen-live i { position:relative; width:12px; height:12px; border-radius:50%; background:currentColor; }
.screen-live.is-offline { color:var(--muted); }
.screen-live:not(.is-offline) i { box-shadow:0 0 10px rgba(134,217,177,.25); }
.screen-live:not(.is-offline) i::after { content:""; position:absolute; top:-5px; right:-5px; bottom:-5px; left:-5px; border:1px solid currentColor; border-radius:50%; opacity:.18; pointer-events:none; }
@keyframes screen-ready-pulse {
  0%, 28%, 100% { opacity:.85; transform:scale(1); }
  12% { opacity:1; transform:scale(1.12); }
}
@keyframes screen-ready-ring {
  0% { opacity:.1; transform:scale(.8); }
  10% { opacity:.28; transform:scale(1); }
  30%, 100% { opacity:0; transform:scale(1.5); }
}
@media(prefers-reduced-motion:no-preference) {
  .screen-live:not(.is-offline) i { animation:screen-ready-pulse 6s ease-in-out infinite; }
  .screen-live:not(.is-offline) i::after { animation:screen-ready-ring 6s ease-out infinite; }
}
.screen-style-trigger { display:flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; padding:0 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--text); font-size:13px; }
.screen-style-trigger:hover { border-color:var(--accent); color:var(--accent); }
.screen-style-picker { width:min(860px,calc(100vw - 40px)); max-width:none; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); padding:0; margin:auto; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:26px; background:var(--surface); color:var(--text); box-shadow:0 28px 100px #0006; overflow:hidden; }
.screen-style-picker[open] { display:flex; flex-direction:column; }
.screen-style-picker::backdrop { background:#05070bb3; backdrop-filter:blur(6px); }
.screen-style-picker > header { display:flex; justify-content:space-between; align-items:flex-start; flex:none; padding:24px 26px 18px; gap:16px; position:relative; z-index:2; background:var(--surface); }
.screen-style-picker .eyebrow { color:var(--accent); font-size:10px; letter-spacing:1.5px; }
.screen-style-picker h2 { font-size:30px; letter-spacing:-.8px; margin:4px 0; }
.screen-style-picker header p { font-size:13px; margin:7px 0 0; }
.screen-style-picker .screen-style-close { width:44px; height:44px; flex:none; }
.screen-style-sections { display:flex; flex:none; gap:4px; padding:4px; margin:0 26px 18px; border:1px solid var(--line); border-radius:14px; background:var(--bg); }
.screen-style-sections > button { display:flex; flex:1; justify-content:center; align-items:center; gap:8px; min-height:44px; border-radius:10px; color:var(--muted); font-size:13px; }
.screen-style-sections > button[aria-pressed=true] { background:var(--accent-soft); color:var(--accent); }
.screen-style-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:2px 26px 24px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; min-height:0; isolation:isolate; }
.screen-style-options.is-theme { grid-template-columns:repeat(3,minmax(0,1fr)); }
.screen-style-option { position:relative; display:flex; flex-direction:column; min-width:0; padding:14px 10px 12px; gap:10px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(150deg,var(--surface-raised),var(--surface)); text-align:left; color:var(--text); }
.screen-style-option[aria-pressed=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:linear-gradient(150deg,var(--accent-soft),var(--surface)); }
.screen-style-option:hover { border-color:var(--accent); }
.screen-style-cards, .screen-style-back { display:flex; justify-content:center; align-items:center; height:116px; padding:8px 0; pointer-events:none; }
.screen-style-cards .playing-card { width:62px; height:93px; flex:none; }
.screen-style-cards .playing-card + .playing-card { margin-left:-22px; }
.screen-style-cards .playing-card:first-child { transform:rotate(-10deg) translateY(4px); }
.screen-style-cards .playing-card:nth-child(2) { z-index:1; transform:translateY(-4px); }
.screen-style-cards .playing-card:last-child { transform:rotate(10deg) translateY(4px); }
.screen-style-back .playing-card { width:65px; height:97.5px; }
.screen-style-caption { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; }
.screen-style-caption strong { font-size:12px; line-height:1.4; }
.screen-style-check { width:20px; height:20px; flex:none; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; }
[aria-pressed=true] > .screen-style-caption .screen-style-check { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.screen-style-theme { position:relative; height:140px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); display:flex; align-items:flex-end; gap:5px; overflow:hidden; pointer-events:none; }
.screen-style-theme[data-theme=midnight] { --bg:#101114; --surface-raised:#202329; --line:#2a2d33; --green:#86d9b1; --accent:#bea8fa; --muted:#93979f; }
.screen-style-theme[data-theme=daylight] { --bg:#f5f6fa; --surface-raised:#ecedf4; --line:#dddfea; --green:#257951; --accent:#7652d6; --muted:#696d7d; }
.screen-style-theme[data-theme=arcade] { --bg:#111020; --surface-raised:#28203d; --line:#3b2c54; --green:#dcfa79; --accent:#dcfa79; --muted:#afa0bf; }
.screen-style-theme-table { position:absolute; inset:16px 12px 34px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--green) 40%,var(--line)); border-radius:50%; background:var(--surface-raised); }
.screen-style-theme .playing-card { width:44px; height:66px; transform:rotate(12deg); }
.screen-style-theme > i { width:16px; height:5px; background:var(--accent); border-radius:4px; }
.screen-style-theme > i:nth-of-type(2) { background:var(--green); }
.screen-style-theme > i:nth-of-type(3) { background:var(--muted); }
.screen-style-picker > footer { display:flex; flex:none; align-items:center; justify-content:space-between; gap:18px; padding:15px 26px; border-top:1px solid var(--line); background:var(--surface-raised); }
.screen-style-picker footer p { font-size:12px; margin:0; }
.screen-style-picker footer .text-button { min-height:36px; font-size:12px; padding:5px 0; gap:6px; }
.screen-style-picker footer .button { min-height:44px; padding:10px 16px; font-size:13px; flex:none; }
.screen-style-picker .screen-style-save-error { color:var(--accent); max-width:300px; }
@media(max-width:600px) {
  .screen-header-tools:has(.screen-style-control) { gap:8px; }
  .screen-style-picker { width:calc(100vw - 24px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); border-radius:21px; }
  .screen-style-picker > header { padding:18px 16px 14px; }
  .screen-style-picker h2 { font-size:26px; }
  .screen-style-sections { margin:0 16px 14px; }
  .screen-style-options { grid-template-columns:repeat(2,minmax(0,1fr)); padding:2px 16px 16px; gap:10px; }
  .screen-style-options.is-theme { grid-template-columns:1fr; }
  .screen-style-picker > footer { padding:12px 16px; gap:10px; }
  .screen-style-picker footer p { font-size:11px; }
  .screen-style-option { padding-inline:8px; }
}
@media(max-width:360px) {
  .screen-style-trigger { width:44px; padding:0; }
  .screen-style-trigger > span { display:none; }
  .screen-style-cards .playing-card { width:52px; height:78px; }
  .screen-style-cards .playing-card + .playing-card { margin-left:-21px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .screen-style-picker > header { padding:12px 20px; }
  .screen-style-picker header p, .screen-style-picker header .eyebrow { display:none; }
  .screen-style-picker h2 { font-size:24px; }
  .screen-style-sections { margin:0 20px 10px; }
  .screen-style-picker > footer { padding:8px 20px; }
  .screen-style-picker footer > div { display:flex; align-items:center; gap:16px; }
}
.screen-pairing { min-height:calc(100vh - 135px); min-height:calc(100svh - 135px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:25px 0; }
.screen-pair-art { position:relative; width:220px; height:145px; display:grid; place-items:center; margin-bottom:30px; }
.screen-pair-orbit { position:absolute; width:300px; height:230px; border-radius:50%; background:radial-gradient(ellipse,var(--accent-soft),transparent 70%); }
.screen-pair-monitor { display:grid; place-items:center; position:relative; color:var(--accent); }
.screen-pair-monitor > svg { width:148px; height:148px; stroke-width:.8; }
.screen-pair-monitor > span { position:absolute; top:46px; color:var(--green); }
.screen-pair-phone { position:absolute; right:20px; bottom:5px; width:49px; height:76px; display:grid; place-items:center; background:var(--surface); color:var(--green); border:2px solid color-mix(in srgb,var(--green) 40%,var(--line)); border-radius:12px; transform:rotate(12deg); box-shadow:0 8px 24px #0003; }
.screen-pairing > .eyebrow { font-size:11px; letter-spacing:2px; }
.screen-pairing h1 { font-size:clamp(32px,3.5vw,58px); margin:16px 0 18px; }
.screen-pairing h1 > span { color:var(--accent); }
.screen-pairing > p { font-size:clamp(16px,1.4vw,22px); line-height:1.7; }
.screen-pairing p strong { color:var(--text); font-weight:550; }
.screen-pair-code { display:flex; gap:8px; margin:34px 0 14px; font-size:clamp(32px,4.5vw,72px); font-weight:650; font-variant-numeric:tabular-nums; }
.screen-pair-code > span { background:var(--surface); border:1px solid var(--line); border-radius:16px; width:1.2em; padding:8px 0; box-shadow:0 5px 0 color-mix(in srgb,var(--line),transparent 45%); }
.screen-pair-code > span:nth-child(3) { margin-right:14px; }
.screen-code-time { font-size:13px; color:var(--muted); }
.screen-pairing footer { margin-top:40px; display:flex; gap:9px; align-items:center; font-size:13px; color:var(--muted); }
.screen-new-code { display:grid; justify-items:center; gap:20px; margin:28px 0; max-width:450px; }
.screen-error { text-align:center; padding:12px; color:var(--accent); }
.screen-turn { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:28px 0; }
.screen-turn-person { display:flex; align-items:center; gap:22px; min-width:0; flex:1; }
.screen-turn-person > div { min-width:0; }
.screen-turn-person > img { width:64px; height:64px; border-radius:50%; outline:2px solid var(--accent); outline-offset:5px; flex:none; box-shadow:0 0 0 10px var(--accent-soft); }
.screen-turn-person .eyebrow { font-size:11px; letter-spacing:1.7px; }
.screen-turn-person.has-actor .eyebrow { display:flex; align-items:center; gap:7px; }
.screen-turn-person.has-actor .eyebrow::before { content:""; width:5px; height:5px; background:var(--accent); border-radius:50%; flex:none; }
.screen-turn-person h1 { font-size:clamp(24px,2.3vw,40px); margin:4px 0; line-height:1.2; overflow-wrap:anywhere; }
.screen-turn-person p { font-size:16px; margin:0; }
.screen-turn-symbol { width:64px; height:64px; display:grid; place-items:center; color:var(--accent); border-radius:20px; background:var(--accent-soft); flex:none; }
.screen-goal { display:flex; align-items:center; gap:18px; padding:16px 24px 16px 18px; width:clamp(300px,30vw,540px); max-width:48%; flex:none; border:1px solid color-mix(in srgb,var(--green) 18%,var(--line)); border-radius:22px; background:linear-gradient(115deg,color-mix(in srgb,var(--green) 5%,var(--surface)),var(--surface)); }
.screen-goal > div { min-width:0; }
.screen-goal .eyebrow { display:block; font-size:10px; color:var(--green); letter-spacing:1.3px; margin-bottom:6px; }
.screen-goal strong { display:block; font-size:clamp(19px,1.6vw,28px); line-height:1.25; font-family:Manrope,sans-serif; letter-spacing:-.5px; text-wrap:balance; }
.screen-round { width:60px; height:60px; flex:none; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle closest-side,var(--surface) calc(100% - 2px),transparent calc(100% - 1px)),conic-gradient(var(--green) var(--round-progress),var(--line) 0); font-variant-numeric:tabular-nums; }
.screen-round b { font-size:23px; line-height:1.1; font-family:Manrope,sans-serif; }
.screen-round small { font-size:10px; color:var(--muted); margin-top:2px; }
.screen-players { display:flex; gap:12px; list-style:none; padding:0; margin:0 0 22px; }
.screen-players > li { position:relative; display:flex; align-items:center; gap:10px; min-width:0; flex:1; padding:13px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.screen-players > li.is-active { border-color:var(--accent); background:linear-gradient(115deg,var(--accent-soft),var(--surface)); }
.screen-player-number { color:var(--muted); font-size:11px; }
.screen-players img { width:36px; height:36px; flex:none; border-radius:50%; }
.screen-players li > div { min-width:0; }
.screen-players strong { display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.screen-players li > div > span { color:var(--muted); font-size:12px; }
.screen-player-state { margin-left:auto; color:var(--green); font-size:11px; display:flex; align-items:center; gap:6px; }
.screen-board { display:grid; grid-template-columns:minmax(210px,.8fr) minmax(0,3fr); gap:20px; align-items:stretch; }
.screen-market { position:relative; isolation:isolate; overflow:hidden; border:1px solid color-mix(in srgb,var(--green) 27%,var(--line)); border-radius:26px; padding:24px; background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--green) 9%,var(--surface)),var(--surface)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.screen-market::before { content:""; position:absolute; z-index:-1; inset:12% 5%; border:1px solid color-mix(in srgb,var(--green) 9%,transparent); border-radius:50%; pointer-events:none; }
.screen-market-title { position:absolute; top:24px; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:9px; color:var(--green); font-size:11px; letter-spacing:1.4px; }
.screen-piles { display:flex; justify-content:center; gap:22px; width:100%; }
.screen-piles > div { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; flex:1; }
.screen-piles .playing-card, .screen-empty-card { width:76px; height:114px; max-width:100%; margin-bottom:10px; }
@supports (aspect-ratio:2/3) {
  .screen-piles .playing-card, .screen-empty-card { width:clamp(76px,7.5vw,145px); height:auto; aspect-ratio:2/3; }
}
.screen-empty-card { border:1px dashed var(--line); border-radius:10px; }
.screen-piles strong { font-size:15px; }
.screen-piles > div > span { font-size:13px; color:var(--muted); }
.screen-melds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.screen-melds.has-six { grid-template-columns:repeat(3,minmax(0,1fr)); }
.screen-owner { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:16px; min-width:0; }
.screen-owner.is-active { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 65%); }
.screen-owner > header { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.screen-owner header img { width:36px; height:36px; border-radius:50%; flex:none; }
.screen-owner h2 { font-size:18px; min-width:0; overflow-wrap:anywhere; }
.screen-owner-order { width:24px; height:24px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:11px; color:var(--muted); }
.screen-owner.is-active .screen-owner-order { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.screen-owner-melds { display:grid; gap:14px; isolation:isolate; overflow:hidden; }
.screen-meld { min-width:0; }
.screen-meld-cards { display:flex; align-items:center; justify-content:center; padding-bottom:5px; --display-card:48px; }
.screen-meld-cards .screen-display-card { position:relative; width:var(--display-card); height:calc(var(--display-card) * 1.5); flex:none; margin-right:calc(var(--display-card) * -.38); border-radius:6px; }
.screen-meld-cards .screen-display-card:last-child { margin-right:0; }
/* Custom properties accept unknown units, so gate the whole value instead of
   declaring a pixel value before a cqw value that fails at computed-value time. */
@supports (container-type:size) and (width:1cqw) and (height:1cqh) {
  .shared-screen { --screen-container-layout:1; }
  .screen-meld { container-type:inline-size; }
  .screen-meld-cards { --display-card:min(78px,calc(100cqw / (var(--meld-count) * .62 + .38))); }
}

.screen-meld-empty { min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--muted); }
.screen-empty-fan { display:block; position:relative; width:72px; height:52px; margin-bottom:8px; color:var(--green); opacity:.4; }
.screen-empty-fan i { position:absolute; left:22px; top:5px; width:30px; height:43px; border:1px solid currentColor; border-radius:5px; background:var(--surface); }
.screen-empty-fan i:first-child { transform:translateX(-13px) rotate(-17deg); }
.screen-empty-fan i:last-child { transform:translateX(13px) rotate(17deg); }
.screen-empty-fan i:nth-child(2) { z-index:1; }
.screen-empty-fan i:nth-child(2)::after { content:""; position:absolute; inset:7px; border:1px solid currentColor; border-radius:3px; }
.screen-meld-empty > span { font-size:11px; }
.screen-reconnecting { position:fixed; top:0; right:0; bottom:0; left:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; background:var(--bg); padding:24px; overflow-y:auto; }
/* Reconnection must stay legible on TVs without modern positioning or glass effects. */
@supports (background:color-mix(in srgb,black 95%,transparent)) and (backdrop-filter:blur(1px)) {
  .screen-reconnecting { background:color-mix(in srgb,var(--bg) 95%,transparent); backdrop-filter:blur(12px); }
}
.screen-reconnecting > svg { color:var(--accent); }
.screen-reconnecting h2 { font-size:32px; }
.screen-results { text-align:center; max-width:920px; margin:35px auto 0; padding:25px; }
.screen-results-heading { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:24px; text-align:left; }
.screen-results-heading > div { min-width:0; }
.screen-result-medal { width:64px; height:64px; flex:none; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:20px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.screen-results-heading .eyebrow { font-size:11px; letter-spacing:1.5px; }
.screen-results h2 { font-size:clamp(26px,2.8vw,44px); line-height:1.2; margin:6px 0 0; text-wrap:balance; overflow-wrap:anywhere; }
.screen-results table { width:100%; text-align:right; border-collapse:separate; border-spacing:0 6px; margin-bottom:20px; font-variant-numeric:tabular-nums; table-layout:fixed; }
.screen-results th:first-child { text-align:left; width:62%; }
.screen-results thead th { font-size:13px; font-weight:400; color:var(--muted); padding:8px 18px; }
.screen-results tbody th, .screen-results td { padding:10px 18px; font-size:20px; background:var(--surface); border-block:1px solid var(--line); vertical-align:middle; }
.screen-results tbody th { border-left:1px solid var(--line); border-radius:15px 0 0 15px; }
.screen-results tbody td:last-child { border-right:1px solid var(--line); border-radius:0 15px 15px 0; }
.screen-results tbody tr.is-leading > * { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); }
.screen-standing-player { display:flex; align-items:center; gap:15px; min-width:0; }
.screen-standing-player img { width:48px; height:48px; aspect-ratio:1; object-fit:cover; flex:none; border-radius:50%; box-shadow:0 0 0 1px var(--line); }
.is-leading .screen-standing-player img { box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,var(--line)); }
.screen-standing-rank { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; font-size:13px; font-weight:550; color:var(--muted); }
.is-leading .screen-standing-rank { background:var(--accent); color:var(--accent-ink); }
.screen-standing-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.screen-results td.screen-standing-score { color:var(--muted); font-size:17px; }
.screen-results td.screen-standing-total { font-weight:750; font-size:24px; }
.screen-results > p { font-size:14px; }
.screen-lobby { min-height:45vh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; text-align:center; }
.screen-lobby > svg { color:var(--accent); }
/* The existing view selector gains a compact menu, including on desktop. */
.table-view-choice.has-screen-tools .responsive-tools { display:block; position:relative; }
.table-view-choice.has-screen-tools .responsive-tools-trigger { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 13px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:13px; background:var(--accent-soft); color:var(--accent); font-size:13px; }
.table-view-choice.has-screen-tools .responsive-tools-content { display:none; position:absolute; z-index:18; right:0; top:calc(100% + 9px); width:220px; max-width:calc(100vw - 32px); padding:7px; border:1px solid var(--line); border-radius:17px; background:var(--surface-raised); box-shadow:0 12px 35px #0005; }
.table-view-choice.has-screen-tools .responsive-tools.is-open > .responsive-tools-content { display:block; }
.has-screen-tools .table-view-options { display:flex; flex-direction:column; padding:0; border:0; background:none; gap:4px; }
.has-screen-tools .table-view-options > button { justify-content:flex-start; min-height:44px; }
.has-screen-tools .table-view-options > .screen-menu-action { border-top:1px solid var(--line); border-radius:0 0 10px 10px; margin-top:5px; padding-top:12px; color:var(--green); }
.screen-manager { max-width:440px; }
.screen-hand-offer { width:calc(100% - 32px); margin:auto; border-radius:25px; }
.screen-hand-offer .r-sheet-header { align-items:flex-start; padding:22px 22px 16px; }
.screen-hand-offer .r-sheet-header h2 { margin:0; line-height:1.2; }
.screen-hand-offer .screen-manager-actions > .button { min-height:48px; }
.screen-manager .r-sheet-content { text-align:center; padding:20px 24px 28px; }
.screen-manager-symbol { width:78px; height:78px; display:grid; place-items:center; margin:0 auto 22px; border-radius:23px; background:var(--accent-soft); color:var(--accent); position:relative; }
.screen-manager-symbol > span { position:absolute; right:-5px; bottom:-3px; width:25px; height:25px; border:3px solid var(--surface); border-radius:50%; background:var(--green); color:var(--bg); display:grid; place-items:center; }
.screen-manager h3 { margin-bottom:12px; }
.screen-manager p { font-size:14px; line-height:1.65; }
.screen-address { display:block; color:var(--text); font-size:20px; margin:6px 0; }
.screen-manager form { margin-top:24px; }
.screen-manager label { display:block; font-size:13px; color:var(--text); margin-bottom:12px; }
.screen-manager input { width:100%; text-align:center; font-size:32px; letter-spacing:8px; font-variant-numeric:tabular-nums; border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--text); padding:12px 16px; }
.screen-manager form p { margin:10px 0 22px; font-size:12px; }
.screen-manager-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.screen-manager-actions .primary { width:100%; }
.screen-manager .screen-manager-error { margin-top:16px; padding:12px; background:var(--accent-soft); border-radius:12px; color:var(--text); }
@media (orientation:landscape) and (max-height:500px) {
  .screen-hand-offer .r-sheet-header { padding:14px 20px; }
  .screen-hand-offer .r-sheet-content { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:18px; padding:18px 20px 20px; }
  .screen-hand-offer .screen-manager-symbol { width:56px; height:56px; margin:0; border-radius:18px; }
  .screen-hand-offer .screen-manager-symbol > svg { width:30px; height:30px; }
  .screen-hand-offer .r-sheet-content > p { text-align:left; }
  .screen-hand-offer .screen-manager-actions { grid-column:1/-1; flex-wrap:nowrap; margin:0; }
  .screen-hand-offer .screen-manager-actions > .button { width:auto; flex:1; padding-inline:10px; font-size:13px; }
}
.screen-hand-note { display:flex; align-items:center; gap:8px; padding:0 2px 12px; color:var(--green); font-size:12px; }
.screen-hand-note > span { flex:1; }
.screen-hand-note > button { display:inline-flex; align-items:center; gap:6px; min-height:36px; font-size:12px; color:var(--text); }
.screen-hand-note.is-waiting { color:var(--muted); }
.rummy-board.is-hand-view .table-column { display:block; }
.rummy-board.is-hand-view .table-status, .rummy-board.is-hand-view .r-seating, .rummy-board.is-hand-view .r-goal, .rummy-board.is-hand-view .table-arena-slot { display:none; }
.rummy-board.is-hand-view .r-workbench { margin:0; width:100%; }
.rummy-board.is-hand-view .r-workbench { isolation:isolate; }
.room-shell:has(.rummy-board) .site-header::before { background:var(--bg); }
.rummy-board.is-hand-view .r-resume-panel { margin-bottom:12px; }
.r-hand-main { display:contents; }
/* The phone is a private controller. Keep native page scrolling and the same
   card nodes when rotating; only the layout changes. */
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .room-shell:has(.is-hand-view) .main-table { padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); }
  .rummy-board.is-hand-view { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; }
  .rummy-board.is-hand-view > :not(.table-header):not(.screen-hand-note) { grid-column:1 / -1; }
  .rummy-board.is-hand-view > .table-header { padding-block:4px; margin:0; gap:6px; }
  .rummy-board.is-hand-view > .screen-hand-note { padding:0; gap:7px; align-self:center; }
  .is-hand-view > .screen-hand-note > span { font-size:11px; }
  .is-hand-view > .screen-hand-note > button { min-height:44px; }
  .rummy-board.is-hand-view .r-workbench { display:grid; grid-template-columns:minmax(0,1fr) clamp(224px,29vw,300px); padding:0; border-radius:20px; align-items:stretch; }
  .is-hand-view .r-hand-main { grid-column:1; grid-row:1 / 3; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; min-width:0; padding:6px 12px 4px; column-gap:8px; }
  .is-hand-view .r-turn-choice { grid-column:2; grid-row:1; margin:0; padding:8px 10px 0; border:0; border-left:1px solid var(--line); border-radius:0 19px 0 0; background:var(--surface-raised); }
  .is-hand-view .r-turn-choice .r-buy-prompt { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; }
  .is-hand-view .r-turn-choice .r-buy-actions { grid-column:1 / -1; width:100%; }
  .is-hand-view .r-turn-choice .r-buy-actions .button { flex:1; padding-inline:8px; }
  .is-hand-view .r-turn-choice .r-draw-decision > .button { padding:7px; font-size:11px; gap:6px; }
  .is-hand-view .r-turn-choice .r-request-decision { flex-wrap:wrap; }
  .is-hand-view .r-turn-choice .r-request-decision > .button { flex:1 1 100%; }
  .is-hand-view .r-workbench > .r-hand-dock { grid-column:2; grid-row:1 / 3; }
  .rummy-board.is-hand-view .r-workbench:has(> .r-turn-choice) > .r-hand-dock { grid-row:2; border-top-right-radius:0; padding-block:6px; }
  .is-hand-view .r-hand-main > * { grid-column:1 / -1; min-width:0; }
  .is-hand-view .r-workbench-head { display:contents; }
  .is-hand-view .r-hand-label { grid-column:1 / -1; grid-row:1; min-height:44px; flex-wrap:nowrap; gap:8px; }
  .is-hand-view .r-workbench .r-hand-label > div:first-child { flex:1; align-items:center; flex-wrap:nowrap; gap:6px; }
  .is-hand-view .r-workbench .r-hand-label > div:first-child > strong { font-size:14px; }
  .is-hand-view .r-workbench .r-hand-label > div:first-child > .r-hand-count { font-size:10px; }
  .is-hand-view .r-hand-label > .turn-badge { margin-left:0; }
  .is-hand-view .r-hand-label > .r-hand-tools { flex:none; margin:0; }
  .is-hand-view .r-hand-tools .responsive-tools { display:block; position:relative; }
  .is-hand-view .r-hand-tools .responsive-tools-trigger { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:none; color:var(--muted); }
  .is-hand-view .r-hand-tools .responsive-tools-content { display:none; position:absolute; z-index:15; right:0; top:calc(100% + 6px); width:255px; max-width:calc(100vw - 32px); padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--surface-raised); box-shadow:0 10px 32px #0005; }
  .is-hand-view .r-hand-tools .responsive-tools.is-open > .responsive-tools-content { display:flex; flex-wrap:wrap; gap:5px; }
  .is-hand-view .r-hand-tools .r-hand-sort { width:100%; }
  .is-hand-view .r-hand-tools .r-hand-sort button { flex:1; min-height:44px; }
  .is-hand-view .r-drafts { grid-column:1; grid-row:2; margin:0; padding:2px 1px; gap:5px; }
  .is-hand-view .r-drafts > button { min-width:82px; min-height:44px; padding:5px 6px; gap:5px; }
  .is-hand-view .hand-visibility { grid-column:2; grid-row:2; margin:0; gap:5px; min-height:48px; }
  .is-hand-view .hand-visible-count, .is-hand-view .hand-scroll-hint { font-size:10px; gap:4px; }
  .is-hand-view .hand-show-all { min-height:44px; padding-inline:7px; font-size:11px; gap:5px; }
  .is-hand-view .is-opened .hand-visibility { grid-column:1 / -1; }
  .rummy-board.is-hand-view .r-workbench .r-hand { display:flex; flex-wrap:nowrap; gap:7px; padding:8px 4px 12px; margin:0; overflow-x:auto; overscroll-behavior-x:contain; }
  .rummy-board.is-hand-view .r-workbench .r-hand-card { width:clamp(64px,calc((100svh - 255px - env(safe-area-inset-bottom)) / 1.5),108px); flex:0 0 auto; }
  .rummy-board.is-hand-view .r-workbench.hand-expanded .r-hand { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); grid-template-rows:none; gap:10px 7px; }
  .rummy-board.is-hand-view .r-workbench.hand-expanded .r-hand-card { width:100%; }
  .rummy-board.is-hand-view .r-workbench > .r-hand-dock { margin:0; padding:10px; border:0; border-left:1px solid var(--line); border-radius:0 19px 19px 0; box-shadow:none; display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
  .is-hand-view .r-hand-dock .r-compact-decision { padding:0; margin:0; gap:7px; }
  .is-hand-view .r-hand-dock .r-draw-decision { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .is-hand-view .r-hand-dock .r-draw-decision > .button { min-width:0; min-height:52px; padding:7px; gap:6px; font-size:11px; border-radius:12px; }
  .is-hand-view .r-draw-decision .action-cards .playing-card { width:22px; height:33px; }
  .is-hand-view .r-draw-decision .action-cards-stock { width:25px; height:36px; }
  .is-hand-view .r-hand-dock .r-hand-actions { grid-template-columns:1fr; gap:6px; }
  .is-hand-view .is-opened .r-hand-actions:has(> :nth-child(4)) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .is-hand-view .is-opened .r-hand-actions:has(> :nth-child(4)) > :first-child, .is-hand-view .is-opened .r-hand-actions:has(> :nth-child(4)) > :last-child { grid-column:1 / -1; }
  .is-hand-view .r-hand-dock .r-hand-actions .button { min-height:44px; font-size:12px; padding-block:6px; }
  .is-hand-view .r-hand-dock .r-selection-toolbar { flex-wrap:nowrap; gap:0 8px; min-height:40px; }
  .is-hand-view .r-hand-dock .r-selection-toolbar > span { flex:1; min-width:0; font-size:11px; }
  .is-hand-view .r-hand-dock .r-selection-actions { margin-left:auto; }
  .is-hand-view .r-hand-dock .r-selection-toolbar .text-button { min-height:36px; }
  .is-hand-view .r-hand-dock .r-buy-prompt { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; }
  .is-hand-view .r-hand-dock .r-buy-prompt .r-buy-actions { grid-column:1 / -1; width:100%; }
  .is-hand-view .r-hand-dock .r-buy-actions .button { flex:1; padding-inline:8px; min-height:44px; }
  .is-hand-view .r-hand-dock .r-request-decision { flex-wrap:wrap; }
  .is-hand-view .r-request-decision .r-decision-card > .playing-card { width:28px; height:42px; }
  .is-hand-view .r-request-decision strong { font-size:12px; }
  .is-hand-view .r-request-decision small { font-size:11px; }
  .is-hand-view .r-request-decision > .button { flex:1 1 100%; min-height:44px; }
  .is-hand-view .r-hand-dock .r-order-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .is-hand-view .r-order-intro { margin:6px 0; padding:8px; }
}
@media (orientation:landscape) and (min-width:600px) and (max-width:760px) and (max-height:600px) {
  .room-shell:has(.is-hand-view) .site-header nav { display:none; }
  .is-hand-view > .screen-hand-note > span { display:none; }
  .is-hand-view .r-hand-main { padding-inline:8px; }
  .is-hand-view .hand-scroll-hint > span, .is-hand-view .hand-visible-count { display:none; }
  .is-hand-view .r-workbench .r-hand-label > div:first-child { min-width:0; }
}
@media (orientation:landscape) and (min-width:600px) and (max-height:350px) {
  /* Keep the room's Back, View and player controls while giving the hand the
     space otherwise occupied by the global navigation on very short phones. */
  .room-shell:has(.is-hand-view) { --header-height:0px; }
  .room-shell:has(.is-hand-view) .site-header { display:none; }
}
@media(min-width:1800px) { .shared-screen { --screen-gutter:3.5vw; } .screen-board { gap:26px; } @supports (container-type:size) and (width:1cqw) and (height:1cqh) { .screen-meld-cards { --display-card:min(94px,calc(100cqw / (var(--meld-count) * .62 + .38))); } } .screen-owner { padding:22px; } .screen-players strong { font-size:18px; } .screen-melds { gap:20px; } }
@media(max-width:1200px) { .screen-player-state > span { display:none; } .screen-players { gap:7px; } .screen-players > li { padding:10px; gap:7px; } .screen-player-number { display:none; } .screen-players img { width:29px; height:29px; } .screen-player-state { font-size:0; } .screen-melds.has-six { grid-template-columns:repeat(2,minmax(0,1fr)); } .screen-market { padding:16px; } }
@media(max-width:760px) { .shared-screen { --screen-gutter:16px; padding:16px; } .screen-header { gap:12px; padding-bottom:14px; } .screen-header-tools { gap:12px; } .screen-brand { font-size:26px; } .screen-pair-art { margin-bottom:15px; } .screen-pairing { min-height:calc(100vh - 100px); min-height:calc(100svh - 100px); } .screen-pair-code { gap:5px; } .screen-pair-code > span { border-radius:10px; } .screen-pair-code > span:nth-child(3) { margin-right:6px; } .screen-turn { flex-wrap:wrap; padding:20px 0; gap:16px; } .screen-goal { width:100%; max-width:none; padding:13px 16px; border-radius:18px; } .screen-round { width:48px; height:48px; } .screen-round b { font-size:20px; } .screen-players { flex-wrap:wrap; } .screen-players > li { flex-basis:calc(50% - 7px); } .screen-board { grid-template-columns:1fr; } .screen-market { padding:14px; gap:15px; } .screen-market-title { display:none; } .screen-piles { gap:30px; } .screen-piles > div { flex:0 1 90px; } .screen-melds, .screen-melds.has-six { grid-template-columns:1fr; } .screen-owner-melds { grid-template-columns:repeat(2,minmax(0,1fr)); } .screen-owner { padding:14px; } .screen-meld-empty { grid-column:1/-1; min-height:100px; } .screen-results { padding:10px 0; } .screen-results td, .screen-results tbody th { padding:9px 8px; font-size:14px; } .screen-results th:first-child { width:58%; } .screen-results thead th { padding:6px 8px; font-size:11px; } .screen-standing-player { gap:8px; } .screen-standing-player img { width:32px; height:32px; } .screen-standing-rank { width:20px; height:20px; font-size:11px; } .screen-results td.screen-standing-score { font-size:13px; } .screen-results td.screen-standing-total { font-size:18px; } .screen-results-heading { gap:12px; } .screen-result-medal { width:44px; height:44px; border-radius:14px; } .screen-result-medal > svg { width:24px; height:24px; } }
@media(orientation:landscape) and (max-height:600px) { .shared-screen { padding-top:12px; } .screen-header { padding-bottom:10px; } .screen-turn { padding-block:15px; } .screen-pair-art { display:none; } .screen-pairing { min-height:0; padding:20px 0; } .screen-pairing h1 { margin:10px 0; } .screen-pair-code { margin-top:18px; } .screen-pairing footer { margin-top:16px; } }
/* Television layouts fit the viewport; card size responds to both tile dimensions. */
@media(min-width:900px) {
  .shared-screen.has-table { height:100vh; height:100svh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  .has-table .screen-header, .has-table .screen-turn, .has-table .screen-players { flex:none; }
  .screen-board { flex:1; min-height:0; }
  .screen-melds { grid-auto-rows:minmax(0,1fr); min-height:0; }
  .screen-owner { display:flex; flex-direction:column; min-height:0; }
  .screen-owner > header { flex:none; }
  .screen-owner-melds { flex:1; min-height:0; grid-auto-rows:minmax(0,1fr); gap:10px; }
  .screen-owner-melds.many-melds { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .screen-meld { min-height:0; }
  .screen-meld-cards { height:100%; }
  @supports (container-type:size) and (width:1cqw) and (height:1cqh) {
    .screen-meld { container-type:size; }
    .screen-meld-cards { --display-card:min(144px,calc(100cqw / (var(--meld-count) * .62 + .38)),calc((100cqh - 5px) / 1.5)); }
  }
  .screen-meld-empty { min-height:0; grid-column:1/-1; }
  .screen-results { flex:1; min-height:0; margin:16px auto 0; padding:0; width:min(920px,100%); }
}
@media(min-width:900px) and (max-height:800px) {
  .shared-screen.has-table { padding-top:16px; padding-bottom:20px; }
  .has-table .screen-header { padding-bottom:12px; }
  .has-table .screen-turn { padding-block:16px; }
  .has-table .screen-turn-person h1 { font-size:28px; }
  .has-table .screen-turn-person p { font-size:13px; }
  .has-table .screen-turn-person > img { width:46px; height:46px; }
  .has-table .screen-players { margin-bottom:14px; }
  .has-table .screen-players > li { padding:10px; }
  .screen-melds.has-six { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .screen-owner { padding:12px; border-radius:17px; }
  .screen-owner > header { margin-bottom:10px; padding-bottom:8px; }
  .screen-owner header img { width:30px; height:30px; }
  .screen-goal { padding:12px 16px; gap:14px; border-radius:18px; }
  .screen-round { width:52px; height:52px; }
  .screen-owner h2 { font-size:14px; }
  .screen-result-medal { width:52px; height:52px; border-radius:16px; }
  .screen-results-heading { margin-bottom:14px; gap:14px; }
  .screen-results h2 { font-size:30px; }
  .screen-results td, .screen-results tbody th { font-size:18px; padding:6px 16px; }
  .screen-standing-player img { width:36px; height:36px; }
  .screen-results table { margin-bottom:12px; border-spacing:0 5px; }
  .screen-results td.screen-standing-score { font-size:15px; }
  .screen-results td.screen-standing-total { font-size:21px; }
}
.screen-owner-melds .screen-meld.is-long { grid-column:1/-1; }
.screen-meld .playing-card .card-corner b { font-size:clamp(10px,22cqw,26px); }
.screen-meld .playing-card .card-corner > span { font-size:clamp(8px,14cqw,17px); }
@container (max-width:44px) {
  .screen-meld .playing-card > :not(.card-corner) { opacity:.16; }
  .screen-meld .playing-card .corner-bottom { display:none; }
}
@media(min-width:900px) and (max-height:620px) {
  .shared-screen.has-table { --screen-gutter:2vw; padding:10px var(--screen-gutter) 12px; }
  .has-table .screen-header { padding-bottom:8px; }
  .has-table .screen-brand { font-size:24px; }
  .has-table .screen-brand img { width:28px; height:28px; }
  .has-table .screen-header-tools .round-button { width:32px; height:32px; }
  .has-table .screen-turn { padding-block:12px; }
  .has-table .screen-turn-person > img { width:34px; height:34px; }
  .has-table .screen-turn-person h1 { font-size:23px; }
  .has-table .screen-turn-person .eyebrow { font-size:9px; }
  .has-table .screen-players > li { padding:7px; }
  .has-table .screen-players { margin-bottom:10px; }
  .screen-owner { padding:9px; }
  .screen-owner > header { margin-bottom:7px; padding-bottom:6px; gap:6px; }
  .screen-owner-order { width:18px; height:18px; font-size:9px; }
  .screen-goal { padding:9px 12px; gap:12px; border-radius:15px; }
  .screen-goal strong { font-size:18px; }
  .screen-goal .eyebrow { font-size:9px; margin-bottom:3px; }
  .screen-round { width:44px; height:44px; }
  .screen-round b { font-size:20px; }
  .screen-market-title { top:14px; font-size:9px; }
  .screen-empty-fan { transform:scale(.75); margin-block:-6px; }
  .screen-owner > header img { width:23px; height:23px; }
  .screen-owner-melds { gap:5px; }
  .screen-owner h2 { font-size:12px; }
  .screen-board, .screen-melds { gap:10px; }
  .screen-market { min-height:0; padding:10px; gap:14px; }
  .screen-piles .playing-card { max-height:130px; }
  .screen-results { margin-top:8px; }
  .screen-result-medal { width:40px; height:40px; border-radius:13px; }
  .screen-result-medal > svg { width:24px; height:24px; }
  .screen-results-heading { margin-bottom:8px; }
  .screen-results-heading .eyebrow { font-size:9px; }
  .screen-results h2 { font-size:24px; margin-top:4px; }
  .screen-results td, .screen-results tbody th { padding:4px 14px; font-size:15px; }
  .screen-results thead th { padding:3px 14px; font-size:11px; }
  .screen-standing-player { gap:10px; }
  .screen-standing-player img { width:26px; height:26px; }
  .screen-standing-rank { width:22px; height:22px; font-size:11px; }
  .screen-results td.screen-standing-score { font-size:13px; }
  .screen-results td.screen-standing-total { font-size:17px; }
  .screen-results table { border-spacing:0 4px; margin-bottom:8px; }
  .screen-results > p { font-size:12px; }
}
@container (max-height:85px) {
  .screen-meld-cards { gap:3px; }
  .screen-meld .screen-meld-cards { --display-card:min(54px,calc((100cqw - (var(--meld-count) - 1) * 3px) / var(--meld-count)),calc((100cqh - 5px) / 1.5)); }
  .screen-meld-cards .screen-display-card { margin-right:0; }
}

.screen-owner > header > div { flex:1; min-width:0; }
.screen-owner header small { color:var(--muted); font-size:11px; }
.screen-owner-order { font-variant-numeric:tabular-nums; }
.screen-owner-status { display:flex; align-items:center; justify-content:center; flex:none; gap:5px; color:var(--green); font-size:11px; }
.screen-meld-cards .screen-display-card > .playing-card { width:100%; height:100%; margin:0; }
.screen-joker-value { position:absolute; bottom:13%; left:7%; right:7%; text-align:center; color:var(--accent-ink); background:var(--accent); border-radius:4px; font-size:clamp(10px,1vw,17px); box-shadow:0 2px 4px #0002; }

.screen-display-card { container-type:inline-size; }
.screen-small-index { display:none; }
/* The legacy fitter supplies the same small-card treatment without @container.
   Margins also work on TV engines predating flex gap. */
.screen-meld-cards[data-compact-cards] > .screen-display-card { margin-right:3px; }
.screen-meld-cards[data-compact-cards] > .screen-display-card:last-child { margin-right:0; }
.screen-meld-cards[data-small-cards] .playing-card > :not(.card-corner) { opacity:.16; }
.screen-meld-cards[data-small-cards] .playing-card > .card-corner { display:none; }
.screen-meld-cards[data-small-cards] .screen-small-index { position:absolute; top:3px; left:3px; display:flex; flex-direction:column; line-height:1.05; color:#17212b; font-size:14px; }
.screen-meld-cards[data-small-cards] .screen-small-index b { font-weight:750; }
.screen-meld-cards[data-small-cards] .screen-small-index small { font-size:11px; }
.screen-meld-cards[data-small-cards] .screen-small-index.is-red { color:#bf3643; }
@container(max-width:44px) {
  .screen-small-index { position:absolute; top:3px; left:3px; display:flex; flex-direction:column; line-height:1.05; color:#17212b; font-size:14px; }
  .screen-small-index b { font-weight:750; }
  .screen-small-index small { font-size:11px; }
  .screen-small-index.is-red { color:#bf3643; }
  .screen-display-card .playing-card > .card-corner { display:none; }
}

/* Help lives in its own layer; the playing surface keeps its geometry. */
.r-hand-label .r-help-trigger { width:44px; height:44px; min-width:44px; padding:0; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--accent); background:var(--surface); font-size:18px; font-weight:650; touch-action:manipulation; }
.r-help-trigger:hover { border-color:var(--accent); background:var(--accent-soft); }
.r-hand-label>.turn-notice.r-quiet-turn { display:none; }
.r-hand-label>.r-help-trigger { margin-left:auto; }
.r-hand-label>.turn-notice:not(.r-quiet-turn)+.r-help-trigger { margin-left:0; }
.r-help-trigger:focus-visible,.r-help-dialog button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html:has(.r-help-dialog[open]) { overflow:hidden; }
.r-help-dialog { width:min(480px,calc(100% - 40px)); max-height:calc(100dvh - 40px); margin:auto; padding:0; overflow:hidden; overscroll-behavior:contain; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line)); border-radius:26px; color:var(--text); background:var(--surface); box-shadow:0 24px 90px #0006; }
.r-help-dialog[open] { display:flex; flex-direction:column; animation:r-help-enter .18s ease-out; }
.r-help-dialog::backdrop { background:#090b10a6; backdrop-filter:blur(5px); }
.r-help-header { display:flex; flex:none; align-items:center; gap:10px; padding:16px 20px 0; }
.r-help-mark { display:grid; place-items:center; width:32px; height:32px; flex:none; color:var(--accent); border-radius:11px; background:var(--accent-soft); }
.r-help-header .eyebrow { font-size:10px; letter-spacing:1.3px; color:var(--muted); }
.r-help-close { display:grid; place-items:center; width:44px; height:44px; min-width:44px; margin-left:auto; border-radius:50%; color:var(--muted); }
.r-help-close:hover { color:var(--text); background:var(--surface-raised); }
.r-help-body { padding:10px 28px 22px; min-height:0; overflow:auto; overscroll-behavior:contain; }
.r-help-body h2 { margin:0; font-size:27px; line-height:1.18; letter-spacing:-.7px; text-wrap:balance; }
.r-help-body h2:focus { outline:none; }
.r-help-copy p { margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.6; }
.r-help-show { margin-top:12px; min-height:44px; font-size:13px; }
.r-help-art { margin:0 0 22px; padding:16px 10px 12px; border-radius:18px; background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 75%),var(--bg); border:1px solid var(--line); }
.r-help-demo { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; min-height:118px; color:var(--accent); }
.r-help-demo .playing-card { width:76px; height:108px; flex:none; }
.r-help-or { font-size:12px; color:var(--muted); }
.r-help-art figcaption { text-align:center; font-size:10px; color:var(--muted); margin-top:12px; letter-spacing:.2px; }
.r-help-example-group { display:flex; padding:8px; border:1px solid color-mix(in srgb,var(--green) 35%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--green) 4%,transparent); }
.r-help-example-group .playing-card { width:57px; height:81px; }
.r-help-example-group .playing-card + .playing-card { margin-left:-10px; }
.r-help-example-group.is-private { border-style:dashed; border-color:var(--accent); }
.r-help-private { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; color:var(--accent); font-size:11px; }
.r-help-add-card { position:relative; }
.r-help-art-build .r-help-demo { flex-wrap:nowrap; }
.r-help-art-build .r-help-example-group .playing-card { width:49px; height:70px; }
.r-help-art-build .r-help-add-card .playing-card { width:62px; height:88px; }
.r-help-add-card>svg { position:absolute; bottom:-3px; right:-5px; padding:5px; box-sizing:content-box; background:var(--accent); color:var(--accent-ink); border-radius:50%; }
.r-help-card-place { padding:5px; border:1px dashed var(--muted); border-radius:12px; }
.r-help-card-place .playing-card { opacity:.3; }
.r-help-presence { display:grid; place-items:center; margin:6px 0 22px; height:104px; border-radius:18px; background:var(--bg); }
.r-help-presence img { width:64px; height:64px; border-radius:50%; aspect-ratio:1; object-fit:cover; }
.r-help-presence>span { display:grid; place-items:center; width:64px; height:64px; border:1px solid var(--line); border-radius:50%; color:var(--accent); }
.r-help-footer { flex:none; border-top:1px solid var(--line); padding:16px 28px 22px; }
.r-help-setting { display:flex; align-items:center; gap:10px; min-height:44px; font-size:12px; color:var(--muted); cursor:pointer; }
.r-help-setting input { appearance:auto; width:17px; height:17px; min-height:0; flex:none; margin:0; accent-color:var(--accent); }
.r-help-footer-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.r-help-more { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; min-height:44px; text-align:left; }
.r-help-footer-actions .button { min-height:44px; font-size:13px; padding:12px 17px; flex:none; }
.r-help-topics { display:grid; gap:7px; margin-top:20px; }
.r-help-topics button { display:flex; align-items:center; gap:12px; min-height:49px; padding:8px 12px; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--bg); font-size:13px; }
.r-help-topics button>span:nth-child(2) { flex:1; }
.r-help-topics button:hover { border-color:var(--accent); }
.r-help-topic-icon { color:var(--accent); display:grid; place-items:center; }
.r-help-highlight { outline:2px solid var(--accent)!important; outline-offset:4px; }
@keyframes r-help-enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:760px) {
  .r-hand-label { gap:6px; }
  .r-hand-label>.turn-notice { min-width:0; flex:0 1 auto; }
  .r-hand-label .r-help-trigger { margin-left:0; }
}
@media(max-width:600px) and (orientation:portrait) {
  .r-help-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 24px); margin:auto auto 8px; border-radius:24px; }
  .r-help-header { padding:12px 16px 0; }
  .r-help-body { padding:8px 22px 18px; }
  .r-help-body h2 { font-size:25px; }
  .r-help-copy p { font-size:14px; }
  .r-help-art { margin-bottom:19px; }
  .r-help-art-open .r-help-demo { flex-wrap:nowrap; gap:8px; }
  .r-help-art-open .r-help-example-group { padding:8px 4px; }
  .r-help-art-open .r-help-example-group .playing-card { width:37px; height:53px; }
  .r-help-footer { padding:10px 22px max(18px,env(safe-area-inset-bottom)); }
}
@media(max-height:500px) and (orientation:landscape) {
  .r-help-dialog { width:min(650px,calc(100% - 32px)); max-height:calc(100dvh - 20px); border-radius:20px; }
  .r-help-header { padding:5px 16px 0; }
  .r-help-body:not(.is-directory) { display:grid; grid-template-columns:190px minmax(0,1fr); gap:22px; align-items:center; padding:6px 22px 14px; }
  .r-help-body h2 { font-size:23px; }
  .r-help-copy p { font-size:13px; line-height:1.5; margin-top:9px; }
  .r-help-art,.r-help-presence { margin:0; }
  .r-help-art { padding:10px 6px; }
  .r-help-demo { min-height:90px; gap:8px; }
  .r-help-demo .playing-card { width:54px; height:77px; }
  .r-help-demo .r-help-example-group .playing-card { width:40px; height:57px; }
  .r-help-demo .r-help-example-group { padding:5px; }
  .r-help-art-open .r-help-demo { flex-wrap:nowrap; gap:5px; }
  .r-help-art-open .r-help-example-group .playing-card { width:29px; height:42px; }
  .r-help-art figcaption { font-size:9px; margin-top:8px; }
  .r-help-footer { padding:6px 22px 12px; }
  .r-help-setting { min-height:32px; }
  .r-help-topics { grid-template-columns:1fr 1fr; margin-top:12px; }
}
@media(max-width:360px) {
  .r-help-art-open .r-help-example-group .playing-card { width:32px; height:46px; }
  .r-help-art-build .r-help-example-group .playing-card { width:43px; height:62px; }
  .r-help-art-build .r-help-add-card .playing-card { width:54px; height:77px; }
  .r-help-art-build .r-help-demo { gap:10px; }
}
@media(prefers-reduced-motion:reduce) { .r-help-dialog[open] { animation:none; } }

/* The dial owns its dimensions; ticking never moves cards or purchase controls. */
.r-buy-clock { --buy-ink:var(--accent); --buy-size:36px; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--buy-size); white-space:nowrap; color:var(--buy-ink); font-size:11px; font-weight:550; font-variant-numeric:tabular-nums; }
.r-buy-clock.is-ending { --buy-ink:#e9c18b; }
:root[data-theme=daylight] .r-buy-clock.is-ending { --buy-ink:#8c581e; }
.r-buy-clock.is-paused,.r-buy-clock.is-closed { --buy-ink:var(--muted); }
.r-buy-dial { position:relative; display:inline-grid; place-items:center; flex:none; width:var(--buy-size); height:var(--buy-size); isolation:isolate; color:var(--buy-ink); transition:color .25s ease; }
.r-buy-dial::before { content:''; position:absolute; inset:5px; z-index:-1; border:1px solid color-mix(in srgb,var(--buy-ink) 12%,transparent); border-radius:50%; background:linear-gradient(145deg,color-mix(in srgb,var(--buy-ink) 14%,transparent),color-mix(in srgb,var(--buy-ink) 4%,transparent)); }
.r-buy-ring { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke-width:2; transform:rotate(-90deg); }
.r-buy-clock-track { stroke:color-mix(in srgb,var(--buy-ink) 16%,transparent); }
.r-buy-clock-progress { stroke:currentColor; stroke-linecap:round; transition:stroke-dashoffset .12s linear,opacity .2s ease; }
.r-buy-time { display:flex; align-items:baseline; justify-content:center; gap:1px; line-height:1; }
.r-buy-time b { font-size:14px; font-weight:750; letter-spacing:-.04em; }
.r-buy-time > svg { align-self:center; flex:none; }
.r-buy-clock-label { min-width:7em; text-align:left; font-size:11px; line-height:1.25; color:var(--buy-ink); }
.r-buy-clock.is-closed .r-buy-clock-progress { opacity:0; }
.r-buy-clock.is-closed .r-buy-dial::before { background:color-mix(in srgb,var(--muted) 5%,transparent); }
.r-request-decision .grow > strong { display:flex; align-items:center; gap:5px; }
.r-request-decision.is-requested .grow > strong { color:var(--green); }
.r-request-decision .r-buy-clock { margin-top:4px; }
.r-buy-wait { flex-wrap:wrap; justify-content:space-between; gap:10px; }
.r-buy-wait > div { min-width:0; }
.r-request-decision > .button { min-height:44px; }
.r-buy-setting { padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.r-buy-setting-title { display:flex; align-items:center; gap:8px; font-size:13px; }
.r-buy-setting-title > svg { color:var(--accent); }
.r-buy-time-options { display:flex; gap:6px; margin-top:14px; padding:4px; border:1px solid var(--line); border-radius:13px; background:var(--bg); }
.r-buy-time-options button { display:flex; align-items:baseline; justify-content:center; gap:5px; flex:1; min-width:0; min-height:44px; padding:11px 10px; border:1px solid transparent; border-radius:9px; color:var(--muted); font-weight:700; font-size:16px; }
.r-buy-time-options button span { font-size:11px; font-weight:500; }
.r-buy-time-options button[aria-pressed=true] { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.r-buy-time-options button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.r-buy-setting p { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.screen-piles .r-buy-clock { flex-direction:row; }
@media(min-width:1000px) and (min-height:650px) {
  .screen-piles .r-buy-clock { --buy-size:44px; }
  .screen-piles .r-buy-time b { font-size:18px; }
  .screen-piles .r-buy-clock-label { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .r-buy-clock-progress,.r-buy-dial { transition:none; } }
.r-buy-wait .r-buy-clock { display:inline-flex; }
.screen-piles > div > .r-buy-clock { color:var(--buy-ink); }
@media(max-width:760px),(max-height:600px) {
  .r-buy-clock { --buy-size:32px; }
  .r-buy-dial::before { inset:4px; }
}
@media (orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .is-hand-view .r-turn-choice .r-request-decision { display:grid; grid-template-columns:28px minmax(0,1fr); gap:3px 8px; }
  .is-hand-view .r-request-decision .r-decision-card { grid-column:1; grid-row:1 / 3; align-self:center; }
  .is-hand-view .r-request-decision .grow { display:contents; }
  .is-hand-view .r-request-decision .grow > strong { grid-column:2; grid-row:1; }
  .is-hand-view .r-request-decision .grow > small { grid-column:2; grid-row:2; margin:0; }
  .is-hand-view .r-request-decision .r-buy-clock { grid-column:1 / -1; grid-row:3; justify-self:start; margin:0; }
  .is-hand-view .r-request-decision .r-buy-clock-label { display:none; }
  .is-hand-view .r-turn-choice .r-request-decision > .button { grid-column:2; grid-row:3; justify-self:end; width:calc(100% - 26px); max-width:158px; margin-top:3px; }
}

/* Rummy decisions and navigation: one place to act, without covering the hand. */
.r-game-menu.game-sidebar { display:block; padding-top:0; }
.r-menu-tabs { display:flex; gap:4px; padding:4px; margin-bottom:16px; border:1px solid var(--line); border-radius:15px; background:var(--bg); }
.r-menu-tabs > button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:1px solid transparent; border-radius:11px; color:var(--muted); font-size:13px; font-weight:650; }
.r-menu-tabs > button[aria-selected=true] { border-color:color-mix(in srgb,var(--accent) 30%,transparent); background:var(--accent-soft); color:var(--accent); }
.r-menu-panel { display:grid; gap:14px; min-width:0; }
.r-menu-panel > * { margin:0; }
.r-menu-panel .turn-settings { padding:0; }
.r-menu-panel .table-theme-link { min-height:44px; }
.r-game-menu .activity-panel { display:block; }
.r-meld-shortcut.has-new { border-color:color-mix(in srgb,var(--green) 45%,transparent); color:var(--green); }
.r-meld-new { width:6px; height:6px; flex:none; border-radius:50%; background:var(--green); }
.rummy-board .r-selection-toolbar > .r-move-feedback.is-buy-outcome { display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:2px 6px; padding-block:5px; }
.r-move-feedback.is-buy-outcome > svg { grid-column:1; grid-row:1; }
.r-move-feedback.is-buy-outcome > .r-feedback-copy { grid-column:2; grid-row:1; }
.r-move-feedback.is-buy-outcome > .r-feedback-card { grid-column:3; grid-row:1; }
.r-move-feedback.is-buy-outcome > .r-feedback-extra { grid-column:2 / -1; grid-row:2; font-size:10px; color:var(--muted); white-space:normal; line-height:1.4; }
.r-help-dialog::backdrop { -webkit-backdrop-filter:blur(5px); }
.r-help-card-place .playing-card { opacity:.8; }
.r-help-purchase { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:12px; margin:0 0 12px; border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:16px; background:var(--bg); }
.r-help-purchase.is-requested { border-color:color-mix(in srgb,var(--green) 40%,var(--line)); }
.r-help-buy-card .playing-card { width:40px; height:60px; }
.r-help-buy-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.r-help-buy-copy > strong { font-size:12px; line-height:1.4; }
.r-help-buy-copy > span:not(.r-buy-clock) { font-size:10px; line-height:1.5; color:var(--muted); }
.r-help-purchase > .button { min-height:44px; padding:10px 12px; font-size:12px; }
.r-help-purchase .r-buy-clock-label { display:none; }
.r-help-action-error,.r-help-outcome { font-size:12px; margin:0 0 10px; }
.r-help-outcome > strong,.r-help-outcome > span { display:block; }
.r-help-outcome > strong { color:var(--green); }
.r-help-body:not(:has(.r-help-art,.r-help-presence)):not(.is-directory) { display:block; }
@media(max-width:360px) {
  .r-help-footer { padding-inline:14px; }
  .r-help-purchase { gap:7px; padding:10px; }
  .r-help-purchase > .button { padding-inline:9px; }
}
@media(max-height:500px) and (orientation:landscape) {
  .r-help-purchase { grid-template-columns:28px minmax(0,1fr) auto; padding:7px 10px; margin-bottom:4px; }
  .r-help-buy-card .playing-card { width:28px; height:42px; }
  .r-help-buy-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; }
  .r-help-buy-copy > strong,.r-help-buy-copy > span { grid-column:1; }
  .r-help-buy-copy .r-buy-clock { grid-column:2; grid-row:1 / 3; }
}
/* A compact table remains visible above the hand, while decorative space yields to cards. */
@media(max-width:760px) and (orientation:portrait) {
  .rummy-board.is-compact:not(.is-hand-view) .table-column { gap:8px; }
  .rummy-board[data-layout=compact] .table-column { grid-template-areas:'status' 'players' 'goal' 'market' 'hand' 'melds' 'pause'; }
  .rummy-board.is-compact:not(.is-hand-view) .r-goal { display:flex; gap:10px; padding:7px 12px; border-radius:14px; }
  .rummy-board.is-compact:not(.is-hand-view) .r-goal-heading { flex:1; min-width:0; }
  .rummy-board.is-compact:not(.is-hand-view) .r-goal h2 { font-size:14px; margin:0; }
  .rummy-board.is-compact:not(.is-hand-view) .r-goal .eyebrow,.rummy-board.is-compact:not(.is-hand-view) .r-round-number,.rummy-board.is-compact:not(.is-hand-view) .r-progress,.rummy-board.is-compact:not(.is-hand-view) .r-hint-mode { display:none; }
  .rummy-board.is-compact:not(.is-hand-view) .r-goal-meta { width:auto; flex:none; }
  .rummy-board.is-compact:not(.is-hand-view) .r-goal-meta > span { font-size:10px; }
  .rummy-board.is-board-view .arena-enabled { padding:8px 9px; gap:5px; border-radius:23px; }
  .rummy-board.is-board-view .arena-enabled::before { inset:55px 16px 9px; }
  .rummy-board.is-board-view .arena-player { min-height:62px; padding:2px; }
  .rummy-board.is-board-view .arena-avatar { width:var(--arena-avatar-size); height:var(--arena-avatar-size); margin-bottom:5px; }
  .rummy-board.is-board-view .arena-player > strong { font-size:10px; }
  .rummy-board.is-board-view .arena-count { font-size:9px; }
  .rummy-board.is-board-view .arena-turn { display:none; }
  .rummy-board.is-board-view .arena-center { max-width:none; }
  .rummy-board.is-board-view .arena-center .r-market-zone { display:flex; }
  .rummy-board.is-board-view .r-discard-recap { display:none; }
  .rummy-board.is-board-view .r-buy-interest { display:none; }
  .rummy-board.is-compact .r-workbench .r-hand-label { flex-wrap:nowrap; gap:5px; }
  .rummy-board.is-compact .r-workbench .r-hand-label > div:first-child { display:grid; grid-template-columns:auto minmax(0,1fr); flex:1; column-gap:6px; row-gap:0; align-items:center; }
  .rummy-board.is-compact .r-hand-label > div:first-child > strong { white-space:nowrap; font-size:14px; }
  .rummy-board.is-compact .r-hand-label .arena-self { grid-row:1 / 3; }
  .rummy-board.is-compact .r-hand-label .r-hand-count { grid-column:2; font-size:10px; }
  .rummy-board.is-compact .r-hand-label > .r-hand-tools { flex:0 0 auto; }
  .rummy-board.is-compact .r-workbench .r-hand-main { display:grid; grid-template-columns:minmax(0,1fr); column-gap:0; }
  .rummy-board.is-compact .r-workbench-head { display:contents; }
  .rummy-board.is-compact .r-hand-label { grid-column:1 / -1; }
  .rummy-board.is-compact .r-drafts { grid-column:1; min-width:0; margin-top:2px; }
  /* Expanded hands keep the groups full-width; collapse lives in Hand tools. */
  .rummy-board.is-compact .hand-expanded .r-drafts { grid-column:1 / -1; }
  .rummy-board.is-compact .r-hand,.rummy-board.is-compact .r-order-intro { grid-column:1 / -1; }
  .rummy-board.is-compact .r-workbench:not(.hand-expanded) .r-hand { display:flex; padding:10px 4px 13px; gap:8px; }
  .rummy-board.is-compact .r-workbench:not(.hand-expanded) .r-hand-card { flex:0 0 76px; width:76px; }
  .rummy-board.is-compact .r-draw-decision > .grow { display:none; }
  .rummy-board.is-compact .r-turn-choice .r-compact-decision { padding:8px 0; }
  .rummy-board.is-compact .r-request-decision { display:grid; grid-template-columns:29px minmax(0,1fr) auto; gap:7px; }
  .rummy-board.is-compact .r-request-decision .grow { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:5px; align-items:center; }
  .rummy-board.is-compact .r-request-decision .grow > strong { font-size:11px; grid-column:1; }
  .rummy-board.is-compact .r-request-decision .grow > small { grid-column:1; line-height:1.3; }
  .rummy-board.is-compact .r-request-decision .r-buy-clock { grid-column:2; grid-row:1 / 3; margin:0; }
  .rummy-board.is-compact .r-request-decision .r-buy-clock-label { display:none; }
  .rummy-board.is-compact .r-request-decision > .button { padding-inline:9px; font-size:12px; }
}
/* Landscape keeps the two panels aligned and avoids a second card row by default. */
@media(orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .rummy-board.is-board-view:not(.is-hand-view) > .table-header { padding-block:4px; margin-bottom:4px; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-goal { padding:5px 10px; display:flex; gap:12px; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-goal-heading { flex:1; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-goal-meta { gap:12px; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-round-number { display:none; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-workbench:not(.hand-expanded) .r-hand { display:flex; gap:7px; padding:9px 3px 12px; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-workbench:not(.hand-expanded) .r-hand-card { flex:0 0 70px; width:70px; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-hand-main { display:grid; grid-template-columns:minmax(0,1fr); column-gap:0; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-workbench-head { display:contents; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-hand-label { grid-column:1 / -1; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-drafts { grid-column:1; min-width:0; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-hand,.rummy-board.is-board-view:not(.is-hand-view) .r-order-intro { grid-column:1 / -1; }
}
/* Standard retains the detailed sidebar; the hand comes before the player summaries. */
@media(min-width:1101px) {
  .rummy-board[data-layout=standard][data-playing=true] .table-column { display:flex; flex-direction:column; gap:14px; }
  .rummy-board[data-layout=standard][data-playing=true] .table-status { order:0; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal { order:1; display:flex; align-items:center; gap:20px; padding:14px 18px; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal-heading { flex:1; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal h2 { font-size:20px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal-chips,.rummy-board[data-layout=standard][data-playing=true] .r-progress { display:none; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal-meta { margin:0; padding:0; border:0; flex-direction:column; gap:3px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-hand-panel { order:2; display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; padding:16px; margin:0; align-items:start; }
  .rummy-board[data-layout=standard][data-playing=true] .r-hand-panel > .hand-heading { display:none; }
  .rummy-board[data-layout=standard][data-playing=true] .table-arena-slot { display:block; grid-column:1; grid-row:1; }
  .rummy-board[data-layout=standard][data-playing=true] .r-market-zone { display:flex; flex-direction:column; }
  .rummy-board[data-layout=standard][data-playing=true] .r-piles { gap:12px; padding:12px 0; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-pile { min-width:0; flex:1; }
  .rummy-board[data-layout=standard][data-playing=true] .r-pile .playing-card { width:68px; height:102px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-pile strong { font-size:12px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-pile small { font-size:10px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-workbench { grid-column:2; grid-row:1; min-width:0; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-hand { display:flex; flex-wrap:wrap; gap:8px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-hand-card { width:78px; flex:0 0 78px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-seating { order:3; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-table-melds { order:4; }
  .rummy-board[data-layout=standard][data-playing=true] .r-resume-panel { order:5; }
}

@media(orientation:landscape) and (min-width:600px) and (max-height:600px) {
  .rummy-board.is-board-view:not(.is-hand-view) .r-hand-label { grid-row:1; flex-wrap:nowrap; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-hand-label > .r-hand-tools { flex:none; margin-left:0; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-hand-main { align-content:start; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-hand { grid-row:4; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-order-intro { grid-row:3; }
}
/* On short phones, keep the cards in view; room navigation stays in the header. */
@media(max-width:760px) and (max-height:700px) and (orientation:portrait) {
  .room-shell:has(.rummy-board[data-playing=true]) .site-header nav { display:none; }
  .room-shell:has(.rummy-board[data-playing=true]) .site-header { height:54px; min-height:54px; }
  .room-shell:has(.rummy-board[data-playing=true]) { --header-height:54px; }
}
.r-header-goal { display:none; }
@media(orientation:landscape) and (min-width:600px) and (max-height:450px) {
  .room-shell:has(.rummy-board[data-playing=true]:not(.is-hand-view)) .site-header { display:none; }
  .room-shell:has(.rummy-board[data-playing=true]:not(.is-hand-view)) { --header-height:0px; }
  .rummy-board.is-board-view:not(.is-hand-view) > .table-header h1 { display:none; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-header-goal { display:flex; align-items:center; gap:6px; font-size:16px; margin-top:2px; }
  .rummy-board.is-board-view:not(.is-hand-view) .r-goal { display:none; }
  .rummy-board.is-board-view:not(.is-hand-view) .table-column { grid-template-areas:'market hand' 'melds melds' 'last last' 'pause pause'; }
  .rummy-board.is-board-view:not(.is-hand-view):has(.hand-expanded) .table-column { grid-template-areas:'market' 'hand' 'melds' 'last' 'pause'; }
}
.r-hand-dock:focus { outline:none; }
.rummy-board .r-meld-shortcut.has-new small { border-color:var(--green); }
.rummy-board[data-playing=true] .r-hand-panel > .hand-heading { display:none; }
@media(max-width:360px) {
  .rummy-board.is-compact .r-hand-label > .turn-notice:not(.is-actionable) { display:none; }
}
@media(max-width:360px) and (orientation:portrait) {
  .rummy-board.is-compact .r-drafts { grid-column:1 / -1; }
}
@media(max-width:1100px) {
  .rummy-board[data-layout=standard][data-playing=true] .table-column { display:flex; flex-direction:column; gap:12px; }
  .rummy-board[data-layout=standard][data-playing=true] .table-status { order:0; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal { order:1; display:flex; align-items:center; gap:12px; padding:10px 14px; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal-heading { flex:1; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal h2 { font-size:17px; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal-chips,.rummy-board[data-layout=standard][data-playing=true] .r-progress,.rummy-board[data-layout=standard][data-playing=true] .r-round-number,.rummy-board[data-layout=standard][data-playing=true] .r-hint-mode { display:none; }
  .rummy-board[data-layout=standard][data-playing=true] .r-goal-meta { margin:0; padding:0; border:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-hand-panel { order:2; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-seating { order:3; margin:0; }
  .rummy-board[data-layout=standard][data-playing=true] .r-table-melds { order:4; }
  .rummy-board[data-layout=standard][data-playing=true] .r-resume-panel { order:5; }
}
.rummy-board[data-layout=standard][data-playing=true] .r-hand-dock { position:static; }

/* The piles show cards; the hand supplies the single set of action labels. */
.rummy-board .r-market-zone .r-piles { display:flex; align-items:center; justify-content:center; gap:22px; padding:10px 4px 20px; margin:0; border:0; min-width:0; }
.rummy-board .r-market-zone .r-piles .r-pile { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; align-items:center; justify-items:center; flex:0 1 80px; width:calc((100% - 22px) / 2); min-width:44px; gap:0; padding:4px; }
.rummy-board .r-market-zone .r-piles .r-pile > .playing-card,.rummy-board .r-market-zone .r-piles .r-empty-card { grid-area:1/1; width:100%; height:auto; aspect-ratio:2/3; margin:0; border-radius:8%; container-type:inline-size; }
.rummy-board .r-market-zone .r-piles .r-pile:enabled > .playing-card { outline-width:2px; outline-offset:3px; }
.rummy-board .r-piles .r-buy-clock { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); margin:0; border-radius:50%; background:var(--table); pointer-events:none; }
.rummy-board .r-piles .r-buy-clock-label { display:none; }
/* Closing the buy window must not look like drawing the open card is locked. */
.rummy-board .r-piles .r-buy-clock.is-closed { visibility:hidden; }
.rummy-board .r-turn-choice .r-draw-decision > .button { font-size:14px; line-height:1.3; white-space:normal; }
.r-help-table-details { margin:16px 0 0; padding:12px 0 0; border-top:1px solid var(--line); font-size:14px; line-height:1.5; }
.r-help-table-details > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.r-help-table-details > div + div { margin-top:7px; }
.r-help-table-details dt { color:var(--muted); flex:none; }
.r-help-table-details dd { margin:0; text-align:right; overflow-wrap:anywhere; font-weight:600; }
@media(max-width:760px) and (orientation:portrait) {
  .rummy-board .r-market-zone .r-piles .r-pile { flex-basis:72px; }
  .rummy-board .r-turn-choice .r-draw-decision > .button { padding:8px; }
}
@media(max-width:360px), (orientation:landscape) and (max-height:600px) {
  .rummy-board .r-turn-choice .r-draw-decision > .button { font-size:13px; }
}

/* The goal uses the familiar Rummy cards, with no extra labels or controls. */
.r-goal-heading > .game-emblem { width:48px; height:48px; border-radius:0; background:none; }
.r-goal-heading > .grow { min-width:0; }
.rummy-board.is-board-view .r-goal { border-color:color-mix(in srgb,var(--green) 16%,var(--line)); background:linear-gradient(115deg,color-mix(in srgb,var(--green) 7%,var(--surface)),var(--surface) 70%); }
.r-header-goal > .game-emblem { width:28px; height:28px; border-radius:0; background:none; }
@media(max-width:760px) and (orientation:portrait) {
  .rummy-board.is-compact:not(.is-hand-view) .r-goal { padding:7px 11px; gap:10px; border-radius:16px; }
  .rummy-board.is-compact .r-goal-heading { gap:8px; }
  .rummy-board.is-compact .r-goal-heading > .game-emblem { width:40px; height:40px; }
  .rummy-board.is-compact .r-goal h2 { font-size:15px; line-height:1.3; }
  .rummy-board.is-compact .r-goal-meta { max-width:42%; }
  .rummy-board.is-compact .r-goal-meta > span { line-height:1.4; }
  .rummy-board.is-compact .r-goal-meta > span > svg { flex:none; }
}

/* Skip-Bo is deliberately isolated from the ordinary suit-card layouts. */
.sb-card{--sb-ink:#35638c;display:block;position:relative;width:100%;aspect-ratio:5/7;container-type:inline-size;border:4px solid #f9f7ef;border-radius:11px;background:radial-gradient(ellipse at 78% 10%,#fff9,transparent 70%),#eeeee5;color:var(--sb-ink);box-shadow:0 3px 0 #b9c0c8,0 6px 15px #0002;font-family:Manrope,system-ui,sans-serif;overflow:hidden;flex:none;user-select:none}
.sb-card:before{content:'';position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--sb-ink) 19%,transparent);border-radius:5px}
.sb-card:after{content:'';position:absolute;inset:19% -25%;border:1px solid color-mix(in srgb,var(--sb-ink) 8%,transparent);border-radius:50%;transform:rotate(-26deg)}
.sb-card.sb-coral{--sb-ink:#b46049}.sb-card.sb-sage{--sb-ink:#437563}.sb-card.sb-wild{--sb-ink:#7759a4;background:radial-gradient(ellipse at 30% 20%,#fff9,transparent 70%),#e7def4}
.sb-card>b{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) rotate(-7deg);font-size:68cqi;line-height:1;font-weight:800;letter-spacing:-.075em;z-index:1}.sb-card>b.sb-two{font-size:57cqi;letter-spacing:-.09em}.sb-card.sb-wild>b:not(.sb-two){font-size:67cqi;transform:translate(-50%,-50%)}
.sb-card-corner{position:absolute;left:6%;top:4%;font-size:16cqi;line-height:1;font-weight:750;z-index:1}.sb-card-corner.sb-bottom{inset:auto 6% 4% auto;transform:rotate(180deg)}.sb-card-glyph{position:absolute;bottom:9%;left:0;right:0;text-align:center;font-size:20cqi;line-height:1}
.sb-slot{display:flex;position:relative;align-items:center;justify-content:center;width:100%;aspect-ratio:5/7;border:1px solid color-mix(in srgb,var(--text) 17%,transparent);border-radius:11px;color:var(--muted);container-type:inline-size;background:#00000008}.sb-slot>span{opacity:.45;font-size:16px}.sb-start{font-size:38px;font-weight:650;color:color-mix(in srgb,var(--mint,#8bceb6) 40%,transparent)}.sb-start>span{position:absolute;bottom:10%;font-size:15px}
.sb-game{--sb-line:color-mix(in srgb,var(--text) 13%,transparent);max-width:1300px;margin:0 auto;min-width:0}.sb-game button{touch-action:manipulation}.sb-heading{display:flex;align-items:center;gap:12px;margin:0 0 22px;min-width:0}.sb-heading .game-emblem{width:42px;height:42px;flex:none}.sb-title{min-width:0;flex:1}.sb-title h1{font-size:22px;line-height:1.25;margin:0}.sb-title>span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}.sb-online{width:6px;height:6px;flex:none;border-radius:50%;background:#8bceb6}.sb-online.offline{background:#bda6fc;box-shadow:0 0 0 4px #bda6fc12}
.sb-layout{display:grid;grid-template-columns:1fr;gap:16px}.sb-opponents{display:grid;grid-template-columns:repeat(var(--players),minmax(0,1fr));gap:12px}.sb-player{display:block;min-width:0;text-align:left;padding:13px 16px;border:1px solid var(--sb-line);border-radius:18px;background:linear-gradient(135deg,var(--surface),var(--bg));color:var(--text)}.sb-player.is-active{border-color:var(--accent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface))}.sb-player-heading{display:flex;align-items:center;gap:10px;min-width:0}.sb-player-heading img,.sb-self img{display:block;flex:none;border-radius:50%;width:30px;height:30px;aspect-ratio:1;object-fit:cover}.sb-player.is-active .sb-player-heading img,.sb-self.is-active img{outline:2px solid var(--accent);outline-offset:3px}.sb-player-heading>strong{font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sb-count{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;flex:none;color:var(--muted)}.sb-public-piles{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:12px}.sb-public-stock{width:36px;margin-right:8px}.sb-public-discard{width:29px}.sb-public-piles .sb-card{border-width:2px;border-radius:5px;box-shadow:0 2px 0 #b9c0c8}.sb-public-piles .sb-card-corner,.sb-public-piles .sb-card-glyph,.sb-public-piles .sb-card:after{display:none}.sb-public-piles .sb-slot{border-radius:5px}.sb-public-piles .sb-card>b{font-size:76cqi}.sb-public-piles .sb-card>b.sb-two{font-size:65cqi}
.sb-board{position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,#8bceb6 27%,var(--sb-line));border-radius:26px;background:radial-gradient(ellipse at 50% 100%,#8bceb615,transparent 70%),var(--surface);min-width:0}.sb-board:after{content:'';position:absolute;inset:24% 12% -75%;border:1px solid #8bceb61a;border-radius:50%;z-index:-1;pointer-events:none}.sb-board>header{display:flex;justify-content:space-between;align-items:center;padding:17px 24px 0;color:var(--muted);font-size:12px}.sb-board>header>span{display:flex;align-items:center;gap:8px}.sb-board .sb-deck-count{font-variant-numeric:tabular-nums;font-size:11px;opacity:.8}.sb-builds{display:flex;justify-content:center;align-items:center;gap:26px;padding:22px 30px 35px;min-height:228px}.sb-build{width:104px;position:relative;flex:none}.sb-card-button{display:block;position:relative;padding:0;border:0;background:none;width:100%;aspect-ratio:5/7;border-radius:11px;color:inherit;outline-offset:5px;isolation:isolate}.sb-card-button:disabled{opacity:1;cursor:default}.sb-card-button.is-selected{outline:3px solid var(--accent);outline-offset:4px}.sb-card-button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.sb-progress{position:absolute;bottom:-15px;left:0;right:0;display:flex;justify-content:center;gap:3px}.sb-progress i{width:4px;height:3px;border-radius:2px;background:#8bceb625}.sb-progress i.filled{background:#8bceb6}.sb-build .sb-card{animation:sb-place .22s ease-out}
.sb-personal{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(245px,.74fr);gap:24px;padding:20px 25px 25px;border:1px solid var(--sb-line);border-radius:26px;background:var(--surface);min-width:0}.sb-personal.is-active{border-color:color-mix(in srgb,var(--accent) 75%,var(--sb-line))}.sb-personal header{display:flex;align-items:center;justify-content:space-between;gap:8px;height:32px;margin-bottom:14px;color:var(--muted);font-size:12px}.sb-personal header>span:not(.sb-count){display:flex;align-items:center;gap:7px}.sb-stock-title{font-size:11px}.sb-stock-area{padding-right:22px;border-right:1px solid var(--sb-line)}.sb-stock-area>.sb-card-button{width:80px;margin:0 auto}.sb-hand-area,.sb-discards-area{min-width:0}.sb-hand,.sb-discards{display:flex;align-items:center;justify-content:center;gap:9px;min-width:0}.sb-hand-slot{width:calc((100% - 36px)/5);max-width:82px;flex:none}.sb-discards-area{padding-left:24px;border-left:1px solid var(--sb-line)}.sb-discard-slot{width:calc((100% - 27px)/4);max-width:69px;flex:none}.sb-clear{display:grid;place-items:center;width:32px;height:32px;padding:0;background:transparent;border:1px solid var(--sb-line);border-radius:50%;color:var(--muted)}.sb-hand-empty{opacity:.35}.sb-discard-action{position:absolute;inset:0;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 15%,transparent);box-shadow:inset 0 0 0 2px var(--accent);color:var(--text)}.sb-discard-action svg{padding:5px;width:31px;height:31px;border-radius:50%;background:var(--surface);box-shadow:0 2px 10px #0003}
.sb-state{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:20px 24px;border:1px solid var(--sb-line);border-radius:22px;background:var(--surface)}.sb-state>strong{flex:1}.sb-state>svg{color:var(--accent)}.sb-lobby{padding:36px 28px;text-align:center;border:1px solid var(--sb-line);border-radius:28px;background:radial-gradient(ellipse at 50% 0%,#8bceb611,transparent 60%),var(--surface)}.sb-lobby h2{margin:28px 0;font-size:clamp(25px,4vw,36px)}.sb-lobby-art{display:flex;justify-content:center;gap:8px;padding:20px}.sb-lobby-art .sb-card{width:100px;transform:rotate(-12deg) translateY(9px)}.sb-lobby-art .sb-card:nth-child(2){transform:rotate(0);z-index:1}.sb-lobby-art .sb-card:nth-child(3){transform:rotate(12deg) translateY(9px)}.sb-seats{max-width:670px;margin:0 auto 30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sb-lobby-player{display:flex;align-items:center;min-width:0;min-height:64px;padding:9px 10px;border:1px solid var(--sb-line);border-radius:16px}.sb-lobby-player>.sb-player{background:none;border:0;flex:1;padding:3px 8px 3px 0}.sb-lobby-player>.sb-lobby-remove{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin-left:8px;border-radius:50%}.sb-lobby-remove:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.sb-lobby-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center}.sb-lobby-actions .bot-form{margin:0;display:flex;gap:8px}.sb-lobby-actions .button{min-height:48px}
.sb-help-art{display:flex;justify-content:center;gap:13px;padding:15px 0 25px}.sb-help-art .sb-card{width:76px}.sb-help h3{font-size:24px;margin:0 0 20px}.sb-help p{line-height:1.65;color:var(--muted);margin:0 0 15px}.sb-help .r-sheet-content{padding:22px 28px}.sb-detail-stock{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0 28px}.sb-detail-stock>img{border-radius:50%}.sb-detail-stock>.sb-card{width:72px}.sb-detail-stock>.sb-count{margin:0}.sb-detail-discards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.sb-detail-discards>div{min-width:0}.sb-detail-discards .sb-card+.sb-card{margin-top:-85%}.sb-detail-discards .sb-card{position:relative}.sb-hand-mode .sb-opponents,.sb-hand-mode .sb-board{display:none}.sb-hand-mode .sb-layout{display:block}.sb-hand-mode .sb-personal{min-height:270px}.sb-hand-mode .sb-state{margin-top:16px}
.sb-display{--sb-line:color-mix(in srgb,var(--text) 13%,transparent);display:grid;grid-template-rows:auto auto;gap:24px;max-width:1550px;width:100%;margin:24px auto}.sb-display .sb-opponents{order:2;grid-template-columns:repeat(var(--players),minmax(0,1fr))}.sb-display .sb-builds{min-height:300px}.sb-display .sb-build{width:140px}.sb-display .sb-player{padding:18px}.sb-display .sb-player-heading>strong{font-size:15px}.sb-display .sb-public-stock{width:48px}.sb-display .sb-public-discard{width:38px}.sb-display .sb-state{order:3}.sb-screen-title{display:flex;align-items:center;gap:12px;margin:18px auto 0;max-width:1550px}.sb-screen-title h1{font-size:23px;margin:0}.sb-screen-title .game-emblem{width:40px;height:40px}.sb-screen-title>span{margin-left:auto;color:var(--muted);font-size:14px}
.story-library-art .sb-card{position:relative;width:74px;flex:0 0 74px;transform:rotate(-10deg)}.story-library-art .sb-card+.sb-card{margin-left:-40px;transform:rotate(10deg)}.invitation-cards>.sb-card{width:90px}
@keyframes sb-place{from{opacity:.75;transform:translateY(-7px) scale(1.025)}to{opacity:1;transform:none}}
@media(max-width:1000px){.sb-personal{grid-template-columns:95px minmax(0,1fr);grid-template-rows:auto auto;gap:16px 24px}.sb-stock-area{grid-row:1/3;display:flex;flex-direction:column;justify-content:center;padding-right:16px}.sb-stock-title{display:none!important}.sb-hand-area{grid-column:2}.sb-discards-area{grid-column:2;padding:10px 0 0;border-left:0;border-top:1px solid var(--sb-line)}.sb-personal header{height:24px;margin-bottom:10px}.sb-hand-slot{max-width:68px}.sb-discard-slot{max-width:52px}.sb-player{padding:12px 10px}.sb-player-heading{gap:7px}.sb-player-heading>strong{font-size:12px}.sb-public-stock{width:28px;margin-right:3px}.sb-public-discard{width:22px}.sb-display .sb-opponents{grid-template-columns:repeat(3,minmax(0,1fr))}.sb-display .sb-public-stock{width:39px}.sb-display .sb-public-discard{width:30px}}
@media(max-width:600px){.sb-heading{gap:8px;margin-bottom:14px}.sb-heading .game-emblem{display:none}.sb-title h1{font-size:19px}.sb-title>span{font-size:11px;max-width:150px}.sb-heading .round-button{width:40px;height:40px;flex:none}.sb-layout{gap:12px}.sb-opponents{gap:7px;grid-template-columns:repeat(min(var(--players),3),minmax(0,1fr))}.sb-player{padding:10px 8px;border-radius:14px}.sb-player-heading{gap:6px}.sb-player-heading img{width:23px;height:23px}.sb-player-heading>strong{font-size:11px}.sb-count{font-size:11px}.sb-player .sb-count{gap:0}.sb-player .sb-count svg{display:none}.sb-public-piles{gap:3px;margin-top:10px}.sb-public-stock{width:24px;margin-right:3px}.sb-public-discard{width:16px}.sb-public-piles .sb-card{border-width:1px;border-radius:3px}.sb-public-piles .sb-card:before{inset:1px;border-radius:2px}.sb-public-piles .sb-slot{border-radius:3px}.sb-public-piles .sb-slot>span{font-size:8px}.sb-public-piles .sb-card:after{display:none}.sb-board{border-radius:21px}.sb-board>header{padding:12px 15px 0;font-size:11px}.sb-builds{min-height:0;gap:13px;padding:16px 19px 29px}.sb-build{width:calc((100% - 39px)/4);max-width:82px}.sb-progress{gap:2px;bottom:-13px}.sb-progress i{width:3px;height:2px}.sb-card{border-width:3px;border-radius:8px}.sb-slot,.sb-card-button,.sb-discard-action{border-radius:8px}.sb-card:before{inset:2px;border-radius:3px}.sb-personal{grid-template-columns:61px minmax(0,1fr);grid-template-rows:auto auto;padding:13px 15px 18px;gap:16px 16px;border-radius:21px}.sb-stock-area{grid-column:1;grid-row:1;padding:0;border:0;display:block}.sb-stock-area>.sb-card-button{width:100%}.sb-stock-area header{gap:5px}.sb-self img{width:23px;height:23px}.sb-discards-area{grid-column:2;grid-row:1;padding:0;border:0}.sb-discards{gap:8px}.sb-discard-slot{width:calc((100% - 24px)/4);max-width:61px}.sb-hand-area{grid-column:1/-1;grid-row:2;padding-top:12px;border-top:1px solid var(--sb-line)}.sb-hand{gap:8px}.sb-hand-slot{width:calc((100% - 32px)/5);max-width:63px}.sb-personal header{font-size:11px;margin-bottom:10px}.sb-state{padding:18px;gap:12px;flex-wrap:wrap}.sb-state>strong{font-size:15px}.sb-state .button{width:100%}.sb-lobby{padding:22px 14px}.sb-lobby-art .sb-card{width:76px}.sb-seats{grid-template-columns:1fr}.sb-lobby-actions{flex-direction:column;align-items:stretch}.sb-lobby-actions .bot-form{justify-content:center}.sb-lobby-actions .bot-form .button{font-size:13px}.sb-display{margin-top:16px;gap:14px}.sb-display .sb-opponents{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-display .sb-builds{min-height:0}.sb-display .sb-build{width:calc((100% - 39px)/4)}.sb-display .sb-player{padding:12px}.sb-display .sb-player-heading>strong{font-size:12px}.sb-display .sb-public-stock{width:32px}.sb-display .sb-public-discard{width:24px}.sb-screen-title>span{font-size:12px}.sb-screen-title h1{font-size:20px}.sb-hand-mode .sb-personal{max-width:500px;margin:auto}.sb-help .r-sheet-content{padding:18px 22px}.sb-help p{font-size:14px}.sb-help h3{font-size:22px}}
@media(min-width:601px) and (max-height:650px){.sb-heading{margin-bottom:12px}.sb-layout{grid-template-columns:minmax(0,1fr) minmax(285px,.86fr);grid-template-rows:auto 1fr;gap:12px}.sb-opponents{grid-column:1;grid-row:1;gap:7px;grid-template-columns:repeat(min(var(--players),3),minmax(0,1fr))}.sb-player{padding:8px}.sb-player-heading{gap:5px}.sb-player-heading img{width:23px;height:23px}.sb-player-heading>strong{font-size:11px}.sb-player .sb-count{font-size:10px}.sb-player .sb-count svg{display:none}.sb-public-piles{display:none}.sb-board{grid-column:1;grid-row:2;border-radius:20px}.sb-board>header{padding:10px 14px 0;font-size:11px}.sb-builds{min-height:160px;padding:14px 20px 28px;gap:13px}.sb-build{width:calc((100% - 39px)/4);max-width:70px}.sb-personal{grid-column:2;grid-row:1/3;grid-template-columns:51px minmax(0,1fr);grid-template-rows:auto auto;gap:12px;padding:12px 14px 16px;border-radius:20px}.sb-stock-area{grid-column:1;grid-row:1;border:0;padding:0;display:block}.sb-stock-area>.sb-card-button{width:100%}.sb-personal header{height:23px;font-size:11px}.sb-self img{width:23px;height:23px}.sb-discards-area{grid-column:2;grid-row:1;padding:0;border:0}.sb-discards{gap:6px}.sb-discard-slot{width:calc((100% - 18px)/4);max-width:50px}.sb-hand-area{grid-column:1/-1;grid-row:2;padding-top:10px;border-top:1px solid var(--sb-line)}.sb-hand{gap:7px}.sb-hand-slot{width:calc((100% - 28px)/5);max-width:54px}.sb-card{border-width:2px;border-radius:7px}.sb-card:before{inset:2px;border-radius:3px}.sb-display{gap:14px;margin-top:14px}.sb-display .sb-builds{min-height:160px}.sb-display .sb-build{width:72px}.sb-display .sb-opponents{grid-template-columns:repeat(min(var(--players),4),minmax(0,1fr))}.sb-display .sb-player{padding:10px}.sb-display .sb-public-piles{display:flex}.sb-display .sb-public-stock{width:31px}.sb-display .sb-public-discard{width:23px}.sb-display .sb-player-heading>strong{font-size:12px}}
@media(max-width:360px){.sb-heading .table-view-choice{max-width:60px}.sb-player{padding:9px 6px}.sb-player-heading img{width:20px;height:20px}.sb-player-heading>strong{font-size:10px}.sb-public-piles{gap:2px}.sb-public-stock{width:20px;margin-right:1px}.sb-public-discard{width:13px}.sb-personal{padding:12px;grid-template-columns:49px minmax(0,1fr);column-gap:13px}.sb-self img{width:21px;height:21px}.sb-personal header{font-size:10px}.sb-discards,.sb-hand{gap:6px}.sb-discard-slot{width:calc((100% - 18px)/4)}.sb-hand-slot{width:calc((100% - 24px)/5)}.sb-builds{gap:11px;padding-left:14px;padding-right:14px}.sb-build{width:calc((100% - 33px)/4)}.sb-progress{gap:1px}.sb-progress i{width:3px}.sb-heading{gap:5px}.sb-title>span{max-width:110px}.sb-display .sb-player{padding:10px}.sb-display .sb-public-discard{width:19px}.sb-display .sb-public-stock{width:26px}}
@media(prefers-reduced-motion:reduce){.sb-build .sb-card{animation:none}}
.sb-state[hidden]{display:none}.sb-hand-mode .sb-board{display:block;margin-bottom:16px}.sb-hand-mode .sb-board>header{display:none}.sb-hand-mode .sb-builds{min-height:0;padding:15px 20px 28px;gap:20px}.sb-hand-mode .sb-build{width:58px}
.share-feedback:empty{display:none}
.sb-heading .responsive-tools{display:block;position:relative}.sb-heading .responsive-tools-trigger{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 11px;border:1px solid var(--sb-line);border-radius:13px;background:var(--surface);color:var(--accent);font-size:12px}.sb-heading .responsive-tools-content{display:none;position:absolute;z-index:25;right:0;top:calc(100% + 10px);width:250px;max-width:calc(100vw - 32px);padding:8px;border:1px solid var(--sb-line);border-radius:18px;background:var(--surface-raised);box-shadow:0 12px 35px #0005}.sb-heading .responsive-tools.is-open>.responsive-tools-content{display:block}.sb-heading .table-view-options{display:flex;flex-direction:column;align-items:stretch;border:0;padding:0;background:none;border-radius:0}.sb-heading .table-view-options>button{display:flex;align-items:center;gap:10px;border-radius:10px;min-height:44px;padding:11px 12px;font-size:13px;text-align:left;justify-content:flex-start}.sb-heading .turn-controls{margin:8px 4px 0;padding:8px 0 0}.sb-heading .turn-control{flex-wrap:wrap}.sb-heading .table-view-options .turn-signal-controls{max-width:100%}
@media(max-width:760px){.sb-heading{padding:4px 0;margin-bottom:13px}}
@media(max-width:600px) and (max-height:740px){.sb-heading{margin-bottom:10px}.sb-layout{gap:10px}.sb-player{padding-block:8px}.sb-public-piles{margin-top:7px}.sb-board>header{padding-top:10px}.sb-builds{padding-block:11px 25px;gap:15px}.sb-build{max-width:58px}.sb-personal{padding:11px 13px 15px;grid-template-columns:49px minmax(0,1fr);row-gap:12px}.sb-personal header{height:23px;margin-bottom:8px}.sb-hand-area{padding-top:10px}.sb-hand-slot{max-width:53px}.sb-discard-slot{max-width:49px}.sb-stock-title{display:none!important}}
@media(max-width:600px) and (max-height:740px){.sb-player{padding-block:7px}.sb-public-piles{margin-top:5px}.sb-heading{margin-bottom:8px}.sb-builds{padding-top:9px;padding-bottom:23px}.sb-build{max-width:50px}.sb-personal{padding-top:10px;padding-bottom:12px;row-gap:9px;grid-template-columns:45px minmax(0,1fr)}.sb-discards .sb-discard-slot{max-width:45px}.sb-hand-slot{max-width:49px}.sb-personal header{height:22px;margin-bottom:7px}.sb-hand-area{padding-top:8px}}
@media(min-width:601px) and (max-height:450px){.sb-layout{gap:9px}.sb-heading{margin-bottom:10px}.sb-builds{min-height:137px;padding:10px 18px 24px}.sb-build{max-width:61px}.sb-personal{padding-top:10px;padding-bottom:13px;row-gap:9px}.sb-hand-slot{max-width:48px}.sb-stock-area>.sb-card-button{width:45px}.sb-personal header{height:22px;margin-bottom:8px}.sb-hand-area{padding-top:8px}}
@media(min-width:601px) and (max-height:650px){.sb-screen-title{margin-top:10px}.sb-display{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto;gap:14px;margin-top:12px}.sb-display .sb-board{grid-column:1;grid-row:1;align-self:stretch}.sb-display .sb-builds{min-height:0;flex:1;padding:15px 14px 25px;gap:10px}.sb-display .sb-board{display:flex;flex-direction:column}.sb-display .sb-build{width:calc((100% - 30px)/4);max-width:62px}.sb-display .sb-opponents{grid-column:2;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sb-display .sb-player{padding:8px 9px}.sb-display .sb-player-heading img{width:23px;height:23px}.sb-display .sb-player-heading>strong{font-size:11px}.sb-display .sb-public-piles{margin-top:7px;gap:4px}.sb-display .sb-public-stock{width:23px;margin-right:3px}.sb-display .sb-public-discard{width:19px}.sb-display .sb-state{grid-column:1/-1}}
.sb-start{color:color-mix(in srgb,var(--text) 42%,transparent)}
@media(min-width:361px) and (max-width:600px){.sb-player{padding-inline:6px}.sb-player-heading{gap:5px}.sb-player-heading>strong{font-size:10.5px}.sb-player-heading img{width:22px;height:22px}}

@media(max-width:760px){.story-library-art .sb-card{width:66px;flex-basis:66px}}

/* Table hierarchy, tactile cards and deliberate selection feedback. */
.sb-game{max-width:1120px}
.sb-layout{gap:18px}
.sb-heading{margin-bottom:24px}
.sb-heading .sb-help-trigger{min-width:44px;min-height:44px;border:1px solid var(--sb-line);background:var(--surface);color:var(--accent);font:700 20px Manrope,system-ui,sans-serif}
.sb-title h1{font-size:24px}
.sb-opponents{gap:10px}
.sb-player{border-radius:16px;background:var(--surface);padding:12px 16px;transition:border-color .18s,background .18s}
.sb-player.is-active{box-shadow:inset 0 3px 0 var(--accent)}
.sb-public-piles{justify-content:flex-start;padding-left:4px}
.sb-public-stock{position:relative;margin-right:12px}
.sb-public-stock:after{content:'';position:absolute;right:-8px;top:10%;bottom:10%;width:1px;background:var(--sb-line)}
.sb-board{border-radius:24px;border-color:color-mix(in srgb,var(--green) 28%,var(--line));background:radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--green) 12%,transparent),transparent 75%),var(--surface);box-shadow:inset 0 1px 0 #ffffff05,0 12px 30px #00000008}
.sb-board:after{inset:12px;border-radius:16px;border-color:color-mix(in srgb,var(--green) 8%,transparent)}
.sb-board>header{padding:20px 26px 0;color:var(--text);font-size:12px;font-weight:600}
.sb-board .sb-deck-count{color:var(--muted);font-weight:400}
.sb-builds{gap:32px;min-height:230px;padding:25px 28px 38px}
.sb-build{width:106px}
.sb-start{border-style:dashed;border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:color-mix(in srgb,var(--green) 4%,transparent);color:color-mix(in srgb,var(--green) 70%,var(--text));font-size:40px}
.sb-start>span{opacity:.3}
.sb-progress{gap:3px;bottom:-17px}
.sb-progress i{flex:1;height:3px;background:color-mix(in srgb,var(--green) 15%,transparent)}
.sb-progress i.filled{background:var(--green)}
.sb-card{border-color:#faf7ee;background:radial-gradient(ellipse at 80% 0%,#ffffffc9,transparent 70%),#f1eee4;box-shadow:0 2px 0 #cbc6bb,0 4px 0 #aaa89f,0 8px 16px #00000028}
.sb-card>b{top:49%;font-size:65cqi;transform:translate(-50%,-50%);letter-spacing:-.07em}
.sb-card>b.sb-two{font-size:56cqi}
.sb-card.sb-wild{background:radial-gradient(ellipse at 20% 5%,#ffffffa0,transparent 70%),#e5d9f5}
.sb-card:after{inset:21% -17%;border-width:2px;transform:rotate(-32deg)}
.sb-card-button{transition:transform .16s,box-shadow .16s;outline-offset:4px}
.sb-card-button.is-selected{transform:translateY(-8px);outline:2px solid var(--accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 13%,transparent)}
.sb-build button:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 65%,transparent),0 0 0 7px color-mix(in srgb,var(--accent) 8%,transparent)}
.sb-build button:not(:disabled) .sb-start{color:var(--text);border-color:var(--accent)}
.sb-personal{grid-template-columns:130px minmax(0,1fr) 270px;padding:22px;gap:24px;border-radius:24px;border-color:var(--sb-line);background:var(--surface)}
.sb-personal.is-active{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 5%,transparent)}
.sb-personal header{height:28px;margin-bottom:18px;font-size:12px;color:var(--text)}
.sb-personal header svg{color:var(--muted)}
.sb-stock-area{position:relative;display:block;padding:0 20px 0 0;border-right:1px solid var(--sb-line)}
.sb-stock-title{display:inline!important;font-size:12px;font-weight:650;white-space:nowrap}
.sb-stock-area header>svg{color:var(--accent)}
.sb-stock-stack{position:relative;width:86px;max-width:100%;margin:0 auto 12px;isolation:isolate}
.sb-stock-stack.has-cards:before,.sb-stock-stack.has-cards:after{content:'';position:absolute;inset:3px 1px -4px;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--surface));border-radius:10px;background:var(--surface-raised);z-index:-1;transform:rotate(-5deg)}
.sb-stock-stack.has-cards:after{inset:5px 3px -8px;transform:rotate(4deg);z-index:-2}
.sb-stock-stack>.sb-count{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);z-index:2;justify-content:center;min-width:32px;padding:2px 8px;border-radius:20px;border:2px solid var(--surface);background:var(--accent);color:var(--accent-ink);font-size:11px;pointer-events:none}
.sb-hand{gap:10px;padding-top:2px}
.sb-hand-slot{width:calc((100% - 40px)/5);max-width:83px}
.sb-hand-empty{opacity:.2}
.sb-discards-area{padding-left:22px}
.sb-discards{gap:9px;padding-top:2px}
.sb-discard-slot{width:calc((100% - 27px)/4);max-width:61px}
.sb-discards .sb-slot{border-style:dashed;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.sb-discards-area.is-target header{color:var(--accent)}
.sb-discard-action{background:color-mix(in srgb,var(--accent) 5%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent);display:block}
.sb-discard-action svg{position:absolute;bottom:-9px;right:-5px;width:25px;height:25px;padding:5px;background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 7px #0003}
.sb-clear{width:28px;height:28px}
.sb-help .r-sheet-content{padding:24px 30px 30px}
.sb-help-art{gap:16px;padding:10px 0 30px}
.sb-help-art .sb-card{width:70px;transform:rotate(-8deg)}
.sb-help-art .sb-card:nth-child(2){transform:translateY(-7px)}
.sb-help-art .sb-card:nth-child(3){transform:rotate(8deg)}
.sb-help h3{text-align:center;margin-bottom:24px}
.sb-help-rules{display:grid;gap:0}
.sb-help-rule{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.sb-help-rule>svg{color:var(--accent);margin:3px auto 0}
.sb-help-rule p{margin:0;color:var(--text);font-size:14px;line-height:1.65}
.sb-flying-card{position:fixed!important;z-index:1000!important;pointer-events:none;transform-origin:top left;margin:0!important;animation:none!important}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .sb-personal .sb-card-button:not(:disabled):hover{transform:translateY(-4px)}
 .sb-personal .sb-card-button.is-selected:hover{transform:translateY(-8px)}
 .sb-build button:not(:disabled):hover{transform:translateY(-3px)}
 .sb-player:is(button):hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
}
@media(max-width:1000px){
 .sb-personal{grid-template-columns:110px minmax(0,1fr);gap:20px}
 .sb-stock-area{grid-column:1;grid-row:1/3;align-self:stretch;padding-right:20px}
 .sb-stock-stack{margin-top:24px}
 .sb-hand-area{grid-column:2;grid-row:1}
 .sb-discards-area{grid-column:2;grid-row:2;padding:16px 0 0;border-left:0}
 .sb-personal header{margin-bottom:12px}
 .sb-hand-slot{max-width:76px}
 .sb-discard-slot{max-width:55px}
}
@media(max-width:600px){
 .sb-heading{margin-bottom:16px;gap:8px}
 .sb-title h1{font-size:21px}
 .sb-layout{gap:12px}
 .sb-opponents{gap:6px}
 .sb-player{padding:10px 7px;border-radius:13px}
 .sb-player-heading{gap:5px}
 .sb-player-heading>strong{font-size:10.5px}
 .sb-public-piles{padding:0;gap:3px;margin-top:10px}
 .sb-public-stock{width:23px;margin-right:6px}
 .sb-public-stock:after{right:-5px}
 .sb-public-discard{width:14px}
 .sb-board{border-radius:20px}
 .sb-board:after{inset:8px;border-radius:14px}
 .sb-board>header{padding:15px 18px 0;font-size:11px}
 .sb-builds{gap:17px;padding:20px 20px 32px;min-height:0}
 .sb-build{width:calc((100% - 51px)/4);max-width:78px}
 .sb-start{font-size:32px}
 .sb-progress{gap:2px;bottom:-15px}
 .sb-progress i{height:2px}
 .sb-personal{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;gap:18px 18px;padding:16px;border-radius:20px}
 .sb-personal header{height:23px;margin-bottom:14px;font-size:11px}
 .sb-stock-area{grid-column:1;grid-row:1;padding:0;border:0}
 .sb-stock-title{font-size:11px}
 .sb-stock-area header>svg{display:none}
 .sb-stock-stack{width:100%;margin:0 0 12px}
 .sb-hand-area{grid-column:1/-1;grid-row:2;padding-top:14px}
 .sb-hand,.sb-discards{gap:8px}
 .sb-hand-slot{width:calc((100% - 32px)/5);max-width:65px}
 .sb-discards-area{grid-column:2;grid-row:1;padding:0;border:0}
 .sb-discard-slot{width:calc((100% - 24px)/4);max-width:58px}
 .sb-help .r-sheet-content{padding:20px}
 .sb-help-rule{gap:7px;padding:14px 0}
 .sb-help-rule p{font-size:13px}
 .sb-help-art .sb-card{width:62px}
 .sb-display .sb-public-piles{justify-content:center}
}
@media(max-width:360px){
 .sb-heading{gap:5px}
 .sb-personal{padding:12px;grid-template-columns:52px minmax(0,1fr);gap:16px 12px}
 .sb-hand,.sb-discards{gap:6px}
 .sb-hand-slot{width:calc((100% - 24px)/5)}
 .sb-discard-slot{width:calc((100% - 18px)/4)}
 .sb-builds{gap:13px;padding-inline:16px}
 .sb-build{width:calc((100% - 39px)/4)}
 .sb-player{padding-inline:6px}
 .sb-public-piles{gap:2px}
 .sb-public-stock{width:20px;margin-right:4px}
 .sb-public-discard{width:11px}
 .sb-player-heading>strong{font-size:10px}
}
@media(max-width:600px) and (max-height:740px){
 .sb-heading{margin-bottom:10px}
 .sb-layout{gap:10px}
 .sb-player{padding-block:7px}
 .sb-public-piles{margin-top:7px}
 .sb-board>header{padding-top:12px}
 .sb-builds{padding-top:14px;padding-bottom:28px}
 .sb-build{max-width:60px}
 .sb-personal{padding-block:12px;row-gap:14px}
 .sb-personal header{margin-bottom:10px}
 .sb-stock-stack{max-width:56px}
 .sb-discard-slot{max-width:49px}
 .sb-hand-slot{max-width:53px}
 .sb-hand-area{padding-top:12px}
}
@media(min-width:601px) and (max-height:650px){
 .sb-heading{margin-bottom:12px}
 .sb-layout{gap:12px;grid-template-columns:minmax(0,1fr) minmax(290px,.86fr)}
 .sb-player{padding:8px}
 .sb-personal{grid-template-columns:52px minmax(0,1fr);padding:14px;gap:16px 12px}
 .sb-personal header{font-size:11px;height:23px;margin-bottom:12px}
 .sb-stock-area{grid-column:1;grid-row:1;padding:0;border:0}
 .sb-stock-title{font-size:10px}
 .sb-stock-area header>svg{display:none}
 .sb-stock-stack{width:100%;margin:0 0 12px}
 .sb-hand-area{grid-column:1/-1;grid-row:2;padding-top:12px}
 .sb-discards-area{grid-column:2;grid-row:1;padding:0;border:0}
 .sb-discards{gap:6px}
 .sb-discard-slot{width:calc((100% - 18px)/4);max-width:50px}
 .sb-hand{gap:7px}
 .sb-hand-slot{width:calc((100% - 28px)/5);max-width:54px}
 .sb-builds{gap:13px;padding:18px 18px 30px;min-height:155px}
 .sb-build{width:calc((100% - 39px)/4);max-width:67px}
 .sb-board>header{padding:14px 16px 0}
}
@media(prefers-reduced-motion:reduce){
 .sb-game *{transition:none!important}
 .sb-card-button.is-selected{transform:none}
}
@media(orientation:landscape) and (min-width:601px) and (max-height:450px){
 .room-shell:has(.sb-layout) .site-header{display:none}
 .room-shell:has(.sb-layout){--header-height:0px}
 .sb-heading{margin-bottom:8px;padding-block:4px}
 .sb-layout{gap:9px}
 .sb-personal{padding:10px 12px;gap:10px 12px}
 .sb-personal header{height:22px;margin-bottom:8px}
 .sb-stock-stack{width:46px}
 .sb-hand-area{padding-top:8px}
 .sb-hand-slot{max-width:48px}
 .sb-discard-slot{max-width:44px}
 .sb-builds{min-height:0;padding:14px 16px 27px}
 .sb-build{max-width:60px}
}

.app-shell:has(.creation-modal[open]){overscroll-behavior:contain}
body:has(.creation-modal[open]){overflow:hidden}
.modal.creation-modal{width:calc(100vw - 32px);max-width:500px;max-height:calc(100dvh - 48px);padding:0;border-radius:26px;overflow:hidden;overscroll-behavior:contain}
.creation-modal[open]{display:flex;flex-direction:column}
.creation-modal [hidden]{display:none!important}
.creation-header{display:flex;align-items:center;gap:12px;flex:none;padding:20px 22px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.creation-header h2{margin:0;font-size:25px;letter-spacing:-.65px;line-height:1.25;outline:none}
.creation-close,.creation-back{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;flex:none;border-radius:50%}
.creation-close{margin-left:auto}
.creation-selected{min-width:0;max-width:calc(100% - 56px)}
.creation-game-switch{display:flex;align-items:center;gap:13px;min-width:0;min-height:52px;max-width:100%;padding:3px 12px 3px 3px;border:1px solid transparent;border-radius:15px;background:transparent;color:var(--text);text-align:left;transition:background 160ms,border-color 160ms}
.creation-game-switch .game-emblem{width:46px;height:46px;flex:none}
.creation-game-switch>svg{color:var(--muted);flex:none;margin-left:4px}
.creation-game-switch>span:not(.game-emblem){font-size:24px;font-weight:650;letter-spacing:-.65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creation-catalog{min-height:0;display:flex;flex-direction:column;padding:20px 22px 22px}
.creation-modal .creation-search{flex:none;display:flex;flex-direction:row;align-items:center;gap:11px;border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:0 14px;margin:0 0 16px;color:var(--muted)}
.creation-search input{width:100%;border:0;background:transparent;padding:14px 0;min-height:48px;font-size:16px;outline:none}
.creation-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.creation-games{display:flex;flex-direction:column;gap:9px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:3px;margin:-3px;scroll-padding-block:4px}
.creation-games>button{display:flex;align-items:center;gap:16px;width:100%;min-height:74px;flex:none;padding:10px 17px 10px 12px;border:1px solid var(--line);border-radius:17px;background:var(--surface-raised);color:var(--text);text-align:left;transition:background 160ms,border-color 160ms}
.creation-games .game-emblem{height:50px;width:50px;flex:none}
.creation-games strong{font-size:18px;font-weight:650;letter-spacing:-.3px;flex:1;min-width:0;overflow-wrap:anywhere}
.creation-games>button>svg{flex:none;color:var(--muted)}
.creation-games>button[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent),transparent 40%);background:var(--accent-soft)}
.creation-games>button[aria-pressed=true]>svg{color:var(--accent)}
.creation-empty{display:grid;place-items:center;min-height:150px;color:var(--muted)}
.creation-settings{padding:23px 25px 26px;overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-padding-block:20px}
.creation-settings fieldset{border:0;padding:0;margin:0;min-width:0}
.creation-settings label{font-size:14px}
.creation-settings input{font-size:16px;min-height:50px;border-radius:12px}
.creation-settings .select-field{margin-bottom:18px}
.creation-settings .select-value{white-space:normal;line-height:1.4}
.creation-settings .ph-mode-choice{margin:0 0 24px}
.creation-settings .ph-mode-choice button{min-height:46px;white-space:nowrap;font-size:13px;gap:7px}
.creation-settings .ph-mode-intro p{line-height:1.65;color:var(--muted);margin:0 0 24px;font-size:14px}
.creation-settings .button.primary{min-height:52px;margin-top:6px}
.creation-settings .form-error{margin-bottom:0}
.creation-modal button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover){.creation-games>button:hover,.creation-game-switch:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent),transparent 45%)}.creation-games>button:hover>svg{color:var(--accent)}}
@media(max-width:600px){.modal.creation-modal{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:24px}.creation-header{padding:16px 18px}.creation-catalog{padding:18px}.creation-settings{padding:20px 20px 24px}.creation-games>button{min-height:72px}.creation-header h2{font-size:23px}}
@media(max-height:500px){.modal.creation-modal{max-height:calc(100dvh - 20px)}.creation-header{padding-top:10px;padding-bottom:10px}.creation-catalog{padding-top:12px;padding-bottom:14px}.creation-games>button{min-height:64px}.creation-search input{min-height:44px;padding-block:10px}.creation-modal .creation-search{margin-bottom:12px}.creation-settings{padding-top:16px}}
@media(prefers-reduced-motion:no-preference){.creation-modal[open]{animation:creation-arrive 190ms cubic-bezier(.2,.7,.3,1)}.creation-settings:not([hidden]),.creation-catalog:not([hidden]){animation:creation-content 160ms ease-out}@keyframes creation-arrive{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}@keyframes creation-content{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}}

/* My rooms: a quiet utility row and recognisable tables, using the chosen deck. */
.rooms-page{max-width:1160px;margin:0 auto;padding-bottom:16px}
.rooms-page .rooms-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;padding:42px 0 18px}
.rooms-heading h1{margin:0;font-size:clamp(28px,3.6vw,42px);letter-spacing:-1.3px;line-height:1.15}
.rooms-heading>.button{min-height:48px;flex:none;border-radius:14px;gap:9px}
.rooms-utilities{display:flex;align-items:center;gap:8px;margin-bottom:30px;padding-bottom:19px;border-bottom:1px solid var(--line)}
.rooms-utilities>a,.rooms-utilities>button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 13px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);font-size:14px;font-weight:500}
.rooms-utilities>svg,.rooms-utilities svg{flex:none}
.rooms-utilities>.room-screen-entry-desktop{margin:0 0 0 auto}
.rooms-utilities .room-screen-icon{background:none;width:auto;height:auto;margin:0;color:inherit}
.rooms-utilities .room-screen-icon>svg{width:19px;height:19px}
.rooms-utilities .room-screen-entry>svg{display:none}
.rooms-utilities>a:focus-visible,.rooms-utilities>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rooms-page .room-browser-toolbar{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.rooms-page .room-search{order:2;flex:1;max-width:340px;margin:0 0 0 auto;min-height:48px;border-radius:14px;background:var(--surface)}
.rooms-page .room-search input{font-size:14px;padding-block:12px}
.rooms-page .room-filters{margin:0;gap:8px;flex:none}
.rooms-page .room-filters>div{flex-wrap:nowrap;gap:3px;padding:4px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.rooms-page .room-filters button{min-height:42px;padding:8px 13px;border:0;border-radius:11px;background:none;font-size:14px;gap:8px}
.rooms-page .room-filters button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.rooms-page .room-filters button small{font-size:12px;min-width:20px;height:20px;border-radius:6px;background:none;color:inherit;opacity:.8;padding:0}
.rooms-page .room-directory-menu>summary{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.rooms-page .room-browser-grid{gap:20px}
.rooms-page .room-card{--room-tint:#9f91ce;border:1px solid var(--line);background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--room-tint) 10%,transparent),transparent 65%),var(--surface);border-radius:24px;transition:border-color 160ms,box-shadow 160ms}
.rooms-page .room-card[data-game=rummy-house]{--room-tint:#84c6b0}.rooms-page .room-card[data-game=borjesson]{--room-tint:#d6b27d}.rooms-page .room-card[data-game=skipbo]{--room-tint:#9bbeca}
.rooms-page .room-card.is-archived{background:var(--surface)}
.rooms-page .room-card-link{padding:24px;gap:14px;overflow:hidden}
.rooms-page .room-card-top{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:18px;align-items:center;padding:0;min-height:110px}
.rooms-page .room-card-title{flex:1;min-width:0}
.rooms-page .room-card-title>small{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.5;margin:0 0 10px}
.rooms-page .room-card-title>small .game-emblem{width:24px;height:24px;flex:none;border-radius:8px}
.rooms-page .room-card-title>strong{font-size:23px;line-height:1.26;font-weight:650;letter-spacing:-.65px}
.rooms-page .room-card-art{display:flex;align-items:center;justify-content:center;flex:0 0 108px;width:108px;padding:5px 7px 8px 0;pointer-events:none;isolation:isolate}
.rooms-page .room-card-art>.playing-card,.rooms-page .room-card-art>.sb-card{width:66px!important;height:99px!important;flex:0 0 66px;min-width:0;border-radius:7px;container-type:inline-size;transform:rotate(-12deg);box-shadow:0 2px 0 #b9c0c8,0 6px 12px #0002}
.rooms-page .room-card-art>.playing-card+.playing-card,.rooms-page .room-card-art>.sb-card+.sb-card{margin-left:-34px;transform:translateY(-4px) rotate(10deg);z-index:1}
.rooms-page .room-card-art>.sb-card{height:92px!important;border-width:3px}
.rooms-page .room-card-art>.playing-card .card-corner{font-size:14cqi}.rooms-page .room-card-art>.playing-card .card-corner b{font-size:22cqi}
.rooms-page .room-card-state{gap:10px;margin-top:-2px}
.rooms-page .room-state-pill{min-height:29px;padding:4px 9px;border-radius:8px;font-size:12px}
.rooms-page .room-card-state>small{font-size:12px}
.rooms-page .room-card-people{flex-direction:row;align-items:center;gap:13px;min-height:39px;padding:0;margin:2px 0}
.rooms-page .room-avatar-stack>span{width:35px;height:35px;border-radius:50%}
.rooms-page .room-avatar-stack img{border-radius:50%}
.rooms-page .room-participant-names{font-size:13px;line-height:1.45;min-width:0;flex:1}
.rooms-page .saved-room-action{min-height:46px;padding-top:17px;padding-right:56px;font-size:14px;color:var(--text);border-top-color:color-mix(in srgb,var(--line) 75%,transparent)}
.rooms-page .saved-room-action>svg{width:34px;height:34px;padding:8px;flex:none;background:var(--accent-soft);color:var(--accent)}
.rooms-page .room-card-menu{top:auto;bottom:19px;right:24px}
.rooms-page .room-card-menu>summary{width:44px;height:44px;border-radius:50%;color:var(--muted);border:1px solid var(--line);background:var(--surface-raised)}
.rooms-page .room-card-menu[open]{z-index:5}
.rooms-page .room-card-menu>div{top:auto;bottom:54px;right:0}
.rooms-page .room-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.rooms-page .room-empty{padding:48px 24px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 0,var(--accent-soft),transparent 70%),var(--surface)}
.rooms-page .room-empty .empty-icon{width:70px;height:70px;border-radius:22px;margin-bottom:22px}
.rooms-page .room-empty h3{font-size:24px;letter-spacing:-.5px}.rooms-page .room-empty p{max-width:340px;margin-inline:auto;line-height:1.6}
.rooms-page .room-screen-entry-mobile{border-radius:18px;min-height:68px;padding:12px 16px}
@media(hover:hover){.rooms-utilities>a:hover,.rooms-utilities>button:hover{color:var(--text);background:var(--surface)}.rooms-page .room-card:has(.room-card-link:hover){border-color:color-mix(in srgb,var(--room-tint) 60%,var(--line));box-shadow:0 8px 24px #00000012}}
@media(max-width:1000px){.rooms-page .room-browser-grid{gap:16px}.rooms-page .room-card-link{padding:20px}.rooms-page .room-card-menu{bottom:15px;right:20px}.rooms-page .room-card-top{grid-template-columns:minmax(0,1fr) 90px;gap:10px}.rooms-page .room-card-title>strong{font-size:21px}.rooms-page .room-card-art{flex-basis:90px;width:90px}.rooms-page .room-card-art>.playing-card,.rooms-page .room-card-art>.sb-card{width:58px!important;height:87px!important;flex-basis:58px}.rooms-page .room-card-people{flex-wrap:wrap}.rooms-page .room-participant-names{min-width:110px}}
@media(max-width:760px){.rooms-page .rooms-heading{padding:26px 0 15px;gap:12px}.rooms-heading h1{font-size:30px;letter-spacing:-1px}.rooms-heading>.button{padding:12px 15px;min-height:46px;font-size:13px}.rooms-utilities{gap:8px;margin-bottom:22px;padding-bottom:16px}.rooms-utilities>a,.rooms-utilities>button{padding:7px 8px;font-size:13px}.rooms-utilities>.room-screen-entry-desktop{display:none}.rooms-page .room-browser-toolbar{flex-wrap:wrap;gap:15px;margin-bottom:20px}.rooms-page .room-search{flex-basis:100%;max-width:none;order:2}.rooms-page .room-filters{width:100%;justify-content:space-between}.rooms-page .room-browser-grid{grid-template-columns:minmax(0,1fr);gap:16px}.rooms-page .room-card-link{padding:20px}.rooms-page .room-card-menu{bottom:15px;right:20px}.rooms-page .room-card-top{grid-template-columns:minmax(0,1fr) 98px;min-height:105px;gap:15px;padding-top:0}.rooms-page .room-card-title>strong{font-size:23px}.rooms-page .room-card-art{width:98px;flex-basis:98px}.rooms-page .room-card-art>.playing-card,.rooms-page .room-card-art>.sb-card{width:62px!important;height:93px!important;flex-basis:62px}.rooms-page .room-card-menu{bottom:15px;right:20px}.rooms-page .room-card-title>small{font-size:12px;margin-bottom:8px}}
@media(max-width:360px){.rooms-page .rooms-heading{gap:9px}.rooms-heading h1{font-size:27px}.rooms-heading>.button{padding-inline:11px;gap:6px}.rooms-page .room-card-link{padding:17px}.rooms-page .room-card-menu{bottom:12px;right:17px}.rooms-page .room-card-title>strong{font-size:21px}.rooms-page .room-card-art{width:78px;flex-basis:78px}.rooms-page .room-card-art>.playing-card,.rooms-page .room-card-art>.sb-card{width:53px!important;height:80px!important;flex-basis:53px}.rooms-page .room-card-art>.playing-card+.playing-card,.rooms-page .room-card-art>.sb-card+.sb-card{margin-left:-32px}.rooms-page .room-card-top{grid-template-columns:minmax(0,1fr) 78px;gap:10px}.rooms-page .room-card-title>small .game-emblem{width:20px;height:20px}.rooms-page .room-filters button{padding-inline:10px}.rooms-page .room-card-people{gap:8px}.rooms-page .room-participant-names{font-size:12px}}
@media(prefers-reduced-motion:reduce){.rooms-page .room-card{transition:none}}

@media(max-width:1000px) and (pointer:coarse){.rooms-utilities>.room-screen-entry-desktop{display:none}}

.rooms-page .room-search input::-webkit-search-cancel-button{display:none}
.rooms-page .room-card-title>small>span{min-width:0}

@media(max-width:760px), (max-width:1000px) and (pointer:coarse){.rooms-page .room-search input{font-size:16px}}

/* The table is inviting even before a room exists. */
.room-empty-table{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:330px;padding:28px 44px;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--surface);background-image:radial-gradient(ellipse at 80% 30%,#b8a0f91b,transparent 65%)}
.room-empty-copy{grid-column:1;grid-row:1;position:relative;z-index:1;max-width:350px;text-align:left;padding:20px 0}
.room-empty-copy h3{font-size:clamp(27px,3vw,38px);line-height:1.2;letter-spacing:-1.2px;margin:0 0 28px}
.room-empty-copy>.button{min-height:48px;padding:13px 20px;border-radius:14px;gap:20px}
.room-empty-scene{position:relative;grid-column:2;grid-row:1;height:260px;isolation:isolate;pointer-events:none}
.room-empty-orbit{position:absolute;left:1%;top:18%;width:98%;height:70%;border:1px solid #a9b3ca1c;border-radius:50%;transform:rotate(-8deg);background:radial-gradient(ellipse,#a9b3ca0c,transparent 70%)}
.room-empty-orbit:after{content:"";position:absolute;left:7%;top:10%;width:86%;height:80%;border:1px solid #a9b3ca14;border-radius:50%}
.room-empty-card{position:absolute;left:50%;top:40px;width:104px;height:156px;margin-left:-52px;transform-origin:50% 85%;--card-x:-70px;--card-y:18px;--card-angle:-20deg;transform:translate(var(--card-x),var(--card-y)) rotate(var(--card-angle));animation:room-card-arrive 680ms cubic-bezier(.2,.75,.2,1) both}
.room-empty-card:nth-of-type(2){--card-x:0px;--card-y:-8px;--card-angle:-3deg;animation-delay:80ms}
.room-empty-card:nth-of-type(3){--card-x:77px;--card-y:15px;--card-angle:18deg;animation-delay:160ms}
.room-empty-card>.playing-card{width:100%;height:100%;container-type:inline-size;border-radius:9px;box-shadow:0 3px 0 #b9c0c8,0 15px 25px #0003}
.room-empty-card .card-corner{top:6%;left:7%;font-size:14cqi}.room-empty-card .card-corner b{font-size:22cqi}.room-empty-card .corner-bottom{top:auto;left:auto;right:7%;bottom:6%}
@keyframes room-card-arrive{from{opacity:0;transform:translate(calc(var(--card-x)*.2),45px) rotate(0)}to{opacity:1;transform:translate(var(--card-x),var(--card-y)) rotate(var(--card-angle))}}
@media(max-width:760px){.room-empty-table{display:flex;flex-direction:column;padding:15px 22px 30px;min-height:0;border-radius:24px}.room-empty-scene{width:100%;max-width:350px;height:208px;flex:none}.room-empty-card{top:23px;width:89px;height:134px;margin-left:-44.5px;--card-x:-61px;--card-y:14px}.room-empty-card:nth-of-type(3){--card-x:65px;--card-y:12px}.room-empty-copy{padding:0;max-width:310px;text-align:center}.room-empty-copy h3{font-size:28px;letter-spacing:-.8px;margin:0 0 23px;line-height:1.25}.room-empty-copy>.button{min-width:176px}}
@media(max-width:360px){.room-empty-table{padding-inline:17px}.room-empty-scene{height:189px}.room-empty-card{width:78px;height:117px;margin-left:-39px;--card-x:-54px}.room-empty-card:nth-of-type(3){--card-x:56px}.room-empty-copy h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){.room-empty-card{animation:none}}