.platform-dialog { width:min(550px,calc(100% - 28px)); max-width:none; max-height:calc(var(--platform-vheight,100dvh) - 32px); position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); margin:0; padding:0; border:1px solid #81749578; border-radius:24px; color:#f4effc; background:linear-gradient(145deg,#302344,#17192e 72%); box-shadow:0 18px 70px #06041080; color-scheme:dark; overflow:hidden; }
.platform-dialog::backdrop { background:#06071999; backdrop-filter:blur(4px); }
.platform-dialog * { box-sizing:border-box; }
.platform-dialog button,.platform-dialog input,.platform-dialog select,.platform-dialog textarea { font:inherit; }
.platform-dialog button,.platform-dialog a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.platform-dialog button { cursor:pointer; }
.platform-dialog button:disabled { opacity:.48; cursor:not-allowed; }
.platform-dialog :is(button,input,select,textarea,a):focus-visible { outline:2px solid #79e4e5; outline-offset:3px; }
.platform-sheet { display:flex; flex-direction:column; max-height:calc(var(--platform-vheight,100dvh) - 34px); }
.platform-header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px 15px; flex:none; border-bottom:1px solid #e0cdef18; background:#292039f2; }
.platform-header small { color:#b4a2c3; font-size:10px; }
.platform-header h2 { margin:3px 0 0; font-size:25px; font-weight:750; line-height:1.25; }
.platform-close { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; padding:0; border:1px solid #74d4dc; border-radius:12px; background:#252339; color:#eee5f6; font-size:30px!important; line-height:1; }
.platform-body { flex:1 1 auto; min-height:0; padding:18px 20px 22px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#796183 #19192f; }
.platform-footer { flex:none; background:#191a2ee8; }
.platform-error,.platform-progress { margin:0; padding:11px 20px; font-size:12px; line-height:1.45; }
.platform-error { color:#ffc8d1; border-top:1px solid #db839428; }
.platform-progress { color:#90e7e8; }
.platform-preview-note { margin:0; padding:9px 20px; color:#f0d58b; background:#5a422340; font-size:10px; line-height:1.45; border-bottom:1px solid #eccb6430; }
.platform-primary,.platform-secondary { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:39px; padding:9px 13px; border-radius:11px; line-height:1.2; font-size:13px!important; font-weight:650; text-decoration:none; }
.platform-primary { border:1px solid #b0f7f4; background:linear-gradient(115deg,#88f0e8,#59c5e5); color:#103543; box-shadow:0 3px 0 #267387; }
.platform-secondary { border:1px solid #ba9dd840; background:#ada0cb0d; color:#dfd4ee; }
.platform-note { margin:15px 0 0; color:#a49bb8; font-size:11px; line-height:1.6; }
.platform-empty { padding:26px 12px; min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.platform-empty-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; color:#a8cbda; background:#a7b7d411; }
.platform-empty-icon svg { width:26px; height:26px; }
.platform-empty h3 { margin:13px 0 7px; font-size:19px; }
.platform-empty p { max-width:330px; margin:0 0 20px; color:#aaa0bb; font-size:12px; line-height:1.6; }
.platform-empty-actions { display:flex; gap:8px; justify-content:center; }
.platform-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin:0 0 15px; padding:4px; border:1px solid #b1a0ce2d; border-radius:13px; background:#11182b80; }
.platform-tabs button { display:flex; justify-content:center; align-items:center; gap:7px; min-height:36px; padding:7px; border:0; border-radius:9px; background:none; color:#b7adc8; font-size:13px; }
.platform-tabs button[aria-pressed=true] { color:#c4f1f1; background:#30546699; box-shadow:inset 0 0 0 1px #89e0e749; }
.platform-badge,.platform-nav-badge { display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:10px; color:white; background:#dc6793; font-size:10px; font-weight:700; }
.platform-avatar { display:block; width:49px; height:49px; padding:3px; flex:0 0 49px; border-radius:50%; background:linear-gradient(145deg,#bda4d7,#4c5a7d); overflow:hidden; }
.platform-avatar img,.platform-avatar-art { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.platform-avatar-art { background:#282f45 url('./avatar-atlas.png') var(--platform-avatar-position,0% 0%)/300% 200%; }
.lobby-player-avatar>.platform-avatar-art,.lobby-player-avatar>img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.platform-add-friend { display:flex; gap:9px; margin-bottom:18px; }
.platform-add-friend input { min-width:0; flex:1; }
.platform-dialog input,.platform-dialog select,.platform-dialog textarea { width:100%; min-height:43px; padding:11px 12px; border:1px solid #ac9ac24a; border-radius:10px; background:#10172bbb; color:#ece4f5; font-size:16px; line-height:1.3; }
.platform-dialog input::placeholder,.platform-dialog textarea::placeholder { color:#8e829f; }
.platform-dialog textarea { resize:vertical; min-height:112px; }
.platform-person { position:relative; display:flex; align-items:center; gap:10px; min-height:79px; padding:12px 0; border-bottom:1px solid #c9b5e21b; }
.platform-person-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:5px; }
.platform-person-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.platform-person-copy small { color:#a99eba; font-size:10px; }
.platform-presence { display:inline-block; width:5px; height:5px; border-radius:50%; background:#7a7287; margin:0 4px 1px 0; }
.platform-presence.is-online { background:#7fe5da; box-shadow:0 0 6px #7fe5da55; }
.platform-person-actions { display:flex; gap:5px; }
.platform-person-actions button { min-height:32px; padding:7px 10px; font-size:11px!important; }
.platform-person-actions [data-platform-action=accept] { border-color:#79d6d766; background:#2c5e6a80; color:#b8f1ec; }
.platform-person-menu summary { padding:12px 6px; list-style:none; cursor:pointer; color:#bfb1cd; }
.platform-person-menu>div { position:absolute; z-index:3; top:56px; right:0; display:flex; flex-direction:column; min-width:115px; padding:6px; border:1px solid #b0a0c45c; border-radius:12px; background:#2b2640; box-shadow:0 7px 20px #05091880; }
.platform-person-menu>div button { border:0; justify-content:flex-start; font-size:11px!important; }
.platform-account-card { display:flex; flex-direction:column; align-items:center; padding:7px 0 18px; }
.platform-account-card .platform-avatar { width:84px; height:84px; flex-basis:84px; padding:4px; }
.platform-account-card h3 { margin:12px 0 6px; font-size:25px; }
.platform-public-id { display:flex; align-items:center; gap:7px; font-size:11px; color:#aca0bc; }
.platform-public-id strong { color:#e5dbea; font-weight:600; }
.platform-public-id button { border:0; background:none; padding:3px; min-height:25px; color:#85e1df; font-size:10px!important; }
.platform-account-binding { margin-top:7px; padding:4px 8px; color:#a5dcdc; background:#a4e1e510; border-radius:7px; font-size:9px; }
.platform-account-coins { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; border:1px solid #c3a9d432; border-radius:15px; background:#12202d60; }
.platform-account-coins>span { display:grid; grid-template-columns:23px minmax(0,1fr); gap:4px 5px; align-items:center; }
.platform-account-coins strong { color:#f9dc80; font-size:20px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.platform-account-coins small { grid-column:2; color:#aea2b8; font-size:10px; }
.platform-account-actions { display:grid; gap:8px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px; }
.platform-account-actions button { padding:10px 6px; font-size:11px!important; }
.platform-account-session-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:18px; }
.platform-avatar-options,.platform-skin-options { margin:20px 0; padding:0; border:0; }
.platform-avatar-options legend,.platform-skin-options legend { margin-bottom:10px; color:#d6c9e1; font-size:12px; font-weight:600; }
.platform-avatar-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.platform-avatar-options label,.platform-skin-options label { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:13px 8px; border:1px solid #baaad536; border-radius:12px; background:#171b3060; cursor:pointer; }
.platform-avatar-options label>span:last-child,.platform-skin-options label>span:last-child { color:#cdbfda; font-size:11px; }
.platform-avatar-options input,.platform-skin-options input { position:absolute; inset:0; appearance:none; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; border-radius:12px; cursor:pointer; }
.platform-avatar-options input:checked,.platform-skin-options input:checked { border:2px solid #86e5e4; background:#86e5e408; }
.platform-skin-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.platform-skin-die { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); width:44px; height:44px; padding:8px; border-radius:10px; background:linear-gradient(145deg,#fffefa,#e1e3db); box-shadow:inset 1px 1px 1px #ffffff,0 3px 0 #aaa9a5; }
.platform-skin-die i { display:block; width:6px; height:6px; align-self:center; justify-self:center; border-radius:50%; background:#252727; }.platform-skin-die i:nth-child(1) { grid-area:1/1; }.platform-skin-die i:nth-child(2) { grid-area:2/2; }.platform-skin-die i:nth-child(3) { grid-area:3/3; }.platform-skin-red { background:linear-gradient(145deg,#f87676,#d6293b); box-shadow:inset 1px 1px 1px #ffaca2,0 3px 0 #8e1e30; }.platform-skin-red i { background:#fff8ee; }
.platform-profile-save { width:100%; }
.platform-body>[data-platform-action=logout] { width:100%; margin-top:17px; color:#c1b2d0; }
.platform-mail-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:3px 0 10px; }
.platform-mail-tools small { color:#a79bb8; font-size:10px; }
.platform-mail-item { display:flex; align-items:center; gap:10px; min-height:76px; width:100%; padding:13px 10px; border:0; border-bottom:1px solid #c6b7e420; color:#eee3f7; background:none; text-align:left; }
.platform-mail-item>span:nth-child(2) { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.platform-mail-item strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.platform-mail-item small { font-size:10px; color:#aa9cb9; }
.platform-mail-unread { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#ed91b7; box-shadow:0 0 6px #ed91b744; }
.platform-mail-item.is-read { color:#b9adc7; }.platform-mail-item.is-read .platform-mail-unread { background:transparent; box-shadow:none; }
.platform-mail-detail h3 { font-size:21px; margin:20px 0 8px; line-height:1.45; overflow-wrap:anywhere; }
.platform-mail-meta { margin:0; color:#a193b0; font-size:11px; }
.platform-mail-body { margin-top:22px; color:#e4dcec; font-size:14px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.platform-compose-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }.platform-compose-heading h3 { margin:0; font-size:17px; }
.platform-field { display:flex; flex-direction:column; gap:8px; margin:0 0 16px; }.platform-field>span { color:#d6c9e1; font-size:12px; font-weight:600; }.platform-field>small { color:#a294b2; font-size:10px; line-height:1.5; }
.platform-compose>.platform-primary,.platform-section .platform-primary { width:100%; margin-top:12px; }
.platform-settings-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:24px; }
.platform-section h3 { font-size:16px; margin:0 0 11px; }
.platform-switch { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid #c7b8d91d; }
.platform-switch>span { display:flex; flex-direction:column; gap:5px; }.platform-switch strong { font-size:13px; }.platform-switch small { font-size:10px; color:#a79ab7; }
.platform-switch input[type=checkbox] { appearance:none; position:relative; width:42px; height:25px; min-height:0; flex:0 0 42px; padding:0; border-radius:20px; border:1px solid #85748d70; background:#74647f66; cursor:pointer; }
.platform-switch input::before { content:''; position:absolute; width:17px; height:17px; top:3px; left:3px; border-radius:50%; background:#c5b7d2; transition:transform 120ms; }.platform-switch input:checked { background:#43838b; border-color:#80d6d8; }.platform-switch input:checked::before { background:#b7f3eb; transform:translateX(17px); }.platform-switch input:disabled { opacity:.5; cursor:default; }
.platform-section .platform-field { margin-top:20px; }
.platform-privacy { margin-top:22px; color:#b3a7c1; font-size:12px; }.platform-privacy summary { cursor:pointer; padding:10px 0; }.platform-privacy p { font-size:11px; line-height:1.65; margin:0; }
.platform-match-art { display:grid; place-items:center; width:75px; height:75px; margin:4px auto 18px; border:1px solid #83d9db60; border-radius:23px; background:#26425e80; color:#92e7e5; }.platform-match-art svg { width:38px; height:38px; }
.platform-match-intro { text-align:center; }.platform-match-intro h3 { margin:0 0 10px; font-size:25px; }.platform-match-intro p { color:#b5a8c6; font-size:12px; line-height:1.6; margin:0; }
.platform-match-rules { padding:15px 15px 15px 28px; margin:18px 0; color:#b6a9c6; border:1px solid #cab2e226; border-radius:14px; font-size:12px; line-height:2; background:#11182b45; }
.platform-service-note,.platform-match-status { margin:18px 0; padding:13px 16px; text-align:center; border:1px solid #e5c57235; border-radius:13px; background:#ad85360b; }.platform-service-note strong { color:#ead28d; font-size:13px; }.platform-service-note p,.platform-match-status p { color:#aea1bd; font-size:11px; line-height:1.55; margin:6px 0 0; }.platform-body>[data-platform-action=join-match],.platform-body>[data-platform-action=cancel-match] { width:100%; }
.platform-spinner { display:block; width:26px; height:26px; margin:0 auto 10px; border:2px solid #7ce5e538; border-top-color:#7ce5e5; border-radius:50%; animation:platform-spin 1s linear infinite; }@keyframes platform-spin { to { transform:rotate(360deg); } }
.platform-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.lobby-bottom-nav.has-platform-nav { grid-template-columns:repeat(6,minmax(0,1fr)); padding-left:8px; padding-right:8px; }.lobby-bottom-nav.has-platform-nav button { flex-direction:column; gap:3px; font-size:9px; padding-left:3px; padding-right:3px; }.platform-nav-badge { position:absolute; top:2px; right:calc(50% - 24px); min-width:14px; height:14px; font-size:8px; }
.lobby-friend-links button { display:flex; align-items:center; gap:10px; min-width:0; min-height:74px; padding:13px 12px; border:1px solid #b9a1d62a; border-radius:16px; background:#242138; color:#eee7f7; text-align:left; }.lobby-friend-links button:last-child { border-color:#82d3dd2c; background:#1d3443; }.lobby-friend-links button>span:last-child { display:flex; flex-direction:column; min-width:0; gap:5px; }.lobby-friend-links button strong { font-size:12px; line-height:1.2; }.lobby-friend-links button small { color:#a9a1bc; font-size:9px; line-height:1.4; }.platform-tile-icon { display:grid; place-items:center; color:#b49bdb; width:27px; flex:0 0 27px; }.platform-tile-icon svg { width:25px; height:25px; }.lobby-friend-links button:last-child .platform-tile-icon { color:#8cd7dd; }
.platform-low-motion *, .platform-low-motion *::before { transition:none!important; animation:none!important; }
@media (max-width:600px) { .platform-dialog { inset:auto 0 var(--platform-bottom,0px); transform:none; width:100%; max-height:calc(var(--platform-vheight,100dvh) - 12px); border-radius:24px 24px 0 0; border-bottom:0; }.platform-sheet { max-height:calc(var(--platform-vheight,100dvh) - 12px); }.platform-body { max-height:min(62dvh,590px); padding-bottom:calc(22px + env(safe-area-inset-bottom)); }.platform-header { padding:16px 18px 13px; }.platform-header h2 { font-size:23px; }.platform-header small { font-size:9px; }.platform-person-list .platform-empty { min-height:180px; } }
@media (max-width:360px) { .platform-body { padding-left:15px; padding-right:15px; }.platform-person { gap:8px; }.platform-person .platform-avatar { width:41px; height:41px; flex-basis:41px; }.platform-person-actions button { padding:7px 8px; }.platform-account-coins strong { font-size:18px; }.lobby-friend-links button { gap:7px; padding:11px 9px; }.platform-tile-icon { width:23px; flex-basis:23px; }.lobby-friend-links button strong { font-size:11px; }.lobby-friend-links button small { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { .platform-dialog *, .platform-dialog *::before { animation:none!important; transition:none!important; } }

/* Bright club sheets share their fixed header/actions with the game dialogs. */
body #platform-dialog {
  top:calc(var(--dialog-vtop,0px) + var(--dialog-vheight,100dvh)/2);left:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);width:min(550px,calc(100% - 24px));margin:0;
  max-height:calc(var(--dialog-vheight,100dvh) - 22px);border-radius:25px;border-bottom:2px solid #f4caee;
}
body #platform-dialog .platform-sheet { max-height:calc(var(--dialog-vheight,100dvh) - 26px); }
body #platform-dialog .platform-body { max-height:none;padding:17px 20px 20px;color:#6d4186; }
body #platform-dialog .platform-footer { padding:0; }
body #platform-dialog .platform-footer-actions:not(:empty) { padding:13px 20px max(15px,env(safe-area-inset-bottom)); }
body #platform-dialog .platform-footer-actions>button { min-height:48px;width:100%;font-size:16px!important; }
body #platform-dialog :is(input,select,textarea) { background:#fffaff;border:1px solid #d8b2e7;color:#643480;font-size:16px; }
body #platform-dialog :is(input,textarea)::placeholder { color:#ae90b7; }
body #platform-dialog .platform-field>span,
body #platform-dialog :is(h3,.platform-switch strong,.platform-person-copy strong) { color:#70398b; }
body #platform-dialog :is(.platform-note,.platform-field>small,.platform-switch small,.platform-empty p,.platform-person-copy small,.platform-public-id,.platform-mail-meta,.platform-mail-item small,.platform-mail-tools small) { color:#95749f; }
body #platform-dialog .platform-empty-icon { color:#aa74c4;background:#ead4f8; }
body #platform-dialog .platform-tabs { background:#e9d4f7;border-color:#dec0ed; }
body #platform-dialog .platform-tabs button { color:#9463a9; }
body #platform-dialog .platform-tabs button[aria-pressed=true] { color:#80329c;background:#fff5ff;box-shadow:0 2px 4px #975caf14,inset 0 0 0 1px #e6c2f2; }
body #platform-dialog :is(.platform-person,.platform-mail-item,.platform-section,.platform-privacy) { border-color:#e1c9ea; }
body #platform-dialog :is(.platform-mail-item,.platform-person-menu>div,.platform-match-status,.platform-service-note) { background:#ffffff6b;color:#815690;border-color:#dfc5ea; }
body #platform-dialog .platform-mail-body { background:#ffffff73;color:#765287;border-color:#dfc5ea; }
body #platform-dialog .platform-person-menu summary { color:#ab75b9; }
body #platform-dialog .platform-person-actions [data-platform-action=accept] { color:#3d8878;background:#d9f6e5;border-color:#a8dfc1; }
body #platform-dialog .platform-person-menu>div { box-shadow:0 9px 18px #9559b328; }
body #platform-dialog .platform-account-binding { color:#945aad;background:#e9cff8;border-color:#d9adeb; }
body #platform-dialog .platform-account-coins { background:#fff5dc;border-color:#efd0a0;color:#9f6a28; }
body #platform-dialog .platform-account-coins strong { color:#a76b22; }
body #platform-dialog .platform-account-coins small { color:#a3804a; }
body #platform-dialog :is(.platform-avatar-options label,.platform-skin-options label) { color:#825295;background:#fff8ff;border-color:#dfbfed; }
body #platform-dialog :is(.platform-avatar-options label,.platform-skin-options label):has(input:checked) { color:#853395;background:#f5d7fa;border-color:#ce86df; }
body #platform-dialog .platform-switch input { accent-color:#bd71d9; }
body #platform-dialog .platform-preview-note { color:#a57833;background:#fff2d4;border-color:#f5dab0; }
body #platform-dialog .platform-error { color:#b03c69;background:#ffedf4;border-color:#f1bed3; }
body #platform-dialog .platform-progress { color:#8b58a6; }
body #platform-dialog .platform-privacy>summary { color:#96729f; }
body #platform-dialog .platform-match-rules { color:#896497; }
@media(max-width:360px) { body #platform-dialog .platform-body { padding-inline:15px; } }