/* /Chat/BannerChoices.razor.rz.scp.css */
/* The banner of the player's profile (BannerChoices.razor), as Syphon Vault's profile editor draws it (docs\DESIGN.md,
   "The profile editor"): the profile as others see it (the card's banner, 72 high on its 340, the picture on a disc over
   its edge, the name and whose banner it is), the choices (70 x 32, radius 6, the Accent.Bright ring for the one in use;
   "None" on a dark plate), Upload a banner... at the heading's right (outline, never greyed for what the server said
   once), the frame of a picture of the player's own (three times as wide as high), a busy line, and the line that says
   how it went (Success.Text, or Danger.Text with the reason). Only the app's tokens. */
.banner-editor[b-v2ob79adby] { gap: 10px; }
.banner-head[b-v2ob79adby] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.banner-head .group-label[b-v2ob79adby] { padding: 0; }

/* weblook1 (WL-SETTINGS): the preview is the profile card's frame (the Syphon panel, the 1 px edge, 16.5 corners, a still
   shadow), the banner running into the panel's top colour, the chosen banner in Syphon's lilac with a soft glow */
.banner-preview[b-v2ob79adby] {
    width: 340px; max-width: 100%; border-radius: var(--ui-radius-card, 16.5px); overflow: hidden; border: 1px solid var(--ui-edge, #FFFFFF1A);
    background: var(--ui-panel, linear-gradient(180deg, #121220 0%, #0C0C18 100%)); box-shadow: 0 12px 32px #00000073;
}
.banner-preview-art[b-v2ob79adby] {
    position: relative; height: 72px; overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #6C49F9) 55%, #0C1018), #0C1018);
}
.banner-preview-art img[b-v2ob79adby] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% 30%; }
.banner-preview-art img.own[b-v2ob79adby] { object-position: 50% 50%; }
.banner-preview-fade[b-v2ob79adby] {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--ui-panel-top, #121220) 35%, transparent) 72%, color-mix(in srgb, var(--ui-panel-top, #121220) 78%, transparent) 100%);
}
.banner-preview-who[b-v2ob79adby] { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px 12px; margin-top: -28px; position: relative; }
.banner-preview-disc[b-v2ob79adby] {
    width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ui-panel-top, #121220) 95%, transparent);
}
.banner-preview-text[b-v2ob79adby] { display: flex; flex-direction: column; min-width: 0; padding-bottom: 2px; }
.banner-preview-text b[b-v2ob79adby] { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-preview-text .muted[b-v2ob79adby] { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); }

.banner-choices[b-v2ob79adby] { display: flex; flex-wrap: wrap; gap: 6px; padding: 3px; }
.banner-choice[b-v2ob79adby] { width: 76px; height: 38px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; }
.banner-choice:disabled:not(.mine)[b-v2ob79adby] { opacity: .6; }
.banner-choice-art[b-v2ob79adby] {
    position: relative; display: block; width: 70px; height: 32px; border-radius: 6px; overflow: hidden;
    background: var(--brush-surface, #0F161F); box-shadow: 0 0 0 2.5px transparent; transition: box-shadow var(--fast, 120ms);
}
.banner-choice-art img[b-v2ob79adby] { width: 100%; height: 100%; object-fit: cover; object-position: 85% 30%; display: block; }
.banner-choice-art.none[b-v2ob79adby] { background: linear-gradient(135deg, color-mix(in srgb, var(--g1, #6C49F9) 55%, #0C1018), #0C1018); }
.banner-choice-none[b-v2ob79adby] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: #080B1299; color: var(--brush-text, #F4F3F9); font-size: 12px;
}
.banner-choice:hover:not(:disabled) .banner-choice-art[b-v2ob79adby] { box-shadow: 0 0 0 2.5px #A778FA66; }
.banner-choice.selected .banner-choice-art[b-v2ob79adby] { box-shadow: 0 0 0 2.5px var(--brush-syphon-lilac, #A778FA), 0 4px 14px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 40%, transparent); }
.banner-choice:focus-visible[b-v2ob79adby] { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 2px; }

.banner-place[b-v2ob79adby] { display: flex; flex-direction: column; gap: 8px; }
.banner-place-title[b-v2ob79adby] { font-size: 14.4px; font-weight: 600; }
.banner-frame[b-v2ob79adby] {
    position: relative; width: 432px; max-width: 100%; aspect-ratio: 3 / 1; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--brush-accent-bright, #8F85F9); background: var(--brush-surface, #0F161F);
}
.banner-frame img[b-v2ob79adby] { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-slider[b-v2ob79adby] { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--brush-text-secondary, #B4C6DB); max-width: 432px; }
.banner-slider input[b-v2ob79adby] { flex: 1 1 auto; accent-color: var(--brush-accent, #6C49F9); }
.banner-place-buttons[b-v2ob79adby] { display: flex; gap: 8px; justify-content: flex-end; max-width: 432px; }

.banner-busy[b-v2ob79adby] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--brush-text-muted, #8999AA); }
.banner-line[b-v2ob79adby] { font-size: 13px; line-height: 18px; color: var(--brush-success-text, #3DE6A3); }
.banner-line.error[b-v2ob79adby] { color: var(--brush-danger-text, #FF7A8A); }

@media (max-width: 480px) {
    .banner-head[b-v2ob79adby] { flex-wrap: wrap; }
}
/* /Chat/CardInvite.razor.rz.scp.css */
/* The profile card's Invite (CardInvite.razor): the Vault's Chat.Link with the mail mark, at the right of the line under
   the name (the tag and the community stand at its left). */
.card-invite[b-rde4o2o3b0] { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 2px; font-size: 13px; border-radius: 4px; }
.card-invite:focus-visible[b-rde4o2o3b0] { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 1px; }
/* /Chat/CodeStepDialog.razor.rz.scp.css */
/* The email code step (webe2e1) in the sign-in's look (weblook1, WL-SETTINGS; docs\chat\web\look\settings.md), on the dialog
   family's frame: the device it removes as a tile (a card's note: the faint glass and edge, corners of 12) with its kind's
   disc (the hero card family's at 36) and its code in cells; where the code went as the sign-in's green line; the field as
   the sign-in's, made for 6 digits (56 high, the code's type at 26 with wide letters, in the middle, the lilac edge and a
   soft violet ring with the keyboard; never under 16, so a phone never zooms); the line under it as the sign-in's error. */
.code-step-device[b-ae74eohfzo] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: 12px; position: relative;
    background: var(--ui-note, #FFFFFF0A); border: 1px solid var(--ui-edge-faint, #FFFFFF12); color: var(--brush-text, #F4F3F9);
    font-size: 15.2px; font-weight: 600;
}
.code-step-disc[b-ae74eohfzo] {
    width: 36px; height: 36px; margin: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--disc) 8%, transparent), 0 4px 12px color-mix(in srgb, var(--disc) 20%, transparent);
}
.code-step-disc.quiet[b-ae74eohfzo] { --disc: #8999AA; }
.code-step-disc[b-ae74eohfzo]  .icon { width: 17px; height: 17px; }
.code-step-kind[b-ae74eohfzo] { flex: 1 1 auto; min-width: 0; }
.code-step-device[b-ae74eohfzo]  .device-code-box { flex: 1 1 100%; }
.code-step-box[b-ae74eohfzo] { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; position: relative; }
.code-step-box:not(:has(*))[b-ae74eohfzo] { display: none; }
.code-step-sent[b-ae74eohfzo] {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--ui-radius-menu, 10px); font-size: 14px; line-height: 20px;
    background: #34D39922; border: 1px solid #34D39947; color: #A7F3D0; overflow-wrap: anywhere;
}
.code-step-sent[b-ae74eohfzo]  .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brush-success, #3DE6A3); }
.code-label[b-ae74eohfzo] { margin-top: 6px; }
.code-step .field.code-field[b-ae74eohfzo] {
    width: 100%; max-width: 300px; height: 56px; padding: 0 12px; border-radius: 10px; text-align: center; text-indent: 10px;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 26px; font-weight: 400; letter-spacing: 10px; font-variant-numeric: tabular-nums;
    background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge-field, #FFFFFF26); color: var(--brush-syphon-text, #F8F8FF);
    transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.code-step .field.code-field:hover[b-ae74eohfzo] { border-color: #FFFFFF40; }
.code-step .field.code-field:focus[b-ae74eohfzo] { border-color: var(--brush-syphon-lilac, #A778FA); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent); }
.code-step .field.code-field.bad[b-ae74eohfzo] { border-color: var(--brush-danger, #F25A6C); }
.code-step .field.code-field.bad:focus[b-ae74eohfzo] { box-shadow: 0 0 0 4px #F25A6C2E; }
.code-again[b-ae74eohfzo] { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; min-height: 32px; }
/* the line itself a touch smaller than the sign-in's error (13.5 on 19) */
.code-line[b-ae74eohfzo] { margin: 2px 0 0; font-size: 13.5px; line-height: 19px; }
.code-line[b-ae74eohfzo]  .icon { flex: 0 0 auto; margin-top: 2px; }
/* /Chat/DeviceCode.razor.rz.scp.css */
/* A device's code (weblook1, WL-SETTINGS; docs\chat\web\look\settings.md): its 4 groups of 5, each in a cell of Syphon's deep
   field (the 1 px edge, corners of 8, a lit top edge), in the code's own type (Cascadia Mono or Consolas: every digit as wide
   as the next, as the Vault's security code). The box measures its place (a container), so the code fits wherever it stands:
   large (the approval, the waiting card) as four equal cells across at 26, or two by two at 30 where its place is under 440
   (a phone, a dialog, a narrow card); small (a device's row, the code step) as four cells at 15.5 side by side, two by two
   where its place is under 300. */
.device-code-box[b-j5fcrojdh5] { container-type: inline-size; width: 100%; min-width: 0; }
.device-code[b-j5fcrojdh5] {
    display: grid; gap: 8px; font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums;
    color: var(--brush-syphon-text, #F8F8FF);
}
.device-code-group[b-j5fcrojdh5] {
    display: flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: var(--ui-radius-field, 8px);
    background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge, #FFFFFF1A); box-shadow: inset 0 1px 0 #FFFFFF0D;
}
.device-code.large[b-j5fcrojdh5] { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; font-size: 26px; line-height: 34px; letter-spacing: 1px; }
.device-code.large .device-code-group[b-j5fcrojdh5] { padding: 12px 6px; }
.device-code.small[b-j5fcrojdh5] { grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px; width: fit-content; max-width: 100%; font-size: 15.5px; line-height: 20px; letter-spacing: .5px; }
.device-code.small .device-code-group[b-j5fcrojdh5] { padding: 5px 9px; }
@container (max-width: 440px) {
    .device-code.large[b-j5fcrojdh5] { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 30px; line-height: 38px; }
}
@container (max-width: 300px) {
    .device-code.small[b-j5fcrojdh5] { grid-template-columns: repeat(2, auto); }
}
/* /Chat/DevicesCard.razor.rz.scp.css */
/* Your devices (webe2e1), in the settings' look (weblook1, WL-SETTINGS; docs\chat\web\look\settings.md): the card itself is a
   settings card (css\app.css, "Chat settings"); here its own parts. Each device is a tile (a card's note: the faint glass,
   the faint edge, corners of 12, 12 14 inside, 10 apart) with its kind's disc (the hero card family's at 42: Syphon's violet
   for this device, amber while it waits, a quiet grey for the others), its kind (15.2 semibold) with its chips, when it was
   added, a waiting device's code in its cells, and the actions at the right (under the words in a narrow card, every button
   44 high on a phone). This device lies in a violet wash, a waiting one in an amber one. This browser's own question or
   waiting card (DeviceQuestion, DeviceWaiting) stands in the card's flow, never as a card of its own; the notes are the hero
   card family's (.hero-callout). */
.devices-note[b-4yfwf8ykd1] { margin: 0 0 4px; }
.devices-list[b-4yfwf8ykd1] { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.device-row[b-4yfwf8ykd1] {
    position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 14px; border-radius: 12px;
    background: var(--ui-note, #FFFFFF0A);
}
.device-row[b-4yfwf8ykd1], .device-row + .device-row[b-4yfwf8ykd1] { border: 1px solid var(--ui-edge-faint, #FFFFFF12); }
.device-row.this[b-4yfwf8ykd1] {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 16%, transparent), color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 4%, transparent));
}
.device-row.this[b-4yfwf8ykd1], .device-row + .device-row.this[b-4yfwf8ykd1] { border-color: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 40%, transparent); }
.device-row.waiting[b-4yfwf8ykd1] { background: linear-gradient(90deg, #F5B5441C, #F5B54406); }
.device-row.waiting[b-4yfwf8ykd1], .device-row + .device-row.waiting[b-4yfwf8ykd1] { border-color: #F5B54452; }
/* the kind's disc: the hero card family's disc at 42 with a smaller ring and glow */
.device-row-disc[b-4yfwf8ykd1] {
    width: 42px; height: 42px; margin: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--disc) 8%, transparent), 0 4px 14px color-mix(in srgb, var(--disc) 22%, transparent);
}
.device-row-disc.quiet[b-4yfwf8ykd1] { --disc: #8999AA; }
.device-row-disc[b-4yfwf8ykd1]  .icon { width: 19px; height: 19px; }
.device-row-words[b-4yfwf8ykd1] { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0%; min-width: 0; }
.device-row-title[b-4yfwf8ykd1] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15.2px; font-weight: 600; color: var(--brush-text, #F4F3F9); }
.device-row-line[b-4yfwf8ykd1] { font-size: 13px; line-height: 18px; color: var(--ui-text-quiet, #8999AA); }
/* a phone (a narrow chat frame): every device's actions under its words, each button 44 high for a finger */
.chat-frame.narrow .device-row[b-4yfwf8ykd1] { flex-wrap: wrap; }
.chat-frame.narrow .device-row-actions[b-4yfwf8ykd1] { flex: 1 1 100%; justify-content: flex-start; padding-left: 54px; }
.chat-frame.narrow .device-row-actions > .btn[b-4yfwf8ykd1] { min-height: 44px; }
/* a waiting device of another: its code on a line of its own under the words (the cells at 15.5, four across), then its
   actions under it, all in line with the words */
.device-row:has(> .device-row-code)[b-4yfwf8ykd1] { flex-wrap: wrap; }
.device-row-code[b-4yfwf8ykd1] { flex: 1 1 100%; min-width: 0; padding-left: 56px; margin-top: -2px; }
.device-row:has(> .device-row-code) > .device-row-actions[b-4yfwf8ykd1] { flex: 1 1 100%; justify-content: flex-start; padding-left: 56px; }
/* the chips: pills of 22 (This device in Syphon's violet, Waiting in amber) */
.device-chip[b-4yfwf8ykd1] {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.device-chip.this[b-4yfwf8ykd1] {
    background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent); border: 1px solid color-mix(in srgb, var(--brush-syphon-lilac, #A778FA) 50%, transparent);
    color: #DCCBFF;
}
.device-chip.waiting[b-4yfwf8ykd1] { background: #F5B54424; border: 1px solid #F5B54466; color: var(--brush-warning-text, #FBDFA6); }
.device-row-actions[b-4yfwf8ykd1] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: 0 0 auto; }
@container (max-width: 560px) {
    .device-row[b-4yfwf8ykd1] { flex-wrap: wrap; }
    .device-row-actions[b-4yfwf8ykd1] { flex: 1 1 100%; justify-content: flex-start; padding-left: 56px; }
}
/* this browser's own question or waiting card inside the card: no frame, no light of its own, in the card's flow */
.devices-card[b-4yfwf8ykd1]  .device-card, .devices-card[b-4yfwf8ykd1]  .hero-card {
    width: auto; max-width: none; margin: 0; padding: 16px 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.devices-card[b-4yfwf8ykd1]  .device-card::before, .devices-card[b-4yfwf8ykd1]  .hero-card::before { content: none; }
.devices-card[b-4yfwf8ykd1]  .device-card + .devices-list, .devices-card[b-4yfwf8ykd1]  .hero-card + .devices-list { margin-top: 14px; }
/* /Chat/E2EInfoDialog.razor.rz.scp.css */
/* What "End-to-end encrypted" means (webe2e1) in the sign-in's look (weblook1, WL-SETTINGS; docs\chat\web\look\settings.md),
   on the dialog family's frame: its facts one under another, 12 apart, each with its mark (the lock, the server, this
   device, the security code) on a small disc of the hero card family. */
.e2e-facts[b-4babkjiodx] { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.e2e-fact[b-4babkjiodx] { display: flex; align-items: flex-start; gap: 12px; }
/* the mark's disc is the hero card family's (.hero-disc in the markup) at 30, with a ring of 3 and no glow */
.e2e-fact-mark[b-4babkjiodx] { width: 30px; height: 30px; margin: -2px 0 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--disc) 8%, transparent); }
.e2e-fact-mark[b-4babkjiodx]  .icon { width: 15px; height: 15px; }
.e2e-fact > .dialog-text[b-4babkjiodx] { flex: 1 1 auto; min-width: 0; }
/* /Chat/FloatMenu.razor.rz.scp.css */
/* A floating menu (FloatMenu.razor; WEB-FEATURES, 2026-10-09): the Vault's own menu (app.css, .menu), standing where it
   was asked for, over everything: the profile card (70, 71) and the members' drawer (30) too, under the dialogs (80). */
.float-backdrop[b-lr1ur34dhc] { z-index: 75; }
.float-menu[b-lr1ur34dhc] { position: fixed; z-index: 76; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* /Chat/FreeSpinCard.razor.rz.scp.css */
/* @freespin's card (Chat\FreeSpinCard.razor): a row at the foot of the room in the message list's own measures (the 68 of a
   message's words, a 36 disc where an avatar stands), on a soft purple ground with a purple bar at its left, so it reads as
   the wheel's answer and not as anyone's message; "Only you can see this" with its eye beside its name; the answers'
   lines in their colours (given green, the browser's and a closed server's lavender, a refusal amber); the button under
   them. */
.fs-card[b-v0hepq06e9] {
    position: relative; display: flex; gap: 14px; margin: 10px 16px 6px 8px; padding: 12px 16px 14px 12px; border-radius: 14px;
    background: linear-gradient(90deg, #6C49F926, #6C49F90D 70%, #6C49F908); border: 1px solid #8B5CF64D;
    box-shadow: inset 3px 0 0 #8B5CF6;
}
.fs-mark[b-v0hepq06e9] {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: radial-gradient(circle at 35% 30%, #A97CFF 0%, #6C3BDB 60%, #4A1FAF 100%); box-shadow: 0 0 0 2px #E7B05266, 0 0 14px #8B5CF680;
}
.fs-main[b-v0hepq06e9] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fs-head[b-v0hepq06e9] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 22px; padding-right: 30px; }
.fs-who[b-v0hepq06e9] { font-size: 15.2px; font-weight: 600; color: var(--brush-text, #F4F3F9); white-space: nowrap; }
/* (a narrow card puts "Only you can see this" under the name rather than cutting it) */
.fs-only[b-v0hepq06e9] { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--brush-text-lilac, #C9B8FF); white-space: nowrap; }
.fs-only[b-v0hepq06e9]  .icon { flex: 0 0 13px; }
.fs-close[b-v0hepq06e9] { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; }
.fs-typed[b-v0hepq06e9] {
    align-self: flex-start; max-width: 100%; padding: 2px 8px 3px; border-radius: 6px; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 13px;
    color: var(--brush-chat-code-text, #E6DFFF); background: var(--brush-chat-codespan, #FFFFFF12); overflow-wrap: anywhere;
}
.fs-line[b-v0hepq06e9] { margin: 0; display: flex; gap: 9px; align-items: flex-start; font-size: 15px; line-height: 21px; color: var(--brush-chat-body, #DDE3EC); }
.fs-line[b-v0hepq06e9]  .icon { flex: 0 0 16px; margin-top: 2px; }
.fs-line.good[b-v0hepq06e9] { color: #CFF7DF; font-weight: 600; }
.fs-line.good[b-v0hepq06e9]  .icon { color: #5BE39B; }
.fs-line.info[b-v0hepq06e9]  .icon { color: var(--brush-accent-label, #978AFB); }
.fs-line.warning[b-v0hepq06e9] { color: var(--brush-warning-text, #FBDFA6); }
/* a match with another account (match_found): calm and serious in the wheel's amber, as Syphon Vault's card (its
   ChatConversationView): the card's edge and ground warm, its bar amber, the line's shield and words in the wheel's amber
   (#F5C26B), never the red of a fault; the whole line at every width (the invite card's .wi-match: the same words' look) */
.fs-card.match[b-v0hepq06e9] { border-color: #A88446; background: linear-gradient(90deg, #33291E, #1E1A2C); box-shadow: inset 3px 0 0 #C99A3E; }
.fs-line.match[b-v0hepq06e9] { color: #F5C26B; font-weight: 600; overflow-wrap: anywhere; }
.fs-line.match[b-v0hepq06e9]  .icon { color: #F5C26B; }
.fs-line.wait[b-v0hepq06e9] { min-height: 21px; align-items: center; }
.fs-actions[b-v0hepq06e9] { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (pointer: coarse) {
    .fs-actions .btn[b-v0hepq06e9] { height: 44px; padding: 0 18px; }
    .fs-close[b-v0hepq06e9] { width: 44px; height: 44px; right: 2px; top: 2px; }
    .fs-head[b-v0hepq06e9] { padding-right: 36px; }
}
/* /Chat/FreeSpinSignInDialog.razor.rz.scp.css */
/* the game sign-in over the chat (Chat\FreeSpinSignInDialog.razor): the wheel's fields one under the other, the line about
   the password with its lock, a refusal in its warning colour */
.freespin-signin-form[b-8bsems60l9] { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; position: relative; }
.freespin-signin-form .field[b-8bsems60l9] { width: 100%; box-sizing: border-box; height: 42px; }
.freespin-signin-error[b-8bsems60l9] { margin: 0; font-size: 14px; line-height: 19px; color: var(--brush-warning-text, #FBDFA6); }
.freespin-signin-note[b-8bsems60l9] { margin: 2px 0 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 19px; color: var(--brush-text-muted, #8999AA); }
.freespin-signin-note[b-8bsems60l9]  .icon { flex: 0 0 16px; margin-top: 1px; color: #8FB0E8; }
/* FS-MOBILE (2026-10-14): the dialog stands in the part of the page a phone's on-screen keyboard leaves in sight (--vv-top
   and --vv-height, js\app.js; without a keyboard the whole page, as every dialog), so its fields and Sign in stay above the
   keyboard; when that part is short the dialog scrolls, its band with Sign in at its foot */
.freespin-signin[b-8bsems60l9] { top: calc(var(--vv-top, 0px) + var(--vv-height, 100dvh) / 2); max-height: calc(var(--vv-height, 100dvh) - 24px); }
/* the form's submit button for Enter and a phone's Go: drawn (Safari's Go signs in only through one it draws), one pixel,
   out of sight and out of the mouse's way */
.freespin-signin-go[b-8bsems60l9] { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
@media (pointer: coarse) {
    .freespin-signin-form .field[b-8bsems60l9] { height: 46px; font-size: 16px; }
    /* Cancel and Sign in at a finger's 44 */
    .dialog-band .btn[b-8bsems60l9] { height: 44px; min-width: 96px; }
}
/* /Chat/InstallHint.razor.rz.scp.css */
/* The home screen hint before the own-device question (webe2e1): the app's own icon (64, the rounded square of its
   manifest), the line in the device card's words, Not now. */
.install-hint-art[b-ydiciddxu4] { align-self: flex-start; width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 8px 24px #7C3AED33; }
.install-hint-text[b-ydiciddxu4] { font-size: 17px; line-height: 25px; color: var(--brush-text, #F4F3F9); }
/* /Chat/InviteFriendRow.razor.rz.scp.css */
/* One invite of "Your invites" (Chat\InviteFriendRow.razor; invprog1, and since invchar1 the friend's character,
   docs\chat\wheel\invchar\web.md "The design", whose numbers Syphon Vault's row matches). The row on the panels' dark glass,
   its light, its state and when; the friend's character as the wheel's own character list shows one (Chat\WheelPane.razor.css,
   .char-head: the same head, ground, edge and words); the level and the play time as two bars side by side: the volume
   slider's dark track, filled to the share in the wheel's purple, in the counted green with a tick once met. In a narrow page
   (the container "ip" of Chat\WheelInvitesPage.razor.css under 702: a phone, a narrow tablet) when goes under the state, the
   play time under the level and "Updated" under the job line. */
.ip-row[b-p4gb12sh9p] {
    padding: 14px 18px 16px; border-radius: 14px; background: #0C0F21EC; border: 1px solid #343256; box-shadow: 0 12px 40px #0000004D;
    --look: #8E92B4;
}
.ip-row.state-waiting[b-p4gb12sh9p] { --look: #C2AEFF; }
.ip-row.state-counted[b-p4gb12sh9p] { --look: #5BE39B; }
.ip-row-head[b-p4gb12sh9p] { display: flex; align-items: center; gap: 11px; }
.ip-dot[b-p4gb12sh9p] { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--look); }
.ip-state[b-p4gb12sh9p] { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; line-height: 21px; color: var(--brush-text, #F4F3F9); overflow-wrap: anywhere; }
.ip-when[b-p4gb12sh9p] { flex: 0 0 auto; margin-left: 12px; font-size: 13.5px; line-height: 18px; color: var(--brush-text-muted, #8999AA); white-space: nowrap; }

/* the friend's leading character (invchar1) on the wheel's own character tile (.char, without its ring: nothing is chosen
   here): the head, the name over its job and levels, how old the reading is at the right */
.if-char[b-p4gb12sh9p] {
    margin: 12px 0 0 21px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 11px; align-items: center;
    min-height: 54px; padding: 6px 13px 6px 8px; box-sizing: border-box; border-radius: 10px;
    background: var(--wheel-row, #1A1F38D2); border: 1.2px solid var(--wheel-tile-edge, #283149);
}
/* the head: the wheel's own (a round portrait on its ground, the client's default head of the character's gender), the drawn
   silhouette under its picture; a picture that cannot be loaded hides itself (js\wheel.js: inside the wheel's page) */
.if-head[b-p4gb12sh9p] {
    position: relative; grid-column: 1; grid-row: 1; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #3A2F6E 0%, #221A48 70%, #1A1438 100%); border: 2px solid #4A4380; color: #9C8FD6;
}
.if-head-shape[b-p4gb12sh9p] { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; opacity: .85; }
.if-head img[b-p4gb12sh9p] {
    position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 2px; object-fit: contain;
    background: radial-gradient(circle at 50% 30%, #3A2F6E 0%, #221A48 70%, #1A1438 100%);
}
@media (resolution: 1dppx), (resolution: 2dppx), (resolution: 4dppx) {
    .if-head img[b-p4gb12sh9p] { image-rendering: pixelated; }
}
.if-words[b-p4gb12sh9p] { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.if-name[b-p4gb12sh9p] { font-size: 15.5px; font-weight: 600; line-height: 20px; color: var(--brush-text, #F4F3F9); overflow-wrap: anywhere; }
.if-line[b-p4gb12sh9p] { font-size: 13px; line-height: 17px; color: var(--brush-text-muted, #8999AA); overflow-wrap: anywhere; }
.if-updated[b-p4gb12sh9p] { grid-column: 3; grid-row: 1; margin-left: 12px; font-size: 12.5px; line-height: 17px; color: var(--brush-text-muted, #8999AA); white-space: nowrap; }
/* no character yet: a sleeping grey Poring (the milestone bar's empty slot) in a dashed ring, the line in the quieter text */
.if-none-poring[b-p4gb12sh9p] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 2px; }
.if-none-poring[b-p4gb12sh9p]  svg { width: 26px; height: auto; filter: grayscale(1) brightness(1.08) contrast(.85); opacity: .75; }
.if-char.none .if-head[b-p4gb12sh9p] { border-style: dashed; opacity: .8; }
.if-char.none .if-name[b-p4gb12sh9p] { font-size: 15px; font-weight: 400; color: var(--brush-text-secondary, #B4C6DB); }

/* the friend's level and play time: two bars side by side (or the level's alone) */
.ip-bars[b-p4gb12sh9p] { margin: 13px 0 1px 21px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 14px; }
.ip-measure[b-p4gb12sh9p] { min-width: 0; }
.ip-measure-words[b-p4gb12sh9p] { display: flex; align-items: center; gap: 7px; font-size: 14.5px; line-height: 19px; color: #E2DAF6; }
.ip-tick[b-p4gb12sh9p] { display: inline-flex; flex: 0 0 16px; color: #5BE39B; }
.ip-measure-text[b-p4gb12sh9p] { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ip-pct[b-p4gb12sh9p] { flex: 0 0 auto; margin-left: 3px; font-weight: 600; font-variant-numeric: tabular-nums; color: #E2DAF6; }
.ip-measure.met .ip-pct[b-p4gb12sh9p] { color: #8CF0B8; }
.ip-bar[b-p4gb12sh9p] { position: relative; height: 10px; margin-top: 8px; border-radius: 5px; background: #262A4E; overflow: hidden; }
.ip-fill[b-p4gb12sh9p] { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #7C4DFF 0%, #B98CFF 100%); }
.ip-measure.met .ip-fill[b-p4gb12sh9p] { background: linear-gradient(90deg, #3EDE72 0%, #5BE39B 100%); }
/* no reading yet */
.ip-not-yet[b-p4gb12sh9p] { margin: 10px 0 0 21px; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 19px; color: #CFC4F2; }
.ip-not-yet[b-p4gb12sh9p]  .icon { flex: 0 0 15px; margin-top: 2px; color: #B9A8F0; }
/* not counted because of a match: the owner's warning in the wheel's amber, never which match */
.ip-match[b-p4gb12sh9p] { margin: 9px 0 0 21px; display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 18px; color: #F5C26B; overflow-wrap: anywhere; }
.ip-match[b-p4gb12sh9p]  .icon { flex: 0 0 14px; margin-top: 2px; color: #F5C26B; }

/* refer1: the referral's status as a chip in its colour and the inviter's reward as a second chip, the status's line under
   them; the row's light follows the status (waiting violet, playing blue, under review amber, qualified green, the rest grey) */
.ip-row.status-waiting[b-p4gb12sh9p] { --look: #C2AEFF; }
.ip-row.status-going[b-p4gb12sh9p] { --look: #6FB7FF; }
.ip-row.status-review[b-p4gb12sh9p] { --look: #F5C26B; }
.ip-row.status-good[b-p4gb12sh9p] { --look: #5BE39B; }
.ip-row.status-quiet[b-p4gb12sh9p] { --look: #8E92B4; }
.rf-chips[b-p4gb12sh9p] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rf-chip[b-p4gb12sh9p] {
    display: inline-flex; align-items: center; padding: 2px 10px 3px; border-radius: 11px; font-size: 13px; font-weight: 600; line-height: 17px; white-space: nowrap;
    color: var(--look); background: color-mix(in srgb, var(--look) 14%, transparent); border: 1px solid color-mix(in srgb, var(--look) 55%, transparent);
}
.rf-chip.reward[b-p4gb12sh9p] { color: #B8BCD8; background: #FFFFFF0D; border-color: #FFFFFF26; }
.rf-chip.reward.credited[b-p4gb12sh9p] { color: #FFE19A; background: #E7B0521F; border-color: #E7B05299; }
.rf-chip.reward.used[b-p4gb12sh9p] { color: #9DF0CC; background: #49B98D1F; border-color: #49B98D80; }
.ip-status-line[b-p4gb12sh9p] { margin: 7px 0 0 21px; font-size: 14px; line-height: 19px; color: #CFC4F2; overflow-wrap: anywhere; }
.ip-row.status-quiet .ip-status-line[b-p4gb12sh9p] { color: var(--brush-text-secondary, #B4C6DB); }

/* a narrow column (under 620: a page under 702, a phone's): the play time under the level, when the code was used under the
   state (the Vault's WheelInvitesPage.NarrowBelow), "Updated" under the job line */
@container ip (max-width: 701.98px) {
    .ip-bars[b-p4gb12sh9p] { grid-template-columns: 1fr; }
    .ip-row-head[b-p4gb12sh9p] { flex-wrap: wrap; row-gap: 3px; }
    .ip-when[b-p4gb12sh9p] { flex-basis: 100%; margin-left: 21px; white-space: normal; }
    .if-char[b-p4gb12sh9p] { grid-template-columns: 40px minmax(0, 1fr); }
    .if-head[b-p4gb12sh9p] { grid-row: 1 / span 2; }
    .if-updated[b-p4gb12sh9p] { grid-column: 2; grid-row: 2; margin: 1px 0 0; white-space: normal; }
}
/* a phone: the row a little nearer its edges */
@container ip (max-width: 599.98px) {
    .ip-row[b-p4gb12sh9p] { padding: 13px 14px 15px; }
}
/* /Chat/InviteShareRow.razor.rz.scp.css */
/* "Share your code" (Chat\InviteShareRow.razor) in the invite card's gold-edged code box, under the code and Copy: a hairline,
   the heading in the code's own label look, then one round button per service in its own colour with its mark in white
   (Facebook's and Telegram's round badges whole), Share... first in the chat's purple where the device has a share sheet,
   Email in a quiet slate. 36 wide on a PC (the nine fit one line of the card), 44 for a finger, wrapping to a second line on
   a phone. A small lift and the service's glow under the mouse, the keyboard's ring a little outside the circle. */
.share[b-bl10d6ahmf] { display: flex; flex-direction: column; margin-top: 2px; padding-top: 11px; border-top: 1px solid #E7B05233; }
.share-title[b-bl10d6ahmf] { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #E9D6A8; line-height: 16px; }
.share-buttons[b-bl10d6ahmf] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.share-button[b-bl10d6ahmf] {
    --brand: #4B5A73;
    position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: 50%; overflow: hidden; color: #FFFFFF; background: var(--brand); text-decoration: none; cursor: pointer;
    box-shadow: inset 0 0 0 1px #FFFFFF26, 0 2px 6px #00000052;
    transition: transform var(--fast, 120ms) var(--ease-out, ease-out), box-shadow var(--fast, 120ms) var(--ease-out, ease-out), filter var(--fast, 120ms) var(--ease-out, ease-out);
}
.share-button:hover:not(:disabled)[b-bl10d6ahmf] {
    transform: translateY(-2px); filter: brightness(1.08);
    box-shadow: inset 0 0 0 1px #FFFFFF3D, 0 6px 16px color-mix(in srgb, var(--brand) 55%, transparent);
}
.share-button:active:not(:disabled)[b-bl10d6ahmf] { transform: translateY(0) scale(.95); filter: brightness(.96); }
.share-button:focus-visible[b-bl10d6ahmf] { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 2px; }
.share-button:disabled[b-bl10d6ahmf] { opacity: .55; cursor: default; }
/* each service's own colour (Simple Icons' data, Services\ShareLogos.cs) */
.share-button.id-whatsapp[b-bl10d6ahmf] { --brand: #25D366; }
.share-button.id-discord[b-bl10d6ahmf] { --brand: #5865F2; }
.share-button.id-facebook[b-bl10d6ahmf] { --brand: #0866FF; }
.share-button.id-x[b-bl10d6ahmf] { --brand: #000000; box-shadow: inset 0 0 0 1px #FFFFFF47, 0 2px 6px #00000052; }
.share-button.id-telegram[b-bl10d6ahmf] { --brand: #26A5E4; }
.share-button.id-reddit[b-bl10d6ahmf] { --brand: #FF4500; }
.share-button.id-line[b-bl10d6ahmf] { --brand: #00C300; }
.share-button.id-email[b-bl10d6ahmf] { --brand: #4B5A73; }
/* Share...: the device's own sheet, in the chat's primary purple */
.share-button.id-sheet[b-bl10d6ahmf] { --brand: #6C49F9; background: linear-gradient(180deg, #8366FF 0%, #6C49F9 100%); }
/* the marks: a service's logo a little over half the circle, X's a little smaller (it fills its square), Email's envelope
   and the share mark drawn with the icons' pen; a round badge fills the button over its white disc */
.share-button[b-bl10d6ahmf]  .share-mark { width: 19px; height: 19px; flex: 0 0 auto; display: block; }
.share-button.id-x[b-bl10d6ahmf]  .share-mark { width: 16px; height: 16px; }
.share-button.id-email[b-bl10d6ahmf]  .share-mark, .share-button.id-sheet[b-bl10d6ahmf]  .share-mark { width: 18px; height: 18px; stroke-width: 2.1; }
/* (share-badge, never the app's own .badge: the rail's count) */
.share-button[b-bl10d6ahmf]  .share-mark.share-badge { width: 100%; height: 100%; color: var(--brand); }
/* what Discord's button did: copied (the counted green's check), or the copy did not go */
.share-status[b-bl10d6ahmf] { margin: 0; display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; font-size: 13.5px; line-height: 18px; color: #DDF7E8; }
.share-status:not(:empty)[b-bl10d6ahmf] { margin-top: 9px; }
.share-status[b-bl10d6ahmf]  .icon { flex: 0 0 15px; margin-top: 1.5px; color: #5BE39B; }
.share-status.failed[b-bl10d6ahmf] { color: var(--brush-warning-text, #FBDFA6); }
.share-status.failed[b-bl10d6ahmf]  .icon { color: var(--brush-warning, #F5B544); }
.share-open[b-bl10d6ahmf] { color: #FFE19A; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.share-open:hover[b-bl10d6ahmf] { color: #FFF1C2; }
@media (pointer: coarse) {
    .share-buttons[b-bl10d6ahmf] { gap: 10px; }
    .share-button[b-bl10d6ahmf] { width: 44px; height: 44px; }
    .share-button[b-bl10d6ahmf]  .share-mark { width: 23px; height: 23px; }
    .share-button.id-x[b-bl10d6ahmf]  .share-mark { width: 19px; height: 19px; }
    .share-button.id-email[b-bl10d6ahmf]  .share-mark, .share-button.id-sheet[b-bl10d6ahmf]  .share-mark { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .share-button[b-bl10d6ahmf] { transition: none; }
    .share-button:hover:not(:disabled)[b-bl10d6ahmf], .share-button:active:not(:disabled)[b-bl10d6ahmf] { transform: none; }
}
/* /Chat/LanguageButton.razor.rz.scp.css */
/* The language at the top (Chat\LanguageButton.razor): the header's own round button of 36 (Chat.IconButton, app.css'
   .icon-button: no edge, a round wash under the mouse; .glass on Syphon's ground) with the flag of the language in use,
   24 across (the chat's flag pictures are square with the flag across their middle: 24 x 17 of flag); its menu is the
   chat's menu (app.css, "menus": the glass panel, entries of 36, the check of the choice that stands), with the flags 20
   across in the icons' column, as tall as the window leaves under the top and never wider than the window. */
.lang-button > .lang-flag[b-lxpxt34abo] { width: 24px; height: 24px; flex: 0 0 auto; pointer-events: none; }
.lang-button.open:not(.glass)[b-lxpxt34abo] { background: var(--brush-hover-light, #FFFFFF14); }
.lang-button.glass.open[b-lxpxt34abo] { background: #0A0F15E6; }
.lang-menu[b-lxpxt34abo] {
    min-width: 236px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 72px);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2A3444 transparent;
}
.lang-item-flag[b-lxpxt34abo] { width: 20px; flex: 0 0 20px; }
.lang-item-flag > img[b-lxpxt34abo] { width: 20px; height: 20px; }
/* /Chat/MilestoneBar.razor.rz.scp.css */
/* The invite milestones' bar (Chat\MilestoneBar.razor; invmile1; every number: docs\chat\wheel\milestones\web.md). The wheel's
   gold and night, Ragnarok's own pictures (the owner's word of 2026-10-13 evening): a Poring per friend (Chat\Poring.razor) and
   the game's Gift Box at the end. The motion is CSS alone, each part at its own time after the event (--d: a slot's start,
   --last: the last slot's); with prefers-reduced-motion the app's own rule takes every animation away (css\app.css), and the
   page does not start the celebration then. Nothing of it takes the mouse. */

/* ───────────── the full bar ───────────── */
.ms-card[b-2zkw0m9o8n] {
    position: relative; isolation: isolate; box-sizing: border-box; container-type: inline-size; flex: 0 0 auto;
    padding: 16px 20px 16px 18px; border-radius: 16px;
    background: linear-gradient(135deg, #2B1A5C 0%, #1D1344 52%, #141030 100%); border: 1.2px solid #E7B05266;
    box-shadow: inset 0 1px 0 #FFFFFF14, 0 0 22px #8B5CF62E;
    /* the sparkles may fly a little past the card's edge (no scroll bar: clip, not hidden) */
    overflow: clip; overflow-clip-margin: 22px;
    transition: border-color 220ms ease-out;
}
.ms-card.near[b-2zkw0m9o8n], .ms-card.celebrate[b-2zkw0m9o8n] { border-color: #E8B04EB3; }
.ms-light[b-2zkw0m9o8n] {
    position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: radial-gradient(ellipse 60% 90% at 8% 10%, #8B5CF64D, #8B5CF600 100%);
}
.ms-card.near .ms-light[b-2zkw0m9o8n], .ms-card.celebrate .ms-light[b-2zkw0m9o8n] {
    background: radial-gradient(ellipse 38% 85% at 94% 62%, #E8B04E38, #E8B04E00 100%), radial-gradient(ellipse 60% 90% at 8% 10%, #8B5CF64D, #8B5CF600 100%);
}

.ms-head[b-2zkw0m9o8n] { display: flex; align-items: center; gap: 11px; }
.ms-medal[b-2zkw0m9o8n] {
    position: relative; flex: 0 0 30px; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #3B1474; background: radial-gradient(circle at 35% 30%, #FFF1C2 0%, #E8B04E 60%, #9A6418 100%); border: 1.2px solid #5A340C; box-shadow: 0 0 12px #E8B04E59;
}
.ms-medal[b-2zkw0m9o8n]  .icon { stroke-width: 2.2; }
.ms-title[b-2zkw0m9o8n] {
    margin: 0; font-size: 17px; font-weight: 700; line-height: 22px; overflow-wrap: anywhere;
    background: linear-gradient(180deg, #FFF3CF 0%, #F7CB6A 55%, #E3A443 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-every[b-2zkw0m9o8n] { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: #D2CCEA; overflow-wrap: anywhere; }

/* refer1: the bar alone in Invite & Earn's "Next milestone" card (Chat\WheelInvitesPage.razor), which gives the card and the
   words: no ground, edge or light of its own, the bar a little under the card's title */
.ms-card.bare[b-2zkw0m9o8n] { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ms-card.bare .ms-bar[b-2zkw0m9o8n] { margin-top: 12px; }

/* the bar: a Poring per friend, the track between them, the Gift Box at its end. A slot is 46 (38 in a narrow card), smaller
   when the slots would not fit beside the box and their tracks (more than 5 of them on a phone: the chat server allows up to
   10 friends a milestone), never under 20 */
.ms-bar[b-2zkw0m9o8n] {
    margin-top: 14px; max-width: 640px; display: flex; align-items: center; --n: 3; --slot-max: 46px; --gift: 60px; --box: 48px; --gap: 14px; --tm: 4px;
    --slot: clamp(18px, calc((min(640px, 100cqi) - var(--gift) - 4px - var(--n) * (var(--gap) + var(--tm))) / var(--n)), var(--slot-max));
}
.ms-slot[b-2zkw0m9o8n] { position: relative; flex: 0 0 var(--slot); width: var(--slot); height: var(--slot); }
/* the ground under a Poring: nothing while it sleeps, a warm gold dashed ring for the next friend's, a gold light once counted */
.ms-spot[b-2zkw0m9o8n] { position: absolute; left: 6%; right: 6%; bottom: -3%; height: 30%; border-radius: 50%; pointer-events: none; }
.ms-slot.next .ms-spot[b-2zkw0m9o8n] { border: 1.5px dashed #E8C878B3; background: #E8B04E14; }
.ms-slot.counted .ms-spot[b-2zkw0m9o8n], .ms-slot.new .ms-spot[b-2zkw0m9o8n] { background: radial-gradient(closest-side, #FFD77A73, #FFD77A00); }
.ms-poring[b-2zkw0m9o8n] { position: absolute; left: 0; right: 0; bottom: 4%; transform-origin: 50% 100%; }
.ms-poring[b-2zkw0m9o8n]  .poring { display: block; width: 100%; height: auto; }
/* asleep: grey and faint (the next friend's a little less) */
.ms-slot.empty .ms-poring[b-2zkw0m9o8n], .ms-dot.empty[b-2zkw0m9o8n] { filter: grayscale(1) brightness(1.08) contrast(.85); opacity: .5; }
.ms-slot.next .ms-poring[b-2zkw0m9o8n], .ms-dot.next[b-2zkw0m9o8n] { filter: grayscale(.9) brightness(1.08) contrast(.9); opacity: .8; }
.ms-tick[b-2zkw0m9o8n] {
    position: absolute; right: -2px; bottom: -1px; width: clamp(12px, calc(var(--slot) * .37), 17px); height: clamp(12px, calc(var(--slot) * .37), 17px); box-sizing: border-box; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(180deg, #5BE39B, #2FBF72); border: 2px solid #1D1344;
}
.ms-slot .ms-tick[b-2zkw0m9o8n]  .icon { width: 60%; height: 60%; stroke-width: 3; color: #fff; }

.ms-track[b-2zkw0m9o8n] { position: relative; flex: 1 1 0; min-width: var(--gap); height: 6px; margin: 0 calc(var(--tm) / 2); border-radius: 3px; background: #262A4E; box-shadow: inset 0 1px 2px #00000066; }
.ms-track-fill[b-2zkw0m9o8n] {
    position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transform: scaleX(0);
    background: linear-gradient(90deg, #E3A443 0%, #FFE19A 100%); box-shadow: 0 0 8px #E8B04E80;
}
.ms-track.on .ms-track-fill[b-2zkw0m9o8n], .ms-track.new .ms-track-fill[b-2zkw0m9o8n], .ms-track.into .ms-track-fill[b-2zkw0m9o8n] { transform: none; }
/* the light that runs along the track into the box */
.ms-track-run[b-2zkw0m9o8n] {
    position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; pointer-events: none;
    background: radial-gradient(circle, #FFF6DC 0%, #FFF6DC99 45%, #FFF6DC00 100%);
}

/* the Gift Box (the game's item 644, pixel art kept sharp): its lid and its box are two layers of the one picture, cut on the
   line between them (13 of its 24 rows), so that it can open */
.ms-gift[b-2zkw0m9o8n] { position: relative; flex: 0 0 var(--gift); width: var(--gift); height: var(--gift); margin-left: 2px; pointer-events: none; }
.ms-gift-glow[b-2zkw0m9o8n] { position: absolute; inset: -14%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #FFD77A66, #E8B04E24 62%, #E8B04E00); }
.ms-box[b-2zkw0m9o8n] { position: absolute; left: 50%; top: 50%; width: var(--box); height: var(--box); margin: calc(var(--box) / -2) 0 0 calc(var(--box) / -2); }
/* its shadow on the ground (a shape of its own: a filter's shadow would show the cut of the two layers) */
.ms-box[b-2zkw0m9o8n]::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 6%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, #00000099, #00000000); }
.ms-box img[b-2zkw0m9o8n] { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }
.ms-box-base[b-2zkw0m9o8n] { clip-path: inset(54.2% 0 0 0); }
.ms-box-lid[b-2zkw0m9o8n] { clip-path: inset(0 0 45.8% 0); transform-origin: 22% 54%; }
.ms-plus[b-2zkw0m9o8n] {
    position: absolute; right: -4px; bottom: -2px; height: 22px; min-width: 30px; padding: 0 7px; box-sizing: border-box; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: .02em;
    background: linear-gradient(180deg, #9F6BFF 0%, #6533CB 100%); border: 2px solid #1D1344;
}
/* dim while more than one friend is left, warmer with each friend (--warm: 0 at the start to 1 one friend away) */
.ms-gift.dim .ms-box img[b-2zkw0m9o8n], .ms-mini-gift.dim .ms-box img[b-2zkw0m9o8n] { filter: saturate(calc(.45 + .3 * var(--warm, 0))) brightness(calc(.55 + .25 * var(--warm, 0))); }
.ms-gift.dim .ms-plus[b-2zkw0m9o8n] { opacity: .85; }
/* one friend left (Almost) and while it celebrates: a gold light behind it */
.ms-gift.near .ms-gift-glow[b-2zkw0m9o8n], .ms-gift.reached .ms-gift-glow[b-2zkw0m9o8n], .ms-mini-gift.near .ms-gift-glow[b-2zkw0m9o8n], .ms-mini-gift.reached .ms-gift-glow[b-2zkw0m9o8n] { opacity: 1; }
.ms-gift.near .ms-box img[b-2zkw0m9o8n], .ms-gift.reached .ms-box img[b-2zkw0m9o8n] { filter: brightness(1.06); }
/* Almost: a ring of light that breathes three times, then stays */
.ms-halo[b-2zkw0m9o8n] { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #FFD77A; opacity: 0; pointer-events: none; }
.ms-gift.near .ms-halo[b-2zkw0m9o8n] { opacity: .55; animation: ms-breathe-b-2zkw0m9o8n 2600ms ease-in-out 3 both; }
.ms-glint[b-2zkw0m9o8n] {
    position: absolute; right: 0; top: 0; width: 12px; height: 12px; background: #FFF4D2; pointer-events: none;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 3px #FFE19A);
}

.ms-progress[b-2zkw0m9o8n] { margin: 13px 0 0; font-size: 15px; font-weight: 600; line-height: 21px; color: #F4F3F9; overflow-wrap: anywhere; }
.ms-card.near .ms-progress[b-2zkw0m9o8n] { color: #FFE19A; }
.ms-reached[b-2zkw0m9o8n] {
    margin: 13px 0 0; display: flex; align-items: center; gap: 7px; font-size: 15.5px; font-weight: 700; line-height: 21px; overflow-wrap: anywhere;
    color: #FFE19A;
}
.ms-reached > span:last-child[b-2zkw0m9o8n] { background: linear-gradient(180deg, #FFF3CF 0%, #F7CB6A 55%, #E3A443 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-earned[b-2zkw0m9o8n] {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 3px 8px; border-radius: 10px;
    font-size: 12.5px; font-weight: 600; line-height: 17px; color: #FFE19A; background: #E7B0521F; border: 1px solid #E7B05299;
}
/* a small four-point sparkle before a line */
.ms-star[b-2zkw0m9o8n] { flex: 0 0 auto; display: inline-block; width: 11px; height: 11px; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.ms-reached .ms-star[b-2zkw0m9o8n] { width: 13px; height: 13px; color: #FFE19A; filter: drop-shadow(0 0 4px #E8B04E); }

/* more than 5 slots; a narrow card (a phone): smaller slots and box, closer edges */
.many .ms-bar[b-2zkw0m9o8n] { --slot-max: 32px; --gift: 50px; --gap: 4px; --tm: 0px; }
/* there the tick stays inside its own slot (the next Poring is only 4 away) */
.many .ms-tick[b-2zkw0m9o8n] { right: -1px; bottom: 0; border-width: 1.5px; width: clamp(10px, calc(var(--slot) * .42), 15px); height: clamp(10px, calc(var(--slot) * .42), 15px); }
@container (max-width: 359.98px) {
    .ms-bar[b-2zkw0m9o8n] { --slot-max: 38px; --gift: 52px; margin-top: 12px; }
    .many .ms-bar[b-2zkw0m9o8n] { --slot-max: 30px; --gift: 48px; }
    .ms-plus[b-2zkw0m9o8n] { height: 20px; min-width: 27px; font-size: 11.5px; }
}
@media (max-width: 420px) {
    .ms-card[b-2zkw0m9o8n] { padding: 14px; }
}

/* ───────────── compact: on the wheel, in the button of Your invites ───────────── */
.ms-mini[b-2zkw0m9o8n] { display: inline-flex; align-items: center; gap: 6px; --dot: 18px; --mbox: 24px; --join: 6px; }
.ms-mini.many[b-2zkw0m9o8n] { --dot: 12px; --join: 3px; }
.ms-mini-bar[b-2zkw0m9o8n] { display: inline-flex; align-items: center; }
.ms-dot[b-2zkw0m9o8n] { position: relative; flex: 0 0 var(--dot); width: var(--dot); transform-origin: 50% 100%; }
.ms-dot[b-2zkw0m9o8n]  .poring { display: block; width: 100%; height: auto; }
.ms-join[b-2zkw0m9o8n] { position: relative; flex: 0 0 var(--join); width: var(--join); height: 2.5px; margin: 0 1px; border-radius: 2px; background: #3A3460; }
.ms-join-fill[b-2zkw0m9o8n] { position: absolute; inset: 0; border-radius: inherit; background: #F3BF5C; transform-origin: left center; transform: scaleX(0); }
.ms-join.on .ms-join-fill[b-2zkw0m9o8n], .ms-join.new .ms-join-fill[b-2zkw0m9o8n], .ms-join.into .ms-join-fill[b-2zkw0m9o8n] { transform: none; }
.ms-mini-gift[b-2zkw0m9o8n] { position: relative; flex: 0 0 var(--mbox); width: var(--mbox); height: var(--mbox); margin-left: 1px; --box: var(--mbox); }
.ms-mini-gift .ms-gift-glow[b-2zkw0m9o8n] { inset: -30%; }
.ms-mini-gift .ms-box[b-2zkw0m9o8n]::before { display: none; }
.ms-mini-gift .ms-plus[b-2zkw0m9o8n] { right: -7px; bottom: -6px; height: 13px; min-width: 18px; padding: 0 3px; border-width: 1.5px; border-radius: 7px; font-size: 9px; }
.ms-mini-gift.near .ms-box img[b-2zkw0m9o8n], .ms-mini-gift.reached .ms-box img[b-2zkw0m9o8n] { filter: brightness(1.06); }
.ms-short[b-2zkw0m9o8n] { font-size: 13.5px; font-weight: 700; line-height: 1; color: #E9D9B4; font-variant-numeric: tabular-nums; margin-left: 2px; }
.ms-mini.near .ms-short[b-2zkw0m9o8n], .ms-mini.celebrate .ms-short[b-2zkw0m9o8n] { color: #FFE19A; }
/* the line over the row while it celebrates (the panel's width at most; the row's right edge) */
.ms-bubble[b-2zkw0m9o8n] {
    position: absolute; right: 0; bottom: calc(100% + 9px); z-index: 3; width: max-content; max-width: min(300px, 100cqi); box-sizing: border-box;
    display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px; pointer-events: none; white-space: normal; text-align: left;
    font-size: 13.5px; font-weight: 700; line-height: 18px; color: #FFE19A; background: #1D1344F2; border: 1.2px solid #E8B04EB3;
    box-shadow: 0 10px 28px #00000080, 0 0 18px #E8B04E33; opacity: 0;
}
.ms-bubble[b-2zkw0m9o8n]::after {
    content: ""; position: absolute; right: 40px; top: 100%; width: 10px; height: 10px; margin-top: -5px; transform: rotate(45deg);
    background: #1D1344; border-right: 1.2px solid #E8B04EB3; border-bottom: 1.2px solid #E8B04EB3;
}
.ms-bubble .ms-star[b-2zkw0m9o8n] { width: 12px; height: 12px; color: #FFE19A; }
@media (pointer: coarse) {
    .ms-mini[b-2zkw0m9o8n] { --dot: 20px; }
    .ms-mini.many[b-2zkw0m9o8n] { --dot: 13px; }
}

/* ───────────── a friend counts, and the celebration ───────────── */
/* a Poring wakes up: its colour comes and it bounces once; its tick pops after it; the track before it fills */
.celebrate .ms-slot.new .ms-poring[b-2zkw0m9o8n], .fill .ms-slot.new .ms-poring[b-2zkw0m9o8n], .celebrate .ms-dot.new[b-2zkw0m9o8n], .fill .ms-dot.new[b-2zkw0m9o8n] {
    animation: ms-wake-b-2zkw0m9o8n 280ms var(--d) ease-out both, ms-bounce-b-2zkw0m9o8n 560ms var(--d) both;
}
.celebrate .ms-slot.new .ms-spot[b-2zkw0m9o8n], .fill .ms-slot.new .ms-spot[b-2zkw0m9o8n] { animation: ms-in-b-2zkw0m9o8n 300ms calc(var(--d) + 120ms) ease-out both; }
.celebrate .ms-slot.new .ms-tick[b-2zkw0m9o8n], .fill .ms-slot.new .ms-tick[b-2zkw0m9o8n] { animation: ms-tick-b-2zkw0m9o8n 260ms calc(var(--d) + 300ms) cubic-bezier(.2,.9,.3,1.4) both; }
.celebrate .ms-track.new .ms-track-fill[b-2zkw0m9o8n], .celebrate .ms-join.new .ms-join-fill[b-2zkw0m9o8n], .fill .ms-track.new .ms-track-fill[b-2zkw0m9o8n], .fill .ms-join.new .ms-join-fill[b-2zkw0m9o8n] { animation: ms-track-b-2zkw0m9o8n 300ms var(--d) ease-out both; }
/* the last track runs into the box */
.celebrate .ms-track.into .ms-track-fill[b-2zkw0m9o8n], .celebrate .ms-join.into .ms-join-fill[b-2zkw0m9o8n] { animation: ms-track-b-2zkw0m9o8n 360ms calc(var(--last) + 300ms) cubic-bezier(.5,0,.75,0) both; }
.celebrate .ms-track-run[b-2zkw0m9o8n] { animation: ms-run-b-2zkw0m9o8n 360ms calc(var(--last) + 300ms) cubic-bezier(.5,0,.75,0) both; }
/* the box: it lights up when it was still dim, pops, and opens: its lid flies up and tips back, a beam of light rises out of
   it, a flash, a ring of light, sparkles; the lid stays up until the bar starts again */
.celebrate .ms-box[b-2zkw0m9o8n] { animation: ms-pop-b-2zkw0m9o8n 700ms calc(var(--last) + 600ms) both; }
.celebrate .was-dim .ms-box img[b-2zkw0m9o8n] { animation: ms-undim-b-2zkw0m9o8n 200ms calc(var(--last) + 560ms) ease-out both; }
.celebrate .ms-box-lid[b-2zkw0m9o8n] { animation: ms-lid-open-b-2zkw0m9o8n 520ms calc(var(--last) + 680ms) cubic-bezier(.2,.9,.3,1.2) both; }
.ms-beam[b-2zkw0m9o8n] {
    position: absolute; left: 50%; bottom: 46%; width: 52%; height: 110%; margin-left: -26%; opacity: 0; pointer-events: none; z-index: 0; transform-origin: 50% 100%;
    background: linear-gradient(0deg, #FFFBEB 0%, #FFE19ACC 30%, #FFE19A00 100%); clip-path: polygon(28% 100%, 72% 100%, 100% 0, 0 0); filter: blur(.6px);
}
.celebrate .ms-beam[b-2zkw0m9o8n] { animation: ms-beam-b-2zkw0m9o8n 560ms calc(var(--last) + 700ms) ease-out both; }
.ms-ring[b-2zkw0m9o8n] { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid #FFE19A; box-shadow: 0 0 14px #FFD77ACC, inset 0 0 10px #FFD77A80; opacity: 0; pointer-events: none; }
.ms-flash[b-2zkw0m9o8n] {
    position: absolute; inset: -45%; z-index: -1; border-radius: 50%; opacity: 0; pointer-events: none;
    background: radial-gradient(closest-side, #FFF1C2E6 0%, #FFD77A80 38%, #E8B04E26 62%, #E8B04E00 100%);
}
.celebrate .ms-ring[b-2zkw0m9o8n] { animation: ms-ring-b-2zkw0m9o8n 650ms calc(var(--last) + 660ms) cubic-bezier(.1,.7,.3,1) both; }
.celebrate .ms-flash[b-2zkw0m9o8n] { animation: ms-flash-b-2zkw0m9o8n 620ms calc(var(--last) + 640ms) ease-out both; }
.celebrate .ms-plus[b-2zkw0m9o8n] { animation: ms-bounce-chip-b-2zkw0m9o8n 460ms calc(var(--last) + 820ms) ease-out both; }
.ms-sparks[b-2zkw0m9o8n] { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.ms-spark[b-2zkw0m9o8n] {
    position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: 0;
    background: var(--c); filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 2px #FFF6DC);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.celebrate .ms-spark[b-2zkw0m9o8n] { animation: ms-spark-b-2zkw0m9o8n var(--t) calc(var(--last) + 680ms) cubic-bezier(.15,.8,.3,1) both; }
/* the line: it rises in, stays, and fades as the bar starts again */
.celebrate .ms-reached[b-2zkw0m9o8n], .celebrate .ms-bubble[b-2zkw0m9o8n] { animation: ms-rise-b-2zkw0m9o8n 280ms calc(var(--last) + 740ms) ease-out both, ms-gone-b-2zkw0m9o8n 240ms calc(var(--last) + 3060ms) ease-in forwards; }
.celebrate .ms-bubble[b-2zkw0m9o8n] { opacity: 0; }

/* the bar starts again: the Porings fall asleep one after the other, the lid closes, the box dims, the earned line pops one
   higher */
.again .ms-slot[b-2zkw0m9o8n], .again .ms-dot[b-2zkw0m9o8n] { animation: ms-ring-in-b-2zkw0m9o8n 240ms calc(var(--i) * 60ms) ease-out both; }
.again .ms-box-lid[b-2zkw0m9o8n] { animation: ms-lid-close-b-2zkw0m9o8n 300ms ease-in both; }
.again .ms-earned[b-2zkw0m9o8n] { animation: ms-chip-b-2zkw0m9o8n 420ms cubic-bezier(.2,.9,.3,1.3) both; }
.again .ms-progress[b-2zkw0m9o8n] { animation: ms-in-b-2zkw0m9o8n 240ms ease-out both; }

@keyframes ms-breathe-b-2zkw0m9o8n {
    0% { opacity: .55; transform: scale(1); }
    25% { opacity: .25; transform: scale(.96); }
    75% { opacity: .85; transform: scale(1.06); }
    100% { opacity: .55; transform: scale(1); }
}
@keyframes ms-wake-b-2zkw0m9o8n { from { filter: grayscale(1) brightness(1.08) contrast(.85); opacity: .6; } to { filter: none; opacity: 1; } }
@keyframes ms-bounce-b-2zkw0m9o8n {
    0% { transform: none; animation-timing-function: cubic-bezier(.3,.7,.5,1); }
    24% { transform: translateY(-34%) scale(.94, 1.08); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
    46% { transform: translateY(0) scale(1.14, .86); animation-timing-function: cubic-bezier(.3,.7,.5,1); }
    64% { transform: translateY(-9%) scale(.98, 1.03); }
    82% { transform: translateY(0) scale(1.04, .97); }
    100% { transform: none; }
}
@keyframes ms-tick-b-2zkw0m9o8n { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes ms-track-b-2zkw0m9o8n { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ms-run-b-2zkw0m9o8n { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes ms-undim-b-2zkw0m9o8n { from { filter: saturate(calc(.45 + .3 * var(--warm, 0))) brightness(calc(.55 + .25 * var(--warm, 0))); } to { filter: brightness(1.06); } }
@keyframes ms-pop-b-2zkw0m9o8n {
    0% { transform: none; animation-timing-function: cubic-bezier(.15,.9,.35,1); }
    45% { transform: scale(1.3); animation-timing-function: cubic-bezier(.4,0,.6,1); }
    68% { transform: scale(.94); animation-timing-function: cubic-bezier(.4,0,.6,1); }
    84% { transform: scale(1.04); }
    100% { transform: none; }
}
@keyframes ms-lid-open-b-2zkw0m9o8n {
    0% { transform: none; }
    45% { transform: translateY(-30%) rotate(-20deg); }
    75% { transform: translateY(-15%) rotate(-12deg); }
    100% { transform: translateY(-18%) rotate(-14deg); }
}
@keyframes ms-lid-close-b-2zkw0m9o8n { from { transform: translateY(-18%) rotate(-14deg); } to { transform: none; } }
@keyframes ms-beam-b-2zkw0m9o8n { 0% { opacity: 0; transform: scaleY(.3); } 35% { opacity: 1; } 100% { opacity: .55; transform: none; } }
@keyframes ms-ring-b-2zkw0m9o8n { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(2.3); } }
@keyframes ms-flash-b-2zkw0m9o8n { 0% { opacity: 0; transform: scale(.55); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes ms-spark-b-2zkw0m9o8n {
    0% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--r) * .3)) rotate(0deg) scale(.3); }
    18% { opacity: 1; }
    45% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--r) * .82)) rotate(60deg) scale(1.15); }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(120deg) scale(.4); }
}
@keyframes ms-rise-b-2zkw0m9o8n { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ms-gone-b-2zkw0m9o8n { from { opacity: 1; } to { opacity: 0; } }
@keyframes ms-ring-in-b-2zkw0m9o8n { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ms-chip-b-2zkw0m9o8n { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes ms-bounce-chip-b-2zkw0m9o8n { 0% { transform: none; } 40% { transform: scale(1.35); } 70% { transform: scale(.92); } 100% { transform: none; } }
@keyframes ms-in-b-2zkw0m9o8n { from { opacity: 0; } to { opacity: 1; } }
/* /Chat/MiniGamesPane.razor.rz.scp.css */
/* Mini Games in the browser (Chat\MiniGamesPane.razor; docs\chat\wheel\web-hub.md): the owner's picture of 2026-10-10
   (docs\briefs\2026-10-10-mini-games.png, 1717 x 916 beside the Vault's sidebar) beside the rail. At desktop sizes the page
   stands in the window's height as the picture has it: the title and its line, the featured card of Spin the Wheel and the
   three coming-soon cards share the height as 363 to 275 (the picture's), and no card grows past the picture's proportions
   (the featured card a quarter of the width, a coming-soon card 1.71 times as wide as tall). The featured card's words grow
   and shrink with its height (cqh), its art (js\minigames.js) stands beside them. A narrow window puts the art over the
   words and the page scrolls; a phone has one card under the other. With prefers-reduced-motion nothing moves. */

.mg-pane[b-kjn3prz6w7] {
    position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: block;
    background: #0B071C; color: var(--brush-text, #F4F3F9); font-family: var(--ui-font);
    /* a size container (TD-CHAT part 3: the rule for a low window at the end asks its height; its width rules as before): its
       size comes from its column, never from what it holds (all of that is absolute), so nothing else moves */
    container: mgpane / size;
    /* the purple word of each title, as the wheel's page draws "Wheel" */
    --mg-word: linear-gradient(180deg, #C9A6FF 0%, #9D63FF 100%);
}

/* the night of the wheel's page: GemstoneRO's own banner, a deeper purple over it, darker at the top and the foot, and its
   small stars (minigames.js) */
.mg-backdrop[b-kjn3prz6w7] {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 85% 85% at 45% 42%, #05031000 50%, #05031078 100%),
        linear-gradient(180deg, #080516B0 0%, #08051638 12%, #08051600 38%, #06041230 78%, #060410C0 100%),
        linear-gradient(#3A108A38, #3A108A38),
        url("art/games/gemstonero/banner.jpg") 0% 45% / cover no-repeat,
        #0B071C;
}
.mg-backdrop canvas[b-kjn3prz6w7] { position: absolute; left: 0; top: 0; }

/* the drawer's button in a narrow window: at the board's top left, so it scrolls away with the title (wheel-polish: fixed,
   it lay over the words that scrolled under it), on a ground of its own */
.mg-menu[b-kjn3prz6w7] { position: absolute; left: 8px; top: 8px; z-index: 5; background: #0E0A22CC; border: 1px solid #FFFFFF1F; }
.mg-menu:hover[b-kjn3prz6w7] { background: #1A1438E6; }

.mg-scroll[b-kjn3prz6w7] { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3A3460 transparent; }
.mg-board[b-kjn3prz6w7] {
    position: relative; min-height: 100%; box-sizing: border-box; padding: 30px 34px 30px 41px;
    display: flex; flex-direction: column;
}

/* the title and its line, where the wheel's page has its own */
.mg-title[b-kjn3prz6w7] {
    margin: 0 0 0 -3px; font-size: 62px; font-weight: 700; line-height: 1.12; letter-spacing: -0.6px; white-space: nowrap;
    color: var(--brush-text, #F4F3F9); text-shadow: 0 2px 18px #0000008C;
}
.mg-pane.with-menu .mg-title[b-kjn3prz6w7] { margin-left: 34px; }
/* the accent word comes from TextParts.Accent (i18n1), built in code without this file's scope: ::deep reaches it */
.mg-title[b-kjn3prz6w7]  .word, .mg-more[b-kjn3prz6w7]  .word, .mg-feature-title[b-kjn3prz6w7]  .word {
    background: var(--mg-word); -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none; filter: drop-shadow(0 2px 9px #0000007A);
}
.mg-subtitle[b-kjn3prz6w7] { margin: 9.6px 0 0; font-size: 22px; line-height: 1.3; color: #ECE7F8; text-shadow: 0 1px 8px #00000099; }

/* ───────────── the featured card: Spin the Wheel ───────────── */

.mg-feature[b-kjn3prz6w7] {
    position: relative; flex: 363 1 0px; min-height: 280px; max-height: calc((100cqw - 75px) * 0.25);
    margin-top: 20px; border-radius: 20px; container-type: size; isolation: isolate;
}
/* its ground: the castle at night by the lake (GemstoneRO's banner, its calm half), deep purple over it and dark behind the
   words; its bright edge */
.mg-feature-ground[b-kjn3prz6w7] {
    position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; box-sizing: border-box;
    border: 2px solid #B46DF0; background: #170A36;
    box-shadow: 0 0 0 1px #0000004D, 0 0 30px #8A4CF040, 0 18px 50px #00000073;
}
/* the castle, lit up in the picture's purple */
.mg-feature-ground[b-kjn3prz6w7]::before {
    content: ""; position: absolute; inset: 0;
    background: url("art/games/gemstonero/banner.jpg") 0% 40% / 200% auto no-repeat;
    filter: brightness(1.32) saturate(1.2);
}
/* dark behind the words, a purple light behind the wheel */
.mg-feature-ground[b-kjn3prz6w7]::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, #0C0620EB 0%, #0F0927D1 22%, #150B359E 38%, #1A0E4447 52%, #1A0E4400 66%),
        radial-gradient(70cqh 70cqh at calc(100% - 139cqh) 50%, #A066FF5C 0%, #A066FF24 55%, #A066FF00 100%),
        linear-gradient(180deg, #2A0F6629 0%, #0A061847 100%),
        linear-gradient(#5A1FC02E, #5A1FC02E);
}
/* its art (minigames.js): over the whole card, and over its upper edge where the wheel's top and gem stand */
.mg-art-box[b-kjn3prz6w7] { --mg-art: side; position: absolute; left: 0; right: 0; bottom: 0; top: -12cqh; z-index: 1; pointer-events: none; }
.mg-art-box canvas[b-kjn3prz6w7] { position: absolute; left: 0; top: 0; display: block; }

/* the badge in the top right corner: AVAILABLE with a green dot while a free spin waits, the time to the next one, or SIGN
   IN TO SPIN while no game account is signed in (wheel2) */
.mg-badge[b-kjn3prz6w7] {
    position: absolute; z-index: 3; top: clamp(14px, 6.3cqh, 28px); right: clamp(14px, 6.3cqh, 28px);
    display: inline-flex; align-items: center; gap: 15px; height: clamp(32px, 10.5cqh, 40px); padding: 0 20px 0 19px;
    box-sizing: border-box; border-radius: 999px; border: 1.5px solid #9159F2; background: #19153AEB;
    box-shadow: 0 6px 22px #00000066, 0 0 14px #8A4CF033;
    font-size: clamp(12.5px, 3.75cqh, 14.5px); font-weight: 700; letter-spacing: 0.09em; line-height: 1; white-space: nowrap;
    font-variant-numeric: tabular-nums; animation: mg-in-b-kjn3prz6w7 180ms ease-out both;
}
.mg-badge[hidden][b-kjn3prz6w7] { display: none; }
.mg-badge.available[b-kjn3prz6w7] { color: #4BE27F; }
.mg-badge.countdown[b-kjn3prz6w7] { color: #E6DCFF; gap: 11px; }
.mg-badge.signin[b-kjn3prz6w7] { color: #E6DCFF; gap: 11px; }
.mg-dot[b-kjn3prz6w7] { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #3EDE72; box-shadow: 0 0 10px #3EDE72A6; }
.mg-badge[b-kjn3prz6w7]  .icon { flex: 0 0 15px; color: #BBA0FF; stroke-width: 2.2; }

/* its words on the left, in the middle of its height; every size follows the card's height (the picture's at 363) */
.mg-words[b-kjn3prz6w7] {
    position: absolute; z-index: 2; left: clamp(26px, 11.6cqh, 52px); top: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.mg-kicker[b-kjn3prz6w7] {
    margin: 0; display: flex; align-items: center; gap: clamp(9px, 3.6cqh, 14px); line-height: 1;
    font-size: clamp(12.5px, 4.13cqh, 16.5px); font-weight: 700; letter-spacing: 0.06em; color: #D9C4FF; white-space: nowrap;
    text-shadow: 0 1px 6px #00000099;
}
.mg-kicker[b-kjn3prz6w7]  .icon { flex: 0 0 auto; width: clamp(19px, 6.6cqh, 26px); height: clamp(19px, 6.6cqh, 26px); color: #B98CFF; stroke-width: 2; }
.mg-feature-title[b-kjn3prz6w7] {
    margin: clamp(2px, 1.6cqh, 7px) 0 0; font-size: clamp(42px, 17.6cqh, 74px); font-weight: 700; line-height: 1.1;
    letter-spacing: -0.012em; white-space: nowrap; color: #F7F5FD; text-shadow: 0 2px 16px #00000080;
}
.mg-feature-line[b-kjn3prz6w7] {
    margin: clamp(4px, 2.2cqh, 9px) 0 0; font-size: clamp(15.5px, 5.92cqh, 23px); line-height: 1.3; white-space: nowrap;
    color: #EEEAFA; text-shadow: 0 1px 6px #000000A6;
}

/* the three servers: each opens the wheel with itself chosen (Loki blue, Gemstone purple, Freya pink, as the picture) */
.mg-chips[b-kjn3prz6w7] { margin-top: clamp(10px, 4cqh, 17px); display: flex; flex-wrap: wrap; gap: clamp(7px, 2.5cqh, 11px); }
.mg-chip[b-kjn3prz6w7] {
    display: inline-flex; align-items: center; justify-content: center; height: clamp(30px, 10.5cqh, 42px);
    padding: 0 clamp(17px, 7.2cqh, 30px); box-sizing: border-box; border-radius: 999px;
    border: 1.5px solid var(--chip-edge); background: var(--chip-fill); color: #fff; text-decoration: none; white-space: nowrap;
    font-size: clamp(13.5px, 4.4cqh, 17.5px); font-weight: 700; line-height: 1;
    box-shadow: inset 0 1px 0 #FFFFFF1F, 0 0 0 1px #00000040;
    transition: background-color 110ms ease-out, box-shadow 110ms ease-out;
}
.mg-chip:hover[b-kjn3prz6w7] { background: color-mix(in srgb, var(--chip-fill) 72%, var(--chip-edge)); box-shadow: inset 0 1px 0 #FFFFFF2E, 0 0 16px var(--chip-glow); }
.mg-chip:focus-visible[b-kjn3prz6w7] { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* a chip's state after its name (wheel2): a green light and "Free spin", the countdown with its clock, or "Sign in" */
.mg-chip[b-kjn3prz6w7] { gap: 0; }
.mg-chip-state[b-kjn3prz6w7] {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 11px; font-size: 0.83em; font-weight: 600; color: #B8B3D6;
    font-variant-numeric: tabular-nums;
}
.mg-chip-state.free[b-kjn3prz6w7] { color: #5BE39B; }
.mg-chip-state.countdown[b-kjn3prz6w7] { color: #E2DAF6; }
/* freespin1: a server closed for now, dimmed, "Coming soon" in the wheel's gold */
.mg-chip.closed[b-kjn3prz6w7] { opacity: .72; }
.mg-chip.closed:hover[b-kjn3prz6w7] { background: var(--chip-fill); box-shadow: inset 0 1px 0 #FFFFFF1F, 0 0 0 1px #00000040; }
.mg-chip-state.closed[b-kjn3prz6w7] { color: #FFE19A; }
.mg-chip-state[b-kjn3prz6w7]  .icon { flex: 0 0 auto; width: 1em; height: 1em; color: #D6D0EA; }
.mg-chip-dot[b-kjn3prz6w7] { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #3BDE73; box-shadow: 0 0 8px #3BDE73A6; }
.chip-loki[b-kjn3prz6w7] { --chip-edge: #6394EB; --chip-fill: #191943; --chip-glow: #5C8CF080; }
.chip-gemstone[b-kjn3prz6w7] { --chip-edge: #AB67E9; --chip-fill: #331C6A; --chip-glow: #A066F080; }
.chip-freya[b-kjn3prz6w7] { --chip-edge: #E260D8; --chip-fill: #3F1652; --chip-glow: #E060D880; }

.mg-every[b-kjn3prz6w7] {
    margin: clamp(10px, 4.4cqh, 18px) 0 0; display: flex; align-items: center; gap: clamp(11px, 5cqh, 19px); line-height: 1.25;
    font-size: clamp(14px, 4.55cqh, 18px); color: #E8E2F6; white-space: nowrap; text-shadow: 0 1px 6px #000000A6;
}
.mg-every[b-kjn3prz6w7]  .icon { flex: 0 0 auto; width: clamp(17px, 5.5cqh, 22px); height: clamp(17px, 5.5cqh, 22px); color: #F4F0FF; }

/* Open Spin the Wheel: the picture's bright purple button with its arrow */
.mg-open[b-kjn3prz6w7] {
    margin-top: clamp(14px, 7.2cqh, 28px); display: inline-flex; align-items: center; justify-content: center; gap: 15px;
    width: clamp(290px, 120.7cqh, 486px); height: clamp(42px, 15.2cqh, 60px); box-sizing: border-box; border-radius: clamp(9px, 3cqh, 12px);
    background: linear-gradient(180deg, #7D42FB 0%, #6A2DF3 48%, #5B24D9 100%); color: #fff; text-decoration: none; white-space: nowrap;
    font-size: clamp(16px, 5.8cqh, 23px); font-weight: 600; line-height: 1;
    box-shadow: inset 0 1px 0 #FFFFFF45, 0 0 0 1px #9B6BFF59, 0 0 26px #7A4CF066;
    transition: box-shadow 110ms ease-out, filter 110ms ease-out;
}
.mg-open:hover[b-kjn3prz6w7] { background: linear-gradient(180deg, #8A52FF 0%, #763AF8 48%, #6530E2 100%); box-shadow: inset 0 1px 0 #FFFFFF55, 0 0 0 1px #B08AFF66, 0 0 32px #8A5AFAA6; }
.mg-open:active[b-kjn3prz6w7] { filter: brightness(.94); }
.mg-open:focus-visible[b-kjn3prz6w7] { outline: 2px solid #E6CFFF; outline-offset: 3px; }
.mg-open[b-kjn3prz6w7]  .icon { flex: 0 0 auto; width: clamp(18px, 6cqh, 24px); height: clamp(18px, 6cqh, 24px); stroke-width: 2.2; }

/* ───────────── More games, more fun: three cards that are only coming soon ───────────── */

.mg-more[b-kjn3prz6w7] {
    margin: 24px 0 0; font-size: 35px; font-weight: 700; line-height: 1.15; letter-spacing: -0.3px; white-space: nowrap;
    color: #F7F5FD; text-shadow: 0 2px 14px #00000080;
}
.mg-cards[b-kjn3prz6w7] {
    margin-top: 12px; flex: 275 1 0px; min-height: 190px; max-height: calc((100cqw - 105px) * 0.195);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px;
}
/* a card is no button: nothing changes under the mouse, it takes no focus and no click */
.mg-soon[b-kjn3prz6w7] {
    position: relative; min-width: 0; overflow: hidden; border-radius: 16px; isolation: isolate; container-type: inline-size;
    background: linear-gradient(160deg, #2C1B63 0%, #150C33 100%); box-shadow: 0 10px 30px #00000059;
    cursor: default; user-select: none; -webkit-user-select: none;
}
.mg-soon[b-kjn3prz6w7]::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    border: 1.5px solid #A386F6; box-shadow: inset 0 1px 0 #FFFFFF26;
}
/* the picture fills the card (a little past its edge, so the cut's own edge never shows) */
.mg-soon-art[b-kjn3prz6w7] {
    position: absolute; left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); z-index: 0;
    object-fit: cover; object-position: 50% 40%; pointer-events: none;
}
.mg-soon-shade[b-kjn3prz6w7] {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #0A061800 0%, #0A061800 44%, #0A0618B3 72%, #0A0618F2 100%);
}
.mg-soon-badge[b-kjn3prz6w7] {
    position: absolute; z-index: 2; top: 13px; right: 14px; display: inline-flex; align-items: center; gap: 9px; height: 31px;
    padding: 0 14px 0 11px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid #8C86FA; background: #1D2A57E6;
    box-shadow: 0 4px 14px #00000059; color: #F4F5FF; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1;
    white-space: nowrap;
}
.mg-soon-badge[b-kjn3prz6w7]  .icon { flex: 0 0 15px; stroke-width: 2.1; }
.mg-soon-words[b-kjn3prz6w7] {
    position: absolute; z-index: 2; left: clamp(16px, 6.2cqw, 32px); right: clamp(12px, 5cqw, 28px); bottom: clamp(12px, 4.1cqw, 22px);
    display: flex; flex-direction: column;
}
.mg-soon-name[b-kjn3prz6w7] { font-size: clamp(18px, 5.6cqw, 30px); font-weight: 700; line-height: 1.2; color: #FFFFFF; text-shadow: 0 2px 10px #000000B3; }
.mg-soon-line[b-kjn3prz6w7] { margin-top: 2px; font-size: clamp(12.5px, 3.55cqw, 18px); line-height: 1.35; color: #ECE7F8; text-shadow: 0 1px 6px #000000CC; }

@keyframes mg-in-b-kjn3prz6w7 { from { opacity: 0; } to { opacity: 1; } }

/* ───────────── a narrow window: the art over the words, the page scrolls ───────────── */

@container mgpane (max-width: 954.98px) {
    .mg-feature[b-kjn3prz6w7] { flex: none; min-height: 0; max-height: none; container-type: inline-size; display: flex; flex-direction: column; }
    /* the banner's calm half across the card's width, behind the art at its top; the words below stand on the dark */
    .mg-feature-ground[b-kjn3prz6w7]::before { background: url("art/games/gemstonero/banner.jpg") 0% 0% / 200% auto no-repeat; }
    .mg-feature-ground[b-kjn3prz6w7]::after {
        background:
            linear-gradient(180deg, #0C062000 0%, #0C062000 34%, #0F0927D9 58%, #0F0927F5 100%),
            linear-gradient(#5A1FC02E, #5A1FC02E);
    }
    .mg-art-box[b-kjn3prz6w7] { --mg-art: top; position: relative; inset: auto; width: 100%; height: clamp(180px, 56cqw, 290px); overflow: hidden; border-radius: 20px 20px 0 0; }
    .mg-badge[b-kjn3prz6w7] { top: 14px; right: 14px; height: 34px; font-size: 13px; }
    .mg-words[b-kjn3prz6w7] { position: relative; inset: auto; z-index: 2; padding: 0 28px 28px; }
    .mg-kicker[b-kjn3prz6w7] { gap: 12px; font-size: 15px; }
    .mg-kicker[b-kjn3prz6w7]  .icon { width: 24px; height: 24px; }
    .mg-feature-title[b-kjn3prz6w7] { margin-top: 5px; font-size: 52px; }
    .mg-feature-line[b-kjn3prz6w7] { margin-top: 7px; font-size: 19px; white-space: normal; }
    .mg-chips[b-kjn3prz6w7] { margin-top: 14px; gap: 9px; }
    .mg-chip[b-kjn3prz6w7] { height: 37px; padding: 0 25px; font-size: 16px; }
    .mg-every[b-kjn3prz6w7] { margin-top: 15px; gap: 15px; font-size: 16px; }
    .mg-every[b-kjn3prz6w7]  .icon { width: 20px; height: 20px; }
    .mg-open[b-kjn3prz6w7] { margin-top: 22px; width: min(100%, 420px); height: 52px; border-radius: 11px; font-size: 20px; }
    .mg-open[b-kjn3prz6w7]  .icon { width: 21px; height: 21px; }
    .mg-cards[b-kjn3prz6w7] { flex: none; min-height: 0; max-height: none; }
    .mg-soon[b-kjn3prz6w7] { aspect-ratio: 1.71; }
}
@container mgpane (max-width: 834.98px) {
    .mg-cards[b-kjn3prz6w7] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* a phone */
@container mgpane (max-width: 599.98px) {
    .mg-board[b-kjn3prz6w7] { padding: 16px 16px 24px; }
    .mg-title[b-kjn3prz6w7] { margin-left: 0; font-size: 36px; letter-spacing: -0.3px; }
    .mg-pane.with-menu .mg-title[b-kjn3prz6w7] { margin-left: 42px; }
    .mg-subtitle[b-kjn3prz6w7] { margin-top: 6px; font-size: 16px; }
    .mg-feature[b-kjn3prz6w7] { margin-top: 16px; border-radius: 18px; }
    .mg-art-box[b-kjn3prz6w7] { border-radius: 18px 18px 0 0; }
    .mg-badge[b-kjn3prz6w7] { top: 12px; right: 12px; height: 31px; padding: 0 15px 0 14px; gap: 11px; font-size: 12px; }
    .mg-words[b-kjn3prz6w7] { padding: 0 18px 20px; }
    .mg-kicker[b-kjn3prz6w7] { gap: 10px; font-size: 13.5px; }
    .mg-kicker[b-kjn3prz6w7]  .icon { width: 21px; height: 21px; }
    .mg-feature-title[b-kjn3prz6w7] { font-size: 36px; white-space: normal; }
    .mg-feature-line[b-kjn3prz6w7] { font-size: 15.5px; }
    .mg-chips[b-kjn3prz6w7] { margin-top: 12px; gap: 8px; }
    .mg-chip[b-kjn3prz6w7] { height: 33px; padding: 0 18px; font-size: 15px; }
    .mg-every[b-kjn3prz6w7] { margin-top: 13px; gap: 12px; font-size: 14.5px; white-space: normal; }
    .mg-every[b-kjn3prz6w7]  .icon { width: 18px; height: 18px; }
    .mg-open[b-kjn3prz6w7] { margin-top: 18px; width: 100%; height: 48px; font-size: 18px; }
    .mg-more[b-kjn3prz6w7] { margin-top: 22px; font-size: 25px; white-space: normal; }
    .mg-cards[b-kjn3prz6w7] { margin-top: 10px; }
    .mg-soon-badge[b-kjn3prz6w7] { top: 10px; right: 10px; height: 28px; font-size: 11.5px; padding: 0 12px 0 10px; gap: 7px; }
}

/* ───────────── Tower Duel's card whole in a low window (TD-CHAT part 3) ───────────── */

/* docs\minigames\tower-duel\fresh-eyes-3.md 2.4: while Tower Duel's card shows (the board's td-open), a desktop window too low
   for the row under the featured card (the title, its line, the featured card at its least 280, More games and the row at its
   least 190: 704 px; a 1366 x 768 laptop's browser gives the chat about 605) puts "More games, more fun" and its row first,
   where the featured card stood, and the featured card under them, its art (12 % of its 280 over its upper edge) clear of the
   row: all of Tower Duel's card shows without a scroll. Every part keeps its size; at every other size, and whenever Tower Duel
   is not open to the player, the page is exactly as it was. */
@container mgpane (min-width: 955px) and (max-height: 703.98px) {
    .mg-board.td-open > .mg-more[b-kjn3prz6w7] { order: 1; margin-top: 20px; }
    .mg-board.td-open > .mg-cards[b-kjn3prz6w7] { order: 2; }
    .mg-board.td-open > .mg-feature[b-kjn3prz6w7] { order: 3; margin-top: 58px; }
}

/* a finger (a phone or a tablet: a coarse pointer): the drawer's button, the chips and the big link at least 44 high
   (wheel-polish, 2026-10-12; after the container rules, so it wins) */
@media (pointer: coarse) {
    .mg-menu[b-kjn3prz6w7] { width: 44px; height: 44px; }
    .mg-chip[b-kjn3prz6w7] { height: 44px; }
    .mg-open[b-kjn3prz6w7] { min-height: 48px; }
}
/* /Chat/OnboardingPane.razor.rz.scp.css */
/* "Choose your communities" (onboard1, Chat\OnboardingPane.razor): the community picker in the start's place. The cards are
   Find communities' (app.css, .find-*), each a checkbox: its mark at the top right (an empty ring; once chosen a disc of the
   community's colour with a tick), a ring of the community's colour and a little more of its light around a chosen card, a
   card the account may not join a little dimmed with the danger line at its foot. Then the player name, Join and the quiet
   way out. Colours only from tokens.g.css; nothing wider than the window (a phone's 390 too).
   weblook1 (WL-PANES, docs\chat\web\look\panes.md): the picker stands on Syphon's calm ground (.pane-ground on its
   scroller) in a column of 1040 in the middle; each card on the card family's panel with its community's light and a deep
   shadow, a chosen one ringed and lit in its colour; the name, Join (glowing) and the way out in one hero card; the sign-in's
   field. Hover only changes colours and shadows (a pane never moves by itself). */
.onb-body[b-vqsdqptz1j] { max-width: 1040px; margin: 0 auto; padding: 28px 24px 40px; }
.onb-lead[b-vqsdqptz1j] { margin: 0 0 18px; max-width: 720px; font-size: var(--ui-type-lead, 15.2px); line-height: 22px; color: var(--ui-text-lead, #A5AFDC); }
.onb-grid[b-vqsdqptz1j] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }

/* a card is a button: Find communities' card, read from the left, with the parts its divs had as blocks */
.onb-card[b-vqsdqptz1j] {
    width: 100%; min-width: 0; text-align: left; cursor: pointer; border-radius: 14px;
    background: radial-gradient(ellipse 85% 75% at 0% 0%, color-mix(in srgb, var(--card-accent, #6C49F9) 18%, transparent), transparent 72%), var(--ui-panel, #121220);
    border-color: var(--ui-edge, #FFFFFF1A); box-shadow: 0 18px 44px #00000066, var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
    transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.onb-card .find-art-frame[b-vqsdqptz1j], .onb-card .find-head-text[b-vqsdqptz1j], .onb-card .kicker[b-vqsdqptz1j], .onb-card .find-name[b-vqsdqptz1j] { display: block; }
.onb-card .find-card-head[b-vqsdqptz1j] { padding-right: 30px; }
.onb-card .find-foot[b-vqsdqptz1j] { min-height: 22px; }
.onb-card:hover:not([aria-disabled="true"])[b-vqsdqptz1j] {
    border-color: color-mix(in srgb, var(--card-accent, #6C49F9) 45%, #FFFFFF26);
    box-shadow: 0 18px 44px #00000066, 0 0 0 4px color-mix(in srgb, var(--card-accent, #6C49F9) 8%, transparent), var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.onb-card.chosen[b-vqsdqptz1j] {
    border-color: var(--card-accent, #6C49F9);
    box-shadow: inset 0 0 0 1px var(--card-accent, #6C49F9), 0 0 0 4px color-mix(in srgb, var(--card-accent, #6C49F9) 14%, transparent),
                0 18px 48px color-mix(in srgb, var(--card-accent, #6C49F9) 24%, #00000066);
    background: radial-gradient(ellipse 85% 75% at 0% 0%, color-mix(in srgb, var(--card-accent, #6C49F9) 30%, transparent), transparent 75%), var(--ui-panel, #121220);
}
.onb-card.chosen:hover[b-vqsdqptz1j] { border-color: var(--card-accent, #6C49F9); }
.onb-card[aria-disabled="true"][b-vqsdqptz1j] { cursor: default; }
.onb-card.banned[b-vqsdqptz1j] { opacity: .85; }

/* the checkbox's mark */
.onb-mark[b-vqsdqptz1j] {
    position: absolute; top: 13px; right: 13px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--brush-border-strong, #3A4659); background: var(--brush-syphon-field, #0A0A16E6); color: #fff;
    transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.onb-card:hover:not([aria-disabled="true"]) .onb-mark[b-vqsdqptz1j] { border-color: var(--brush-text-muted, #8999AA); }
.onb-card.chosen .onb-mark[b-vqsdqptz1j] { border-color: var(--card-accent, #6C49F9); background: var(--card-accent, #6C49F9); box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent, #6C49F9) 60%, transparent); }
.onb-card.banned .onb-mark[b-vqsdqptz1j] { visibility: hidden; }
.onb-mark[b-vqsdqptz1j]  .icon { stroke-width: 2.8; }

/* the line at a card's foot: the account may not join, or this press did not join it */
.onb-state[b-vqsdqptz1j] { display: inline-flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 17px; color: var(--brush-danger-text, #FFB9C1); }
.onb-state[b-vqsdqptz1j]  .icon { flex: 0 0 auto; margin-top: 1px; }

/* the player name, Join and the way out: one hero card (app.css .hero-card), the sign-in's field */
.onb-form[b-vqsdqptz1j] { margin-top: 28px; gap: 6px; }
.onb-label[b-vqsdqptz1j] { font-size: 13.5px; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB); }
.onb-field[b-vqsdqptz1j] { height: 42px; background: var(--brush-syphon-field, #0A0A16E6); border-color: var(--ui-edge-field, #FFFFFF26); }
.onb-field:hover[b-vqsdqptz1j] { border-color: #FFFFFF40; }
.onb-field:focus-within[b-vqsdqptz1j] { border-color: var(--brush-syphon-lilac, #A778FA); }
.onb-field.bad[b-vqsdqptz1j] { border-color: var(--brush-danger, #F25A6C); }
.onb-hint[b-vqsdqptz1j] { overflow-wrap: anywhere; }
.onb-actions[b-vqsdqptz1j] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.onb-join[b-vqsdqptz1j] { min-width: 230px; max-width: 100%; }
.onb-join .spinner[b-vqsdqptz1j] { border-color: #FFFFFF55; border-top-color: #fff; }
.onb-out[b-vqsdqptz1j] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; padding-top: 12px;
    border-top: 1px solid var(--ui-edge-faint, #FFFFFF12);
}
.onb-nogames[b-vqsdqptz1j] { font-size: 13.5px; }
.onb-out-hint[b-vqsdqptz1j] { font-size: 12.5px; line-height: 17px; color: var(--ui-text-quiet, #8999AA); }

/* what the page's live region says is for a screen reader only */
.onb-live[b-vqsdqptz1j] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* a phone: the page's gutter of 16, the cards as high as their words (one a row, so no row to keep level), Join across the
   width */
.chat-frame.narrow .onb-body[b-vqsdqptz1j] { padding: 18px 16px 28px; }
.chat-frame.narrow .onb-card[b-vqsdqptz1j] { min-height: 0; }
.chat-frame.narrow .onb-join[b-vqsdqptz1j] { width: 100%; min-width: 0; }
/* a finger (a phone, a tablet): the box's words at 16 (under that Safari zooms the page in when the box is tapped), Join and
   the way out 44 high */
@media (pointer: coarse) {
    .onb-field[b-vqsdqptz1j] { height: 46px; }
    .onb-field input[b-vqsdqptz1j] { font-size: 16px; }
    .onb-join[b-vqsdqptz1j] { height: 46px; }
    .onb-nogames[b-vqsdqptz1j] { min-height: 44px; }
}
/* /Chat/PokerInviteCard.razor.rz.scp.css */
/* Syphon Poker's invitation card (PK-A4): the family's small card, as Tower Duel's (TowerDuelInviteCard.razor.css) and the
   toasts' (weblook1), with the card's corners, above a private conversation's message box. Values from the shared variables
   only. */
.pkchat-card[b-2r5lljznph] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 16px 2px;
    padding: 12px 14px 12px 16px;
    border-radius: var(--ui-radius-card, 16.5px);
    border: 1px solid var(--ui-edge, #FFFFFF1A);
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light, #7C3AED3D) 0%, transparent 100%),
        var(--ui-panel, #121220);
    box-shadow: var(--ui-shadow-toast, 0 18px 44px #00000099), var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.pkchat-card.success[b-2r5lljznph] {
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light-success, #3DE6A324) 0%, transparent 100%),
        var(--ui-panel, #121220);
}
.pkchat-card > .notice-disc[b-2r5lljznph] { flex: none; }
.pkchat-words[b-2r5lljznph] { flex: 1 1 auto; min-width: 0; }
.pkchat-kicker[b-2r5lljznph] {
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pkchat-line[b-2r5lljznph] {
    margin-top: 1px;
    font-size: var(--ui-type-note, 14px);
    line-height: var(--ui-line-note, 20px);
    font-weight: 600;
    color: var(--brush-text, #FFFFFF);
    overflow-wrap: anywhere;
}
/* the other player's server badge: the staff mark's chip (radius 4, 11.5 semibold) in Syphon's soft violet; verified: its
   edge lit */
.pkchat-badge[b-2r5lljznph] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px 2px;
    border-radius: 4px;
    border: 1px solid var(--ui-edge, #FFFFFF1A);
    background: var(--ui-light, #7C3AED3D);
    color: var(--brush-text, #FFFFFF);
    font-size: 11.5px;
    font-weight: 600;
    line-height: normal;
    vertical-align: 1px;
}
.pkchat-badge.verified[b-2r5lljznph] { border-color: var(--ui-light-success, #3DE6A3AA); }
.pkchat-quiet[b-2r5lljznph] {
    margin-top: 1px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    overflow-wrap: anywhere;
}
.pkchat-timer[b-2r5lljznph] { margin-top: 2px; font-variant-numeric: tabular-nums; }
.pkchat-actions[b-2r5lljznph] { flex: none; display: flex; align-items: center; gap: 8px; }
/* the main answer glows at rest, as a dialog band's (weblook1) */
.pkchat-actions > .btn.primary:not(:disabled)[b-2r5lljznph]::before { opacity: .55; }
.pkchat-actions > .btn.primary:hover:not(:disabled)[b-2r5lljznph]::before { opacity: 1; }

/* on a phone (the browser says Android or iOS) the answers are a finger's height */
.pkchat-card.phone .pkchat-actions > .btn[b-2r5lljznph],
.pkchat-card.phone .pkchat-actions > .icon-button[b-2r5lljznph] { min-height: 44px; }
.pkchat-card.phone .pkchat-actions > .icon-button[b-2r5lljznph] { min-width: 44px; }

/* a phone's width: the answers under the words, as wide as the card */
@media (max-width: 520px) {
    .pkchat-card[b-2r5lljznph] { flex-wrap: wrap; margin: 8px 10px 2px; }
    .pkchat-words[b-2r5lljznph] { flex-basis: calc(100% - 46px); }
    .pkchat-actions[b-2r5lljznph] { flex-basis: 100%; justify-content: flex-end; }
}
/* /Chat/PokerTableCard.razor.rz.scp.css */
/* A Syphon Poker table shared in a room (PK-INVITE2): Tower Duel's challenge card's family (TowerDuelChallengeCard.razor.css),
   inside a message where its words would stand, at most 560 wide. Values from the shared variables only. */
.pktc-card[b-jh9x91qaki] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 4px 0 2px;
    padding: 11px 14px;
    border-radius: var(--ui-radius-card, 16.5px);
    border: 1px solid var(--ui-edge, #FFFFFF1A);
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light, #7C3AED3D) 0%, transparent 100%),
        var(--ui-panel, #121220);
    box-shadow: var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
/* a closed table's card is quieter */
.pktc-card.closed[b-jh9x91qaki] { opacity: .72; }
/* the poster's picture, the game's small disc on its lower right */
.pktc-picture[b-jh9x91qaki] { position: relative; flex: none; width: 44px; height: 44px; }
.pktc-picture > .notice-disc[b-jh9x91qaki] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--ui-panel, #121220);
}
.pktc-words[b-jh9x91qaki] { flex: 1 1 auto; min-width: 0; }
.pktc-kicker[b-jh9x91qaki] {
    display: flex;
    align-items: center;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    white-space: nowrap;
    overflow: hidden;
}
.pktc-kicker-words[b-jh9x91qaki] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the table's money: Free Play Chips in the quiet chip, Real Zeny in the warm one */
.pktc-money[b-jh9x91qaki] {
    flex: none;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px 2px;
    border-radius: 4px;
    border: 1px solid var(--ui-edge, #FFFFFF1A);
    background: var(--brush-hover-light, #FFFFFF14);
    color: var(--brush-text-secondary, #B4C6DB);
    font-size: 11.5px;
    font-weight: 600;
    line-height: normal;
}
.pktc-money.zeny[b-jh9x91qaki] {
    border-color: var(--brush-warning-edge, #F5B54459);
    background: var(--brush-warning-soft, #F5B5441F);
    color: var(--brush-warning-text, #FBDFA6);
}
.pktc-title[b-jh9x91qaki] {
    margin-top: 1px;
    font-size: var(--ui-type-note, 14px);
    line-height: var(--ui-line-note, 20px);
    font-weight: 600;
    color: var(--brush-text, #FFFFFF);
    overflow-wrap: anywhere;
}
.pktc-quiet[b-jh9x91qaki] {
    margin-top: 1px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    overflow-wrap: anywhere;
}
.pktc-by[b-jh9x91qaki] { margin-top: 2px; }
.pktc-closed[b-jh9x91qaki] {
    margin-top: 1px;
    font-size: var(--ui-type-note, 14px);
    line-height: var(--ui-line-note, 20px);
    color: var(--ui-text-quiet, #8999AA);
    overflow-wrap: anywhere;
}
.pktc-actions[b-jh9x91qaki] { flex: none; display: flex; align-items: center; gap: 8px; }
.pktc-actions > .btn.primary:not(:disabled)[b-jh9x91qaki]::before { opacity: .55; }
.pktc-actions > .btn.primary:hover:not(:disabled)[b-jh9x91qaki]::before { opacity: 1; }

/* on a phone Join is a finger's height */
.pktc-card.phone .pktc-actions > .btn[b-jh9x91qaki] { min-height: 44px; }

/* a phone's width: Join under the words, as wide as the card */
@media (max-width: 520px) {
    .pktc-card[b-jh9x91qaki] { flex-wrap: wrap; }
    .pktc-words[b-jh9x91qaki] { flex-basis: calc(100% - 56px); }
    .pktc-actions[b-jh9x91qaki] { flex-basis: 100%; justify-content: flex-end; }
}
/* /Chat/ReactionChip.razor.rz.scp.css */
/* A reaction and who reacted (reactors1, chat\REACTORS-CONTRACT.md; Chat\ReactionChip.razor). The pill keeps its look
   (app.css, .reaction); its slot takes no room of its own, so the pills wrap as before. A finger's long press never selects
   the count or calls up the system's own menu. One that cannot be used (a private conversation that takes no words now)
   keeps its look and shows who reacted.

   The card: the menus' glass (app.css, .menu: the sign-in's panel at 0.92 with its blur, the faint violet corner light, the
   1 px light edge with the lit top, the menu's deep shadow, corners of 10), standing 6 above the reaction (under it where
   there is no room above), its left edge on the reaction's, 8 from the window's sides; over the conversation and its
   flyouts (64), under the profile card. The emoji 40, then up to three pictures of 22 that overlap by 6, each with a ring
   of the panel's colour (a blocked player's a quiet disc with the ban mark), and the line (13.5 on 19); See who reacted
   under them, lilac as every link. It fades in from 4 towards the reaction (none with reduced motion). */
.reaction-slot[b-5yx66bcs4s] { display: contents; }
.reaction[b-5yx66bcs4s] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.reaction.off[b-5yx66bcs4s] { cursor: default; }
.reactor-card[b-5yx66bcs4s] {
    position: fixed; z-index: 64; min-width: 200px; width: max-content; max-width: min(288px, calc(100vw - 16px));
    padding: 10px 12px 10px 10px; gap: 8px; cursor: default; white-space: normal; text-align: left;
}
.reactor-card[data-side="above"][b-5yx66bcs4s] { animation-name: menu-in-up; }
.reactor-card-head[b-5yx66bcs4s] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.reactor-card-emoji[b-5yx66bcs4s] { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.reactor-card-gg[b-5yx66bcs4s] { --e: 40px; }
.reactor-card-words[b-5yx66bcs4s] { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.reactor-card-faces[b-5yx66bcs4s] { display: flex; align-items: center; padding-left: 2px; }
.reactor-card-face[b-5yx66bcs4s] { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--ui-panel-top); }
.reactor-card-face + .reactor-card-face[b-5yx66bcs4s] { margin-left: -6px; }
.reactor-card-face.blocked[b-5yx66bcs4s] {
    width: 22px; height: 22px; align-items: center; justify-content: center;
    background: var(--brush-hover-light, #FFFFFF14); color: var(--ui-text-quiet);
}
.reactor-card-face.blocked[b-5yx66bcs4s]  .icon { width: 11px; height: 11px; }
.reactor-card-line[b-5yx66bcs4s] { font-size: var(--ui-type-small); line-height: var(--ui-line-small); color: var(--brush-text, #F4F3F9); overflow-wrap: anywhere; }
.reactor-card-see[b-5yx66bcs4s] { align-self: flex-start; margin-left: 52px; font-size: 13px; line-height: 18px; }
.reactor-card-see:focus-visible[b-5yx66bcs4s] { outline-offset: 2px; border-radius: 3px; }
/* /Chat/ReactorsPanel.razor.rz.scp.css */
/* The Reactions panel (reactors1, chat\REACTORS-CONTRACT.md; Chat\ReactorsPanel.razor) in the dialog family (weblook1,
   app.css: the backdrop's violet tint and blur, the sign-in's panel, edge, corners of 16.5 and deep shadow, the lit top
   edge, its rise and fade), standing over the chat (66, 67) and under the profile card a row opens (70, 71), the card's
   menus (75, 76) and every dialog (80 up). 440 wide and at most 600 high: the title (the dialog's own, 22.6 semibold) with
   the close button at its right, the tabs in the tabs' one look (app.css, .tabs: All, then each emoji 20 with its count),
   and the rows in a list of their own that scrolls; a quiet line while a page comes, the lilac line to try again.

   A row: 46 high, corners of 10, 10 inside, the picture 32 and 12 to the name (14.4 semibold) in the player's own colour,
   the tag after a name that stands twice (app.css, .tag), the player's own marked You (a chip in Syphon's violet), and in
   All the emoji each chose (18). Under the mouse or the keyboard Syphon's violet (a menu entry's); a player the viewer
   blocked as a quiet disc with the ban mark and quiet italic words, which open nothing.

   The player's own colour, as the profile card takes it (ChatAccent): a game's banner gives that game's colour, Syphon's
   banner Syphon's violet, one of the Vault's own pictures its colour, an uploaded banner or picture its sampled colour (set
   on the row), else the colour of the initial; brought to one middle lightness and lightened for words on the panel, as
   the card's facts are (app.css, --pc and --pc-light).

   On a phone's width: a sheet from the window's foot, the whole width, at most 72 % of the window high, its top corners
   round, a grip at its top, rising 24 into place (none with reduced motion). */
.reactors-backdrop[b-thw9s9ok3l] { z-index: 66; }
.reactors-panel[b-thw9s9ok3l] {
    z-index: 67; width: 440px; max-height: min(600px, calc(100dvh - 48px)); padding: 24px 0 0; gap: 0; overflow: hidden;
    /* a steady height for a few players, so changing tabs does not make it jump */
    min-height: min(400px, calc(100dvh - 48px));
}
.reactors-head[b-thw9s9ok3l] { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 var(--ui-card-pad-x); flex: 0 0 auto; }
.reactors-title[b-thw9s9ok3l] { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--ui-type-title); font-weight: 600; line-height: 1.3; }
.reactors-close[b-thw9s9ok3l] { margin-right: -2px; }
.reactors-tabs[b-thw9s9ok3l] { margin: 16px var(--ui-card-pad-x) 8px; max-width: calc(100% - 2 * var(--ui-card-pad-x)); }
.reactors-tab[b-thw9s9ok3l] { gap: 6px; padding: 0 12px; }
.reactors-tab .emoji[b-thw9s9ok3l] { width: 20px; height: 20px; object-fit: contain; }
.reactors-tab .tab-count[b-thw9s9ok3l] { margin-left: 0; }
.reactors-tab .gg[b-thw9s9ok3l] { --e: 20px; }
.reactors-list[b-thw9s9ok3l] {
    flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 16px;
    display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: #2E2A48 transparent;
}
.reactor-row[b-thw9s9ok3l] {
    --rc-raw: var(--g1, #6C49F9);
    --rc: hsl(from var(--rc-raw) h clamp(55, s, 90) 62);
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; flex: 0 0 auto; padding: 0 10px;
    border-radius: var(--ui-radius-menu); text-align: left; color: var(--brush-text, #F4F3F9);
    transition: background-color var(--fast) var(--ease-out);
}
.reactor-row:hover:not(:disabled)[b-thw9s9ok3l], .reactor-row:focus-visible[b-thw9s9ok3l] { background: var(--ui-hover); }
.reactor-row:active:not(:disabled)[b-thw9s9ok3l] { background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 32%, transparent); }
.reactor-row:focus-visible[b-thw9s9ok3l] { outline-offset: -2px; }
.reactor-row.blocked[b-thw9s9ok3l] { cursor: default; }
.reactor-text[b-thw9s9ok3l] { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; }
.reactor-name[b-thw9s9ok3l] {
    min-width: 0; font-size: 14.4px; line-height: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: color-mix(in srgb, var(--rc) 62%, #fff);
}
.reactor-row.blocked .reactor-name[b-thw9s9ok3l] { color: var(--ui-text-quiet); font-weight: 400; font-style: italic; }
.reactor-text > .tag[b-thw9s9ok3l] { flex: 0 0 auto; font-size: 13px; margin-left: 6px; }
.reactor-you[b-thw9s9ok3l] {
    flex: 0 0 auto; background: color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 24%, transparent);
    color: var(--brush-syphon-lilac-hot, #C4A6FC);
}
.reactor-emoji[b-thw9s9ok3l] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; }
.reactor-emoji .emoji[b-thw9s9ok3l] { width: 18px; height: 18px; object-fit: contain; }
.reactor-emoji .gg[b-thw9s9ok3l] { --e: 18px; }
.reactor-ban[b-thw9s9ok3l] {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--brush-hover-light, #FFFFFF14); color: var(--ui-text-quiet);
}
.reactor-ban[b-thw9s9ok3l]  .icon { width: 15px; height: 15px; }
.reactors-note[b-thw9s9ok3l] { display: flex; align-items: center; gap: 8px; padding: 10px; font-size: 13px; line-height: 18px; color: var(--ui-text-quiet); }
button.reactors-note[b-thw9s9ok3l] { color: var(--brush-accent-label, #978AFB); font-weight: 600; text-align: left; }

/* the player's own colour where the stylesheet knows it: one of the Vault's pictures, then (it wins) a game's or Syphon's
   banner; an upload's sampled colour comes on the row itself */
.reactor-row[data-avatar="vault"][b-thw9s9ok3l] { --rc-raw: var(--accent-avatar-vault, #6F53D1); }
.reactor-row[data-avatar="crystal"][b-thw9s9ok3l] { --rc-raw: var(--accent-avatar-crystal, #4852B0); }
.reactor-row[data-avatar="guardian"][b-thw9s9ok3l] { --rc-raw: var(--accent-avatar-guardian, #4F428B); }
.reactor-row[data-avatar="fox"][b-thw9s9ok3l] { --rc-raw: var(--accent-avatar-fox, #A355D0); }
.reactor-row[data-banner="gemstonero"][b-thw9s9ok3l] { --rc-raw: var(--accent-game-gemstonero, #9B5CFF); }
.reactor-row[data-banner="loki"][b-thw9s9ok3l] { --rc-raw: var(--accent-game-loki, #FF66CB); }
.reactor-row[data-banner="freya"][b-thw9s9ok3l] { --rc-raw: var(--accent-game-freya, #E9B657); }
.reactor-row[data-banner="gemstonewow"][b-thw9s9ok3l] { --rc-raw: var(--accent-game-gemstonewow, #58B4FF); }
.reactor-row[data-banner="defiantscape"][b-thw9s9ok3l] { --rc-raw: var(--accent-game-defiantscape, #2F6BFF); }
.reactor-row[data-banner="syphon"][b-thw9s9ok3l] { --rc-raw: var(--color-syphon-violet, #7C3AED); }

/* a phone: the sheet from the window's foot */
.reactors-panel.sheet[b-thw9s9ok3l] {
    left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-width: 100%; max-height: min(72dvh, calc(100dvh - 48px)); min-height: 0;
    padding-top: 10px; border-bottom: 0; border-radius: var(--ui-radius-card) var(--ui-radius-card) 0 0; animation: reactors-sheet-in-b-thw9s9ok3l var(--slow) var(--ease-out);
}
.reactors-panel.sheet .reactors-list[b-thw9s9ok3l] { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.reactors-panel.sheet .reactors-head[b-thw9s9ok3l] { padding-left: var(--ui-card-pad-x-phone); }
.reactors-panel.sheet .reactors-tabs[b-thw9s9ok3l] { margin-left: var(--ui-card-pad-x-phone); margin-right: var(--ui-card-pad-x-phone); max-width: calc(100% - 2 * var(--ui-card-pad-x-phone)); }
.reactors-panel.sheet .reactors-title[b-thw9s9ok3l] { font-size: 20px; }
.reactors-panel.sheet .reactor-row[b-thw9s9ok3l] { min-height: 50px; }
.reactors-grip[b-thw9s9ok3l] { display: block; width: 40px; height: 4px; flex: 0 0 4px; border-radius: 2px; margin: 0 auto 14px; background: var(--ui-edge-field, #FFFFFF26); }
@keyframes reactors-sheet-in-b-thw9s9ok3l { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
    .reactors-panel:not(.sheet)[b-thw9s9ok3l] { padding-top: 20px; }
}
/* /Chat/ReferralFriendCard.razor.rz.scp.css */
/* A friend's card (Chat\ReferralFriendCard.razor; refer1, chat\WHEEL-REFERRALS-CONTRACT.md section 9.3): the invite card's
   gold-edged glass in the mint of Invite & Earn: a dark purple ground with a mint light at its top left, the edge in the mint's
   shade, the mint Poring with its envelope on the left, its words on the right (the title in warm white, the code's line, Use
   code as the app's own primary button). The compact card of the wheel's page ("Your game account") is a little smaller. */
.rf-card[b-cycj3dac5u] {
    position: relative; display: flex; gap: 14px; align-items: flex-start; box-sizing: border-box; padding: 14px 16px 15px 14px; border-radius: 14px;
    background:
        radial-gradient(ellipse 70% 90% at 0% 0%, #8EE6C02E 0%, #8EE6C000 70%),
        linear-gradient(135deg, #1D1A44F2 0%, #141231F2 100%);
    border: 1.5px solid #49B98DB3; box-shadow: inset 0 1px 0 #FFFFFF14, 0 0 22px #49B98D29;
    color: var(--brush-text, #F4F3F9); text-align: left;
}
.rf-art[b-cycj3dac5u] { flex: 0 0 64px; width: 64px; height: 65px; margin-top: 2px; filter: drop-shadow(0 4px 8px #00000080); }
.rf-art[b-cycj3dac5u]  svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rf-words[b-cycj3dac5u] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rf-title[b-cycj3dac5u] { margin: 0; font-size: 16px; font-weight: 700; line-height: 21px; color: #FFF4D6; }
.rf-line[b-cycj3dac5u] { margin: 3px 0 0; font-size: 14px; line-height: 19px; color: #DCD5EE; overflow-wrap: anywhere; }
.rf-signin-line[b-cycj3dac5u] { margin: 8px 0 0; font-size: 13.5px; line-height: 18px; color: #9DF0CC; }
.rf-use[b-cycj3dac5u], .rf-signin[b-cycj3dac5u] { margin-top: 11px; gap: 8px; }
.rf-use[b-cycj3dac5u]  .icon { color: #FFE19A; }
.rf-problem[b-cycj3dac5u] { display: flex; gap: 7px; align-items: flex-start; margin: 9px 0 0; font-size: 13.5px; line-height: 18px; color: var(--brush-warning-text, #FBDFA6); }
.rf-problem.info[b-cycj3dac5u] { color: var(--brush-text-secondary, #B4C6DB); }
.rf-problem.match[b-cycj3dac5u] { color: #F5C26B; }
.rf-problem[b-cycj3dac5u]  .icon { flex: 0 0 14px; margin-top: 2px; }
.rf-other[b-cycj3dac5u] { margin-top: 9px; font-size: 13px; color: var(--brush-accent-label, #978AFB); }

.rf-card.compact[b-cycj3dac5u] { gap: 11px; padding: 11px 12px 12px 11px; border-radius: 12px; }
.rf-card.compact .rf-art[b-cycj3dac5u] { flex-basis: 48px; width: 48px; height: 49px; }
.rf-card.compact .rf-title[b-cycj3dac5u] { font-size: 14.5px; line-height: 19px; }
.rf-card.compact .rf-line[b-cycj3dac5u] { font-size: 13px; line-height: 17px; }
.rf-card.compact .rf-signin-line[b-cycj3dac5u] { margin-top: 6px; font-size: 12.5px; line-height: 16px; }
.rf-card.compact .rf-use[b-cycj3dac5u], .rf-card.compact .rf-signin[b-cycj3dac5u] { margin-top: 9px; }

@media (pointer: coarse) {
    .rf-use[b-cycj3dac5u], .rf-signin[b-cycj3dac5u] { min-height: 44px; }
    .rf-other[b-cycj3dac5u] { min-height: 36px; }
}
/* /Chat/ReferralTile.razor.rz.scp.css */
/* The Invite & Earn tile (Chat\ReferralTile.razor; refer1, chat\WHEEL-REFERRALS-CONTRACT.md section 9.1): on the wheel's night
   beside the FREE SPINS sign, as the sign stands there: no box of its own, the mint Poring with its envelope at the top, its
   words under it in the wheel's warm white and the mint of the Poring, each with the night's shadow. js\wheel.js places it and
   gives it its Poring's width (--tile-p, the sign's), so it grows and shrinks with the sign; the words never get smaller than a
   phone can read. A hand under the mouse; under the mouse and with the keyboard's focus the Poring leans and a soft mint light
   comes behind it, as the sign's gold one; the keyboard's ring a little outside. A small bob now and then while the page is
   new, as the sign's (three times in its first half minute, a little later than the sign's), never with less motion. */
.ref-tile[b-j40lgj9z1r] {
    --tile-p: 100px;
    position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box;
    margin: 0; padding: 0; border: 0; border-radius: 16px; background: transparent; color: #FFF4D6; font-family: var(--ui-font);
    cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; outline: none; text-align: center;
    animation: ref-tile-bob-b-j40lgj9z1r 7000ms ease-in-out 2600ms 3 both;
}
.ref-tile:disabled[b-j40lgj9z1r] { cursor: default; animation: none; }
.ref-tile:disabled .ref-tile-art[b-j40lgj9z1r], .ref-tile:disabled .ref-tile-title[b-j40lgj9z1r], .ref-tile:disabled .ref-tile-line[b-j40lgj9z1r] { opacity: .55; }
.ref-tile:focus-visible[b-j40lgj9z1r] { outline: 2px solid #9DF0CC; outline-offset: 4px; }

/* the soft mint light behind the Poring (under the mouse and with the keyboard's focus) */
.ref-tile-glow[b-j40lgj9z1r] {
    position: absolute; left: 50%; top: calc(var(--tile-p) * 0.5); width: calc(var(--tile-p) * 1.25); height: calc(var(--tile-p) * 0.95);
    transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(closest-side, #8EE6C0A6 0%, #8EE6C04D 55%, #8EE6C000 100%);
    transition: opacity 180ms ease-out;
}
.ref-tile:hover:not(:disabled) .ref-tile-glow[b-j40lgj9z1r], .ref-tile:focus-visible .ref-tile-glow[b-j40lgj9z1r] { opacity: 1; }

/* the mint Poring with its envelope (Chat\Poring.razor: 100 x 102), 0.92 of the Poring's width */
.ref-tile-art[b-j40lgj9z1r] {
    position: relative; display: block; flex: 0 0 auto; width: calc(var(--tile-p) * 0.92); height: calc(var(--tile-p) * 0.9384);
    transform-origin: 50% 96%; filter: drop-shadow(0 4px 9px #0000008C);
    transition: transform 180ms cubic-bezier(.2,.8,.3,1.25), filter 180ms ease-out;
}
.ref-tile-art[b-j40lgj9z1r]  svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ref-tile:hover:not(:disabled) .ref-tile-art[b-j40lgj9z1r], .ref-tile:focus-visible .ref-tile-art[b-j40lgj9z1r] {
    transform: rotate(3deg) scale(1.05); filter: drop-shadow(0 4px 9px #0000008C) drop-shadow(0 0 12px #8EE6C080);
}
.ref-tile:active:not(:disabled) .ref-tile-art[b-j40lgj9z1r] { transform: rotate(1deg) scale(.97); }

/* "Invite & Earn" and the line under it */
.ref-tile-title[b-j40lgj9z1r] {
    position: relative; display: block; margin-top: calc(var(--tile-p) * 0.03); max-width: 100%;
    font-size: max(11.5px, calc(var(--tile-p) * 0.15)); font-weight: 700; line-height: 1.08; letter-spacing: .01em; white-space: nowrap;
    color: #FFF4D6; text-shadow: 0 1px 0 #3B147480, 0 2px 10px #000000C0, 0 0 14px #0B071C;
}
.ref-tile-line[b-j40lgj9z1r] {
    position: relative; display: block; margin-top: calc(var(--tile-p) * 0.025); max-width: 100%;
    font-size: max(10.5px, calc(var(--tile-p) * 0.118)); font-weight: 700; line-height: 1.12; white-space: nowrap;
    color: #9DF0CC; text-shadow: 0 1px 8px #000000C8, 0 0 12px #0B071C;
}
/* a server whose wheel is closed: the Poring quieter, "Coming soon" in the wheel's gold */
.ref-tile.closed .ref-tile-art[b-j40lgj9z1r] { filter: grayscale(.55) brightness(.8) drop-shadow(0 4px 9px #0000008C); }
.ref-tile.closed .ref-tile-line[b-j40lgj9z1r] { color: #FFE6A3; text-transform: uppercase; letter-spacing: .08em; }

@keyframes ref-tile-bob-b-j40lgj9z1r {
    0%, 15%, 100% { transform: none; }
    4% { transform: translateY(-7px) rotate(2.5deg); }
    8% { transform: translateY(0) rotate(-1deg); }
    11.5% { transform: translateY(-3px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ref-tile[b-j40lgj9z1r], .ref-tile-art[b-j40lgj9z1r], .ref-tile-glow[b-j40lgj9z1r] { animation: none; transition: none; }
}
/* /Chat/SecurityCodeDialog.razor.rz.scp.css */
/* The security code (webe2e1) in the sign-in's look (weblook1, WL-SETTINGS; docs\chat\web\look\settings.md), on the dialog
   family's frame: its 12 groups of 5 in three rows of four, each in a cell of Syphon's deep field as a device's code is (the
   1 px edge, corners of 8, a lit top edge; the code's own type, every digit as wide as the next, 19 on a computer, 17 on a
   phone, three to a row under 340); the two ways to compare, each with its lilac mark in the middle of a quiet disc;
   verified as the sign-in's green line. */
.security-digits[b-xne9z57s23] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: space-between; gap: 8px; margin-top: 6px; position: relative;
    padding: 0; border: 0; border-radius: 0; background: none;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; font-size: 19px; line-height: 26px;
    color: var(--brush-syphon-text, #F8F8FF);
}
.security-digits > span[b-xne9z57s23] {
    display: flex; align-items: center; justify-content: center; padding: 8px 4px; white-space: nowrap; border-radius: var(--ui-radius-field, 8px);
    background: var(--brush-syphon-field, #0A0A16E6); border: 1px solid var(--ui-edge, #FFFFFF1A); box-shadow: inset 0 1px 0 #FFFFFF0D;
}
.security-how[b-xne9z57s23] { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; font-size: 13.5px; line-height: 19px; color: var(--brush-text-secondary, #B4C6DB); position: relative; }
.security-how > div[b-xne9z57s23] { display: flex; align-items: center; gap: 10px; }
.security-how-mark[b-xne9z57s23] {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ui-note, #FFFFFF0A); border: 1px solid var(--ui-edge-faint, #FFFFFF12); color: var(--brush-syphon-lilac, #A778FA);
}
/* the mark's icon in the middle of its disc, in the disc's lilac */
.security-how-mark[b-xne9z57s23]  .icon { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; color: inherit; }
.security-verified[b-xne9z57s23] {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--ui-radius-menu, 10px); font-size: 14px; line-height: 20px; position: relative;
    background: #34D39922; border: 1px solid #34D39947; color: #A7F3D0;
}
.security-verified[b-xne9z57s23]  .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brush-success, #3DE6A3); }
@media (max-width: 759px) {
    .security-digits[b-xne9z57s23] { font-size: 17px; gap: 6px; }
    .security-digits > span[b-xne9z57s23] { padding: 7px 2px; }
}
@media (max-width: 340px) {
    .security-digits[b-xne9z57s23] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* /Chat/StateScreen.razor.rz.scp.css */
/* The whole-window state's own touches (the app's scoped styles: SyphonChat.Web.styles.css, which index.html links): the hero
   card's brand row is the sign-in's (app.css .auth-brand), with the kind's disc (44, its glass and light) at its right
   (weblook1, WL-PANES). */
.state-disc[b-v09hmp9tfx] {
    width: 44px;
    height: 44px;
    margin: 0 0 0 auto;
}
/* /Chat/SyphonGround.razor.rz.scp.css */
/* Syphon's own banner (SyphonGround.razor): the Vault's SyphonGround (Brush.Syphon.Ground with Color.Syphon.Violet and
   Color.Syphon.Purple as its two lights) and the Vault's mark (44, 20 from the right, 10 from the foot, at 90 %). The
   card's own rule for a banner's picture (.card-banner img) gives way to these, which say more. */
.syphon-ground[b-cy725wf7k9] {
    position: absolute; inset: 0; display: block; overflow: hidden;
    background:
        radial-gradient(ellipse 70% 120% at 18% 0%, color-mix(in srgb, var(--color-syphon-violet, #7C3AED) 42%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 110% at 88% 100%, color-mix(in srgb, var(--color-syphon-purple, #6D28D9) 36%, transparent), transparent 72%),
        var(--brush-syphon-ground, #080812);
}
.syphon-ground .syphon-ground-mark[b-cy725wf7k9] {
    position: absolute; right: 20px; bottom: 10px; width: 44px; height: 44px; object-fit: contain; opacity: .9;
}
.syphon-ground.small .syphon-ground-mark[b-cy725wf7k9] { right: 6px; bottom: 4px; width: 18px; height: 18px; }
/* /Chat/TowerDuelCard.razor.rz.scp.css */
/* Tower Duel's card on Mini Games in the browser (Chat\TowerDuelCard.razor; TD-CLIENT, phase 6): the coming-soon cards' look
   (Chat\MiniGamesPane.razor.css: the picture filling the card, its shade, the badge in the top right corner, the words at the
   foot), as a link that opens the game: the hand, a brighter edge under the mouse and the keyboard's ring. Its own file,
   never app.css (minigames\TOWER-DUEL-CONTRACT.md section 3). */

.td-card[b-0gaegzg1e0] {
    position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 16px; isolation: isolate; container-type: inline-size;
    background: linear-gradient(160deg, #2C1B63 0%, #150C33 100%); box-shadow: 0 10px 30px #00000059;
    color: inherit; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.td-card[b-0gaegzg1e0]::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    border: 1.5px solid #E2B95A; box-shadow: inset 0 1px 0 #FFFFFF26;
}
.td-card:hover[b-0gaegzg1e0] { transform: translateY(-2px); box-shadow: 0 14px 34px #00000070; }
.td-card:hover[b-0gaegzg1e0]::after { border-color: #F6D77A; }
.td-card:focus-visible[b-0gaegzg1e0] { outline: 2px solid #F6D77A; outline-offset: 3px; }

.td-card-art[b-0gaegzg1e0] {
    position: absolute; left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); z-index: 0;
    object-fit: cover; object-position: 50% 50%; pointer-events: none;
}
.td-card-shade[b-0gaegzg1e0] {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #0A061800 0%, #0A061800 40%, #0A0618B3 70%, #0A0618F2 100%);
}
.td-card-badge[b-0gaegzg1e0] {
    position: absolute; z-index: 2; top: 13px; right: 14px; display: inline-flex; align-items: center; gap: 9px; height: 31px;
    padding: 0 14px 0 11px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid #E2B95A; background: #3A2A0CE6;
    box-shadow: 0 4px 14px #00000059; color: #FFF6DF; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; line-height: 1;
    white-space: nowrap;
}
.td-card-dot[b-0gaegzg1e0] { width: 8px; height: 8px; border-radius: 50%; background: #7BE08F; box-shadow: 0 0 8px #7BE08F; }
.td-card-words[b-0gaegzg1e0] {
    position: absolute; z-index: 2; left: clamp(16px, 6.2cqw, 32px); right: clamp(12px, 5cqw, 28px); bottom: clamp(12px, 4.1cqw, 22px);
    display: flex; flex-direction: column;
}
.td-card-name[b-0gaegzg1e0] { font-size: clamp(18px, 5.6cqw, 30px); font-weight: 700; line-height: 1.2; color: #FFFFFF; text-shadow: 0 2px 10px #000000B3; }
.td-card-sub[b-0gaegzg1e0] { margin-top: 0; font-size: clamp(11.5px, 3.1cqw, 15px); font-weight: 600; line-height: 1.3; color: #C9A6FF; text-shadow: 0 1px 6px #000000CC; }
.td-card-line[b-0gaegzg1e0] { margin-top: 2px; font-size: clamp(12.5px, 3.55cqw, 18px); line-height: 1.35; color: #ECE7F8; text-shadow: 0 1px 6px #000000CC; }
.td-card-phone[b-0gaegzg1e0] { margin-top: 4px; font-size: clamp(12px, 3.3cqw, 16px); line-height: 1.35; color: #F6D77A; text-shadow: 0 1px 6px #000000CC; }

/* a narrow window: as wide as the coming-soon cards, 1.71 times as wide as tall (the hub's own rule for them) */
@container mgpane (max-width: 954.98px) {
    .td-card[b-0gaegzg1e0] { aspect-ratio: 1.71; }
}

@media (prefers-reduced-motion: reduce) {
    .td-card[b-0gaegzg1e0] { transition: none; }
    .td-card:hover[b-0gaegzg1e0] { transform: none; }
}
/* /Chat/TowerDuelChallengeCard.razor.rz.scp.css */
/* A public Tower Duel challenge in a room (TD-CHAT part 4, D177): the invitation card's family (TowerDuelInviteCard.razor.css),
   inside a message where its words would stand, at most 560 wide. Values from the shared variables only. */
.tdch-card[b-7jnela16mu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 4px 0 2px;
    padding: 11px 14px;
    border-radius: var(--ui-radius-card, 16.5px);
    border: 1px solid var(--ui-edge, #FFFFFF1A);
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light, #7C3AED3D) 0%, transparent 100%),
        var(--ui-panel, #121220);
    box-shadow: var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.tdch-card.success[b-7jnela16mu] {
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light-success, #3DE6A324) 0%, transparent 100%),
        var(--ui-panel, #121220);
}
/* the poster's picture, the game's small disc on its lower right */
.tdch-picture[b-7jnela16mu] { position: relative; flex: none; width: 44px; height: 44px; }
.tdch-picture > .notice-disc[b-7jnela16mu] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--ui-panel, #121220);
}
.tdch-words[b-7jnela16mu] { flex: 1 1 auto; min-width: 0; }
.tdch-kicker[b-7jnela16mu] {
    display: flex;
    align-items: center;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    white-space: nowrap;
    overflow: hidden;
}
.tdch-kicker-words[b-7jnela16mu] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* D155: the test phase's small mark after the kicker, as the invitation card's */
.tdch-test[b-7jnela16mu] {
    flex: none;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px 2px;
    border-radius: 4px;
    border: 1px solid var(--brush-warning-edge, #F5B54459);
    background: var(--brush-warning-soft, #F5B5441F);
    color: var(--brush-warning-text, #FBDFA6);
    font-size: 11.5px;
    font-weight: 600;
    line-height: normal;
}
.tdch-test.link[b-7jnela16mu] { cursor: pointer; text-decoration: none; }
.tdch-test.link:hover[b-7jnela16mu], .tdch-test.link:focus-visible[b-7jnela16mu] { border-color: var(--brush-warning-text, #FBDFA6); outline: none; }
.tdch-line[b-7jnela16mu] {
    margin-top: 1px;
    font-size: var(--ui-type-note, 14px);
    line-height: var(--ui-line-note, 20px);
    font-weight: 600;
    color: var(--brush-text, #FFFFFF);
    overflow-wrap: anywhere;
}
/* an ended challenge (expired, cancelled) is quieter */
.tdch-card.ended .tdch-line[b-7jnela16mu] { font-weight: 400; color: var(--ui-text-quiet, #8999AA); }
/* TD-CHAT part 4b (review M4): why there is no Accept for a reader Tower Duel is not open to */
.tdch-note[b-7jnela16mu] {
    margin-top: 1px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    overflow-wrap: anywhere;
}
.tdch-timer[b-7jnela16mu] {
    margin-top: 2px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    font-variant-numeric: tabular-nums;
}
.tdch-actions[b-7jnela16mu] { flex: none; display: flex; align-items: center; gap: 8px; }
.tdch-actions > .btn.primary:not(:disabled)[b-7jnela16mu]::before { opacity: .55; }
.tdch-actions > .btn.primary:hover:not(:disabled)[b-7jnela16mu]::before { opacity: 1; }

/* on a phone the answer is a finger's height */
.tdch-card.phone .tdch-actions > .btn[b-7jnela16mu] { min-height: 44px; }

/* a phone's width: the answer under the words, as wide as the card */
@media (max-width: 520px) {
    .tdch-card[b-7jnela16mu] { flex-wrap: wrap; }
    .tdch-words[b-7jnela16mu] { flex-basis: calc(100% - 56px); }
    .tdch-actions[b-7jnela16mu] { flex-basis: 100%; justify-content: flex-end; }
}
/* /Chat/TowerDuelChatNotices.razor.rz.scp.css */
/* TD-UI part 13: an invitation that waits stands at the top of the chat, in the middle, under the panes' 54 px headers, until
   it is answered or ends (its card is TowerDuelInviteCard's own, with the toasts' depth): clear of the header's buttons, the
   channel list on the left and the members on the right, and of the message box and the toasts below. Over the panes and
   their drawers (z-index 30), under the menus (60), the profile card (70), the dialogs (80) and the toasts (95): what the
   player opens comes over it. Values from the shared variables only; never app.css. */
.tdchat-standing[b-b2r8g3bg7s] {
    position: fixed;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* wide enough for the kicker "Tower Duel, friendly match" with its Test mark beside Decline and Accept */
    width: min(540px, calc(100vw - 32px));
    pointer-events: none;
}
.tdchat-standing.narrow[b-b2r8g3bg7s] {
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
}
.tdchat-standing-item[b-b2r8g3bg7s] {
    position: relative;
    pointer-events: auto;
    animation: tdchat-standing-in-b-b2r8g3bg7s var(--slow, 240ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.tdchat-standing[b-b2r8g3bg7s]  .tdchat-card {
    margin: 0;
}
/* Hide: a small close in the card's top right corner, over its padding, clear of Decline and Accept (centred below it) */
.tdchat-standing-hide[b-b2r8g3bg7s] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
}
/* on a phone (the browser says Android or iOS, or the chat's narrow layout): a finger's size, and the words keep clear of
   it (on a phone's width the answers sit under them) */
.tdchat-standing.narrow .tdchat-standing-hide[b-b2r8g3bg7s],
.tdchat-standing.phone .tdchat-standing-hide[b-b2r8g3bg7s] {
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
}
.tdchat-standing.narrow[b-b2r8g3bg7s]  .tdchat-words,
.tdchat-standing.phone[b-b2r8g3bg7s]  .tdchat-words {
    padding-right: 30px;
}
@keyframes tdchat-standing-in-b-b2r8g3bg7s {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tdchat-standing-item[b-b2r8g3bg7s] { animation: none; }
}
/* /Chat/TowerDuelInviteCard.razor.rz.scp.css */
/* Tower Duel's invitation card (TD-CHAT): the family's small card, as the toasts' (weblook1, docs\chat\web\look\system.md),
   with the card's corners, above a private conversation's message box. Values from the shared variables only. */
.tdchat-card[b-d2bxjrir04] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 16px 2px;
    padding: 12px 14px 12px 16px;
    border-radius: var(--ui-radius-card, 16.5px);
    border: 1px solid var(--ui-edge, #FFFFFF1A);
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light, #7C3AED3D) 0%, transparent 100%),
        var(--ui-panel, #121220);
    box-shadow: var(--ui-shadow-toast, 0 18px 44px #00000099), var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.tdchat-card.success[b-d2bxjrir04] {
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light-success, #3DE6A324) 0%, transparent 100%),
        var(--ui-panel, #121220);
}
.tdchat-card > .notice-disc[b-d2bxjrir04] { flex: none; }
.tdchat-words[b-d2bxjrir04] { flex: 1 1 auto; min-width: 0; }
.tdchat-kicker[b-d2bxjrir04] {
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* D155 (TD-UI part 7): the test phase's small mark right after the kicker: the staff mark's chip (Chat.Chip, .role-badge:
   radius 4, 11.5 semibold) in the warning's soft colours with its edge, as the Vault's card */
.tdchat-kicker[b-d2bxjrir04] { display: flex; align-items: center; }
.tdchat-kicker-words[b-d2bxjrir04] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tdchat-test[b-d2bxjrir04] {
    flex: none;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px 2px;
    border-radius: 4px;
    border: 1px solid var(--brush-warning-edge, #F5B54459);
    background: var(--brush-warning-soft, #F5B5441F);
    color: var(--brush-warning-text, #FBDFA6);
    font-size: 11.5px;
    font-weight: 600;
    line-height: normal;
}
/* TD-CHAT part 2: while the player is in the Syphon community the mark is a link to its suggestions room (the room its line
   names): the same chip, a hand, and its edge in the mark's own text colour under the pointer or the keyboard's focus */
.tdchat-test.link[b-d2bxjrir04] { cursor: pointer; text-decoration: none; }
.tdchat-test.link:hover[b-d2bxjrir04], .tdchat-test.link:focus-visible[b-d2bxjrir04] { border-color: var(--brush-warning-text, #FBDFA6); outline: none; }
.tdchat-line[b-d2bxjrir04] {
    margin-top: 1px;
    font-size: var(--ui-type-note, 14px);
    line-height: var(--ui-line-note, 20px);
    font-weight: 600;
    color: var(--brush-text, #FFFFFF);
    overflow-wrap: anywhere;
}
/* TD-UI part 15: an accepted invitation's friend who has not opened Tower Duel yet, under the line, in the card's quiet words */
.tdchat-unopened[b-d2bxjrir04] {
    margin-top: 1px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    overflow-wrap: anywhere;
}
/* the coordinator's word of 2026-10-18 (TD-UI part 9): what Tower Duel is, under the line of an invitation to the player */
.tdchat-about[b-d2bxjrir04] {
    margin-top: 1px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    overflow-wrap: anywhere;
}
/* TD-UI part 12: Tower Duel is made for a PC (a phone on either side), in the warning's soft gold, as the game page's line */
.tdchat-phone[b-d2bxjrir04] {
    margin-top: 3px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--brush-warning-text, #FBDFA6);
    overflow-wrap: anywhere;
}
.tdchat-timer[b-d2bxjrir04] {
    margin-top: 2px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    font-variant-numeric: tabular-nums;
}
.tdchat-actions[b-d2bxjrir04] { flex: none; display: flex; align-items: center; gap: 8px; }
/* the main answer glows at rest, as a dialog band's (weblook1) */
.tdchat-actions > .btn.primary:not(:disabled)[b-d2bxjrir04]::before { opacity: .55; }
.tdchat-actions > .btn.primary:hover:not(:disabled)[b-d2bxjrir04]::before { opacity: 1; }

/* TD-UI part 12: on a phone (the browser says Android or iOS) the answers are a finger's height */
.tdchat-card.phone .tdchat-actions > .btn[b-d2bxjrir04],
.tdchat-card.phone .tdchat-actions > .icon-button[b-d2bxjrir04] { min-height: 44px; }
.tdchat-card.phone .tdchat-actions > .icon-button[b-d2bxjrir04] { min-width: 44px; }

/* a phone's width: the answers under the words, as wide as the card */
@media (max-width: 520px) {
    .tdchat-card[b-d2bxjrir04] { flex-wrap: wrap; margin: 8px 10px 2px; }
    .tdchat-words[b-d2bxjrir04] { flex-basis: calc(100% - 46px); }
    .tdchat-actions[b-d2bxjrir04] { flex-basis: 100%; justify-content: flex-end; }
}
/* /Chat/TowerDuelResultCard.razor.rz.scp.css */
/* Tower Duel's result card (TD-CHAT): the invitation card's family (TowerDuelInviteCard.razor.css), with the outcome's light
   in its top left corner. Values from the shared variables only. */
.tdchat-card[b-dhelxet5y0] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 16px 2px;
    padding: 12px 14px 12px 16px;
    border-radius: var(--ui-radius-card, 16.5px);
    border: 1px solid var(--ui-edge, #FFFFFF1A);
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light, #7C3AED3D) 0%, transparent 100%),
        var(--ui-panel, #121220);
    box-shadow: var(--ui-shadow-toast, 0 18px 44px #00000099), var(--ui-sheen, inset 0 1px 0 #FFFFFF0F);
}
.tdchat-card.success[b-dhelxet5y0] {
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light-success, #3DE6A324) 0%, transparent 100%),
        var(--ui-panel, #121220);
}
.tdchat-card.warning[b-dhelxet5y0] {
    background:
        radial-gradient(ellipse 280px 200px at 0 0, var(--ui-light-warning, #F5B5442A) 0%, transparent 100%),
        var(--ui-panel, #121220);
}
.tdchat-card > .notice-disc[b-dhelxet5y0] { flex: none; }
.tdchat-words[b-dhelxet5y0] { flex: 1 1 auto; min-width: 0; }
.tdchat-kicker[b-dhelxet5y0] {
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tdchat-line[b-dhelxet5y0] {
    margin-top: 1px;
    font-size: var(--ui-type-note, 14px);
    line-height: var(--ui-line-note, 20px);
    font-weight: 600;
    color: var(--brush-text, #FFFFFF);
}
.tdchat-small[b-dhelxet5y0] {
    margin-top: 1px;
    font-size: var(--ui-type-small, 13.5px);
    line-height: var(--ui-line-small, 19px);
    color: var(--ui-text-quiet, #8999AA);
}
.tdchat-small.lead[b-dhelxet5y0] { color: var(--ui-text-lead, #B7BFE3); }
.tdchat-actions[b-dhelxet5y0] { flex: none; display: flex; align-items: center; gap: 8px; }

@media (max-width: 520px) {
    .tdchat-card[b-dhelxet5y0] { flex-wrap: wrap; margin: 8px 10px 2px; }
    .tdchat-words[b-dhelxet5y0] { flex-basis: calc(100% - 46px); }
    .tdchat-actions[b-dhelxet5y0] { flex-basis: 100%; justify-content: flex-end; }
}
/* /Chat/WelcomeCard.razor.rz.scp.css */
/* The welcome spin's card (Chat\WelcomeCard.razor), Syphon Vault's (Chat\ChatWelcomeCard.xaml) in the browser, with its numbers:
   the wheel's night purple, lighter at the top left, a gold edge (brighter once unlocked, given or claimed); the medallion with
   the wheel in the FREE SPINS sign's gold and its purple ink, or the chosen server's art; WELCOME SPIN in spaced gold capitals;
   the title (white, the gold of a win once unlocked, given or claimed); the owner's line in its gold box; the checklist's
   ticks and open rings; the server tiles with their art; the gold main button. Nothing moves by itself; every text wraps. */
.wc-card[b-ydnshsrvhh] {
    position: relative; display: flex; gap: 18px; margin: 16px 20px 6px; max-width: 860px; padding: 20px 22px 20px 22px; border-radius: 16px;
    background: linear-gradient(135deg, #2B1A5C 0%, #1D1344 50%, #141030 100%); border: 1.2px solid #E7B05266;
    box-shadow: inset 0 1px 0 #FFFFFF14; overflow: hidden; isolation: isolate;
}
.wc-card.gold[b-ydnshsrvhh] { border-color: #E8B04EB3; }
.wc-light[b-ydnshsrvhh] {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 90% at 8% 10%, #8B5CF64D, #8B5CF600 100%);
}
.wc-card.gold .wc-light[b-ydnshsrvhh] {
    background: radial-gradient(ellipse 45% 80% at 10% 12%, #E8B04E40, #E8B04E00 100%), radial-gradient(ellipse 60% 90% at 8% 10%, #8B5CF64D, #8B5CF600 100%);
}

/* the medallion: the FREE SPINS sign's gold board with its purple ink, a soft gold light around it, its sparkle */
.wc-medal[b-ydnshsrvhh] {
    position: relative; flex: 0 0 64px; width: 64px; height: 64px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #3B1474; background: radial-gradient(circle at 35% 30%, #FFF1C2 0%, #E8B04E 60%, #9A6418 100%); border: 1.4px solid #5A340C;
    box-shadow: 0 0 18px #E8B04E66;
}
.wc-medal[b-ydnshsrvhh]::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid #FFF6DC80; pointer-events: none; }
.wc-medal[b-ydnshsrvhh]  .icon { stroke-width: 2.2; }
.wc-sparkle[b-ydnshsrvhh] { position: absolute; top: -6px; right: -6px; color: #FFF4D2; display: inline-flex; }
.wc-art[b-ydnshsrvhh] { flex: 0 0 64px; width: 64px; height: 64px; margin-top: 2px; border-radius: 14px; border: 1.2px solid #E8B04E99; object-fit: cover; object-position: center 25%; }

.wc-main[b-ydnshsrvhh] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding-right: 30px; }
.wc-kicker[b-ydnshsrvhh] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 4px 1px; }
.wc-kicker-word[b-ydnshsrvhh] { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: #E8C878; }
.wc-done[b-ydnshsrvhh] { padding: 1px 9px 2px 8px; border-radius: 9px; font-size: 12px; font-weight: 600; color: #FFE19A; background: #E8B04E26; border: 1px solid #E8B04E66; }
.wc-title[b-ydnshsrvhh] { margin: 0; font-size: 21px; font-weight: 700; line-height: 27px; color: var(--brush-text, #F4F3F9); overflow-wrap: anywhere; }
.wc-card.gold .wc-title[b-ydnshsrvhh] {
    background: linear-gradient(180deg, #FFF3CF 0%, #F7CB6A 55%, #E3A443 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wc-line[b-ydnshsrvhh] { margin: 5px 0 0; font-size: 14.5px; line-height: 21px; color: #D2CCEA; }
.wc-line2[b-ydnshsrvhh] { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #B2ACD0; }
/* the owner's line before the claim, in its gold box */
.wc-once[b-ydnshsrvhh] {
    margin: 10px 0 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px 11px 13px; border-radius: 10px;
    background: #E8B04E1F; border: 1px solid #E8B04E73; font-size: 14.5px; font-weight: 600; line-height: 21px; color: #FBEBC6;
}
.wc-once[b-ydnshsrvhh]  .icon { flex: 0 0 17px; margin-top: 2px; color: #FFD27A; }

/* the checklist */
.wc-checks[b-ydnshsrvhh] { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wc-check[b-ydnshsrvhh] { display: flex; align-items: center; gap: 11px; font-size: 14.5px; line-height: 20px; color: #D2CCEA; }
.wc-check.done[b-ydnshsrvhh] { color: var(--brush-text, #F4F3F9); }
.wc-tick[b-ydnshsrvhh] {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1.6px dashed #7F75B8; background: #100A2A33; color: #fff;
}
.wc-check.done .wc-tick[b-ydnshsrvhh] { border: none; background: linear-gradient(180deg, #5BE39B, #2FBF72); }
.wc-check.done .wc-tick[b-ydnshsrvhh]  .icon { stroke-width: 2.8; }
.wc-check-text[b-ydnshsrvhh] { min-width: 0; }
.wc-action[b-ydnshsrvhh] { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 14px; color: #FFD27A; }
.wc-action:hover[b-ydnshsrvhh] { color: #FFE5A6; }
.visually-hidden[b-ydnshsrvhh] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the server choice: three tiles, each its game's art from the right fading in, its name in the games' title type */
.wc-servers[b-ydnshsrvhh] { margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wc-server[b-ydnshsrvhh] {
    position: relative; height: 86px; padding: 0; border-radius: 12px; overflow: hidden; text-align: left; cursor: pointer;
    border: 1.2px solid #414A78; background: linear-gradient(135deg, #121332F0, #0C0C29F0);
    transition: border-color var(--fast, 110ms) ease-out;
}
.wc-server:hover:not(:disabled)[b-ydnshsrvhh] { border-color: #B06CF6; }
.wc-server:focus-visible[b-ydnshsrvhh] { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 2px; }
.wc-server-art[b-ydnshsrvhh] {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}
.wc-server[b-ydnshsrvhh]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #08061400 35%, #080614D9 100%); pointer-events: none; }
.wc-server-name[b-ydnshsrvhh] {
    position: absolute; left: 14px; right: 12px; bottom: 9px; z-index: 1; font-family: var(--title-font, "Playfair Display", Georgia, serif); font-weight: 700;
    font-size: 22px; line-height: 26px; color: var(--brush-text, #F4F3F9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wc-server.closed[b-ydnshsrvhh] { cursor: default; background: #0B0E1EB8; }
.wc-server.closed .wc-server-art[b-ydnshsrvhh] { opacity: .35; }
.wc-server.closed .wc-server-name[b-ydnshsrvhh] { opacity: .55; }
.wc-soon[b-ydnshsrvhh] {
    position: absolute; top: 9px; right: 9px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 3px 8px; border-radius: 10px;
    font-size: 12px; font-weight: 600; color: #EDE6FF; background: #191433E6; border: 1px solid #7E6BB8;
}
.wc-soon[b-ydnshsrvhh]  .icon { color: #D9CCF7; }

/* a refusal: amber, or calm (lilac, its "i") for what is no fault */
.wc-problem[b-ydnshsrvhh] { margin: 10px 0 0; display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 21px; color: var(--brush-warning-text, #FBDFA6); overflow-wrap: anywhere; }
.wc-problem[b-ydnshsrvhh]  .icon { flex: 0 0 16px; margin-top: 2px; color: var(--brush-warning, #F5B544); }
.wc-problem.info[b-ydnshsrvhh] { color: #D2CCEA; }
.wc-problem.info[b-ydnshsrvhh]  .icon { color: var(--brush-accent-label, #978AFB); }
.wc-busy[b-ydnshsrvhh] { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--brush-text-secondary, #B4C6DB); }

/* the step's buttons; the main one gold, as the Vault's (the page's purple stays Add friend's) */
.wc-actions[b-ydnshsrvhh] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.wc-actions:empty[b-ydnshsrvhh] { display: none; }
.btn.wc-gold[b-ydnshsrvhh] {
    color: #2B1060; font-weight: 700; padding: 0 20px;
    background: linear-gradient(180deg, #FFE5A6 0%, #F3BF5C 50%, #D99631 100%); box-shadow: inset 0 1px 0 #FFFFFF59;
}
.btn.wc-gold:hover:not(:disabled)[b-ydnshsrvhh] { background: linear-gradient(180deg, #FFEDBE 0%, #F7CA6E 50%, #E1A140 100%); box-shadow: inset 0 1px 0 #FFFFFF66, 0 6px 18px #E8B04E40; }
.btn.wc-gold:disabled[b-ydnshsrvhh] { opacity: .5; }
.btn.wc-gold:focus-visible[b-ydnshsrvhh] { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 2px; }
.wc-close[b-ydnshsrvhh] { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; }

/* in Chat settings: a little smaller, no x */
.wc-card.compact[b-ydnshsrvhh] { margin: 0 0 16px; max-width: none; padding: 16px 18px 18px; gap: 14px; }
.wc-card.compact .wc-medal[b-ydnshsrvhh], .wc-card.compact .wc-art[b-ydnshsrvhh] { flex-basis: 52px; width: 52px; height: 52px; }
.wc-card.compact .wc-title[b-ydnshsrvhh] { font-size: 18px; line-height: 24px; }
.wc-card.compact .wc-main[b-ydnshsrvhh] { padding-right: 0; }
.wc-card.compact .btn.wc-gold[b-ydnshsrvhh] { height: 34px; padding: 0 15px; font-size: 14px; }

/* a phone: the medallion beside WELCOME SPIN and the title only, everything else the card's whole width (the main column's
   parts become the card's grid items); the tiles one under the other; each row's way under its words; the buttons may take
   two lines */
@media (max-width: 600px) {
    .wc-card[b-ydnshsrvhh] { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; margin: 12px 12px 4px; padding: 16px 14px 16px 16px; }
    .wc-card[b-ydnshsrvhh], .wc-card.compact[b-ydnshsrvhh] { row-gap: 0; column-gap: 12px; }
    .wc-main[b-ydnshsrvhh] { display: contents; }
    .wc-medal[b-ydnshsrvhh], .wc-art[b-ydnshsrvhh], .wc-card.compact .wc-medal[b-ydnshsrvhh], .wc-card.compact .wc-art[b-ydnshsrvhh] { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; margin-top: 0; }
    .wc-kicker[b-ydnshsrvhh] { grid-column: 2; grid-row: 1; padding-right: 34px; }
    .wc-title[b-ydnshsrvhh] { grid-column: 2; grid-row: 2; align-self: start; padding-right: 34px; font-size: 18px; line-height: 24px; }
    .wc-main > :not(.wc-kicker):not(.wc-title)[b-ydnshsrvhh] { grid-column: 1 / -1; }
    .wc-servers[b-ydnshsrvhh] { grid-template-columns: 1fr; }
    .wc-server[b-ydnshsrvhh] { height: 64px; }
    .wc-actions .btn[b-ydnshsrvhh] { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; text-align: center; }
    /* the main button first, the card's whole width; Back and the others under it */
    .wc-actions .btn.wc-gold[b-ydnshsrvhh] { order: -1; flex: 1 1 100%; justify-content: center; }
    .wc-check[b-ydnshsrvhh] { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 11px; row-gap: 0; }
    .wc-action[b-ydnshsrvhh] { grid-column: 2; justify-self: start; margin-left: 0; }
}
@media (pointer: coarse) {
    .wc-actions .btn[b-ydnshsrvhh] { min-height: 44px; }
    .wc-close[b-ydnshsrvhh] { width: 44px; height: 44px; top: 4px; right: 4px; }
    .wc-action[b-ydnshsrvhh] { min-height: 44px; }
    .wc-main[b-ydnshsrvhh] { padding-right: 36px; }
}
/* /Chat/WheelInviteDialog.razor.rz.scp.css */
/* Invite friends (Chat\WheelInviteDialog.razor): the gift disc beside the title and the server's name, the code large in the
   wheel's gold on a dark ground with Copy beside it, how many counted, the invites as quiet rows (counted green, waiting
   lavender, the rest grey), the rule in a smaller muted line, and "Got a code from a friend?" with its field */
.wheel-invite[b-2cmu1ag9nr] { width: 470px; }
/* invmile1: the milestone bar over the code (Chat\MilestoneBar.razor) */
.wheel-invite[b-2cmu1ag9nr]  .ms-card { margin: 2px 0; }
/* (with the bar the card is taller: in a low window the card scrolls as a whole, and its list of invites keeps its own
   height instead of giving it up to the bar) */
.wheel-invite.with-milestone .wi-list[b-2cmu1ag9nr] { flex-shrink: 0; }
.wi-head[b-2cmu1ag9nr] { display: flex; align-items: center; gap: 14px; position: relative; }
.wi-head .dialog-title[b-2cmu1ag9nr] { margin: 0; }
.wi-head-words[b-2cmu1ag9nr] { display: flex; flex-direction: column; min-width: 0; }
.wi-server[b-2cmu1ag9nr] { font-size: 13.5px; color: var(--brush-text-lilac, #C9B8FF); }
.wi-loading[b-2cmu1ag9nr] { display: flex; justify-content: center; padding: 18px 0 8px; }
.wi-problem[b-2cmu1ag9nr] { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 19px; color: var(--brush-warning-text, #FBDFA6); }
.wi-code-box[b-2cmu1ag9nr] {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 13px; margin-top: 4px; border-radius: 14px;
    background: linear-gradient(180deg, #2A1A5A 0%, #1A1036 100%); border: 1px solid #E7B05266; box-shadow: inset 0 1px 0 #FFFFFF14, 0 0 22px #8B5CF62E;
}
.wi-code-label[b-2cmu1ag9nr] { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #E9D6A8; }
.wi-code-row[b-2cmu1ag9nr] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wi-code[b-2cmu1ag9nr] {
    flex: 1 1 auto; min-width: 0; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 30px; font-weight: 700; letter-spacing: .08em;
    line-height: 1.15; white-space: nowrap; color: #FFE19A; text-shadow: 0 1px 0 #6B4010, 0 0 14px #E7B05255;
}
.wi-copy[b-2cmu1ag9nr] { flex: 0 0 auto; }
/* no code yet (the game account has not played there): the line in the code's place, in the box's warm light */
.wi-code-later[b-2cmu1ag9nr] { margin: 0; font-size: 14.5px; line-height: 20px; color: #F3E3BE; }
.wi-counted[b-2cmu1ag9nr] { font-size: 14px; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB); }
.wi-list[b-2cmu1ag9nr] { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; scrollbar-width: thin; }
.wi-row[b-2cmu1ag9nr] {
    display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; border-radius: 10px; background: var(--brush-surface, #FFFFFF08);
    border: 1px solid var(--brush-border-subtle, #1C2532); color: var(--brush-text-secondary, #B4C6DB);
}
.wi-row[b-2cmu1ag9nr]  .icon { flex: 0 0 16px; margin-top: 2px; }
.wi-row-words[b-2cmu1ag9nr] { display: flex; flex-direction: column; min-width: 0; }
.wi-row-state[b-2cmu1ag9nr] { font-size: 14px; line-height: 19px; font-weight: 600; }
.wi-row-when[b-2cmu1ag9nr] { font-size: 12.5px; line-height: 17px; color: var(--brush-text-muted, #8999AA); }
.state-counted[b-2cmu1ag9nr] { color: #CFF7DF; }
.state-counted[b-2cmu1ag9nr]  .icon { color: #5BE39B; }
.state-waiting[b-2cmu1ag9nr]  .icon { color: var(--brush-accent-label, #978AFB); }
.wi-empty[b-2cmu1ag9nr] { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed #3A3A66; font-size: 14px; line-height: 19px; color: var(--brush-text-secondary, #B4C6DB); }
.wi-rule[b-2cmu1ag9nr] { margin: 0; display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--brush-text-muted, #8999AA); }
.wi-rule[b-2cmu1ag9nr]  .icon { flex: 0 0 15px; margin-top: 1px; }
.wi-friend[b-2cmu1ag9nr] { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--brush-border-subtle, #1C2532); }
.wi-got[b-2cmu1ag9nr] { font-size: 15px; font-weight: 600; color: var(--brush-text, #F4F3F9); }
.wi-use[b-2cmu1ag9nr] { display: flex; gap: 10px; }
.wi-field[b-2cmu1ag9nr] { flex: 1 1 auto; min-width: 0; height: 40px; text-transform: uppercase; letter-spacing: .06em; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; }
.wi-field[b-2cmu1ag9nr]::placeholder { text-transform: none; letter-spacing: normal; font-family: var(--ui-font); }
.wi-use-button[b-2cmu1ag9nr] { flex: 0 0 auto; min-width: 112px; }
.wi-use-error[b-2cmu1ag9nr] { margin: 0; font-size: 14px; line-height: 19px; color: var(--brush-warning-text, #FBDFA6); }
.wi-used[b-2cmu1ag9nr] { margin: 0; display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 20px; color: var(--brush-text-secondary, #B4C6DB); }
.wi-used[b-2cmu1ag9nr]  .icon { flex: 0 0 16px; margin-top: 2px; }
/* a match with another account (match_found, or an invite not counted because of one): calm and serious in the wheel's
   amber, as Syphon Vault's invite card (Brush.Wheel.Match #F5C26B): a shield and the words under the state they explain,
   wrapping to the whole line at every width; never the red of a fault (the chat card's .fs-line.match: the same) */
.wi-match[b-2cmu1ag9nr] { margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 18px; color: #F5C26B; overflow-wrap: anywhere; }
.wi-match[b-2cmu1ag9nr]  .icon { flex: 0 0 14px; margin-top: 2px; color: #F5C26B; }
/* under an invite's state, and under the player's own use (beside its words, past its icon) */
.wi-match.in-row[b-2cmu1ag9nr] { margin: 6px 0 2px; }
.wi-match.under-used[b-2cmu1ag9nr] { margin: -2px 0 0 25px; }
/* what came of Use code */
.wi-match.use[b-2cmu1ag9nr] { font-size: 14px; line-height: 19px; font-weight: 600; }
.wi-match.use[b-2cmu1ag9nr]  .icon { flex-basis: 15px; }
@media (max-width: 520px) {
    .wi-code[b-2cmu1ag9nr] { font-size: 25px; }
}
@media (pointer: coarse) {
    .wi-field[b-2cmu1ag9nr], .wi-use-button[b-2cmu1ag9nr], .wi-copy[b-2cmu1ag9nr] { height: 46px; }
    .wi-field[b-2cmu1ag9nr] { font-size: 16px; }
}
/* /Chat/WheelInvitesPage.razor.rz.scp.css */
/* "Your invites" (Chat\WheelInvitesPage.razor; invprog1, the owner's wish of 2026-10-13): the Vault's page
   (src\SyphonVault.App\Wheel\WheelInvitesPage.xaml) in the browser, over the wheel's own night (Chat\WheelPane.razor's backdrop
   stays under it). The way back at the wheel's own place, the server in the wheel's gold, the title as large as the wheel's
   with its last word in the wheel's purple, its line; then a column of at most 980: the code in the invite card's gold-edged
   box with Copy and Share your code, how many counted with the small gems, one row per invite on the panels' dark glass. A
   waiting friend's level and play time as two bars side by side (one under the other in a column under 620, a phone's): the
   volume slider's dark track, filled to the share in the wheel's purple, in the counted green with a tick once met. */
.ip-page[b-mxcq3sqlme] {
    position: absolute; inset: 0; z-index: 4; overflow-x: hidden; overflow-y: auto; outline: none;
    scrollbar-width: thin; scrollbar-color: #3A3460 transparent; color: var(--brush-text, #F4F3F9);
    /* its width chooses the sizes, as the wheel's page width does (js\wheel.js); "iphub" is the page's alone (refer1: the hub's
       main column is a container "ip" of its own for its rows, and its parts are laid out by the page's width) */
    container-type: inline-size; container-name: ip iphub;
}
.ip-column[b-mxcq3sqlme] {
    position: relative; box-sizing: border-box; width: 100%; max-width: calc(980px + 82px); padding: 12px 41px 36px;
    display: flex; flex-direction: column;
}

/* the way back to the wheel: the wheel's own "Mini Games" link, at its place (its arrow 11 left of the column) */
.ip-back[b-mxcq3sqlme] {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: -11px; padding: 0 12px 0 7px;
    box-sizing: border-box; border-radius: 9px; font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: #CDBEF5;
    text-decoration: none; text-shadow: 0 1px 6px #000000A0; transition: background-color 110ms ease-out, color 110ms ease-out;
}
.ip-back:hover[b-mxcq3sqlme] { color: #fff; background: #FFFFFF14; }
.ip-back:focus-visible[b-mxcq3sqlme] { outline: 2px solid #8F85F9; outline-offset: 2px; }
.ip-back[b-mxcq3sqlme]  .icon { flex: 0 0 17px; stroke-width: 2.2; }
/* the drawer's button of a narrow screen, before the way back */
.ip-menu[b-mxcq3sqlme] { position: absolute; left: 8px; top: 8px; z-index: 1; background: #0E0A22CC; border: 1px solid #FFFFFF1F; }
.ip-menu:hover[b-mxcq3sqlme] { background: #1A1438E6; }

/* the server, the title and its line */
.ip-kicker[b-mxcq3sqlme] { margin: 15px 0 0 2px; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 17px; color: #E8C878; }
.ip-title[b-mxcq3sqlme] {
    margin: 0; font-size: 62px; font-weight: 700; line-height: 1.12; letter-spacing: -0.6px; color: var(--brush-text, #F4F3F9);
    text-shadow: 0 2px 18px #0000008C; outline: none; overflow-wrap: anywhere;
}
.ip-title .word[b-mxcq3sqlme] { background: linear-gradient(180deg, #C9A6FF 0%, #9D63FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ip-line[b-mxcq3sqlme] { margin: 2px 0 0; font-size: 22px; line-height: 1.3; color: #DCD5EE; text-shadow: 0 1px 8px #00000099; }

/* invmile1: the milestone bar first under the title's line (Chat\MilestoneBar.razor), the code box a little nearer under it */
.ip-column[b-mxcq3sqlme]  .ms-card { margin-top: 22px; }
.ip-column[b-mxcq3sqlme]  .ms-card + .ip-code-box { margin-top: 16px; }

/* the code: the invite card's gold-edged box, the code large in the wheel's gold with Copy, Share your code under them */
.ip-code-box[b-mxcq3sqlme] {
    position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 24px; padding: 15px 16px 15px 20px; border-radius: 16px;
    background: linear-gradient(135deg, #2A1A52F0 0%, #1A1236F0 100%); border: 1.5px solid #E7B05299; box-shadow: inset 0 1px 0 #FFFFFF14, 0 0 22px #8B5CF62E;
}
.ip-code-label[b-mxcq3sqlme] { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E8C878; }
.ip-code-row[b-mxcq3sqlme] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ip-code[b-mxcq3sqlme] {
    flex: 1 1 auto; min-width: 0; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 31px; font-weight: 700; letter-spacing: .08em;
    line-height: 1.15; white-space: nowrap; color: #FFE19A; text-shadow: 0 1px 0 #6B4010, 0 0 14px #E7B05255;
}
.ip-copy[b-mxcq3sqlme] { flex: 0 0 auto; min-width: 98px; }
.ip-code-later[b-mxcq3sqlme] { margin: 0; font-size: 14.5px; line-height: 20px; color: #F3E3BE; }
.ip-code-coming[b-mxcq3sqlme] { display: block; width: 190px; height: 14px; margin: 6px 0 12px; border-radius: 7px; background: #FFFFFF33; }
.ip-loading[b-mxcq3sqlme] { display: flex; justify-content: center; padding: 18px 0 6px; }
.ip-problem[b-mxcq3sqlme] { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 19px; color: var(--brush-warning-text, #FBDFA6); }

/* how many counted: the words and the small gems, the counted ones lit gold */
.ip-count[b-mxcq3sqlme] { margin: 16px 0 0 2px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ip-counted[b-mxcq3sqlme] { font-size: 16px; font-weight: 600; color: var(--brush-text, #F4F3F9); }
.ip-gems[b-mxcq3sqlme] { display: inline-flex; gap: 6px; align-items: center; padding-left: 2px; }
.ip-gem[b-mxcq3sqlme] { width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: #9C8CD855; }
.ip-gem.lit[b-mxcq3sqlme] { background: #FFC94D; }

/* the code's invites, newest first: each its own row (Chat\InviteFriendRow.razor and its .css: the row, the friend's
   character, the bars) */
.ip-list[b-mxcq3sqlme] { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* nobody used the code yet */
.ip-empty-box[b-mxcq3sqlme] {
    margin-top: 14px; padding: 22px 16px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    border: 1px dashed #3A3A66; border-radius: 14px; color: #9C8CD8;
}
.ip-empty[b-mxcq3sqlme] { margin: 0; font-size: 15px; line-height: 20px; color: var(--brush-text-secondary, #B4C6DB); }

/* the rule */
.ip-rule[b-mxcq3sqlme] { margin: 12px 0 0 2px; display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 18px; color: var(--brush-text-muted, #8999AA); }
.ip-rule[b-mxcq3sqlme]  .icon { flex: 0 0 15px; margin-top: 2px; color: #9C8CD8; }

/* ───────────── Invite & Earn, the hub (refer1, chat\WHEEL-REFERRALS-CONTRACT.md section 9.2; docs\chat\wheel\referrals\web.md) ─────────────
   The same night, glass and gold, wider (two columns of the owner's second picture: the friends' list on the left, the next
   milestone, the rewards and a friend's code on the right), the parts in the contract's order on a narrow page. Each part is a
   card on the panels' dark glass; its title in the milestone card's gold; the numbers in the statuses' colours. */
.ip-page[data-refer] .ip-column[b-mxcq3sqlme] { max-width: calc(1200px + 82px); }
.rh-loading-words[b-mxcq3sqlme] { margin-left: 10px; font-size: 14px; color: var(--brush-text-secondary, #B4C6DB); }

/* the server tabs: the wheel's own cards in small, the chosen one lit in the wheel's purple, a closed one dashed and quiet */
.rh-tabs[b-mxcq3sqlme] { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.rh-tab[b-mxcq3sqlme] {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; box-sizing: border-box; border-radius: 19px; cursor: pointer;
    font-size: 15px; font-weight: 600; color: #DCD5EE; background: #121332E6; border: 1.2px solid #343256;
    transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.rh-tab:hover[b-mxcq3sqlme] { background: #1C1A48F0; border-color: #6C42BC; color: #fff; }
.rh-tab.on[b-mxcq3sqlme] { color: #fff; background: linear-gradient(135deg, #3A1A96F2 0%, #2C1380F0 60%, #220F68F0 100%); border-color: #8B5CF6; box-shadow: 0 0 16px #8B5CF64D; }
.rh-tab.closed[b-mxcq3sqlme] { border-style: dashed; color: #A9A3C8; }
.rh-tab:focus-visible[b-mxcq3sqlme] { outline: 2px solid #8F85F9; outline-offset: 2px; }
.rh-tab-soon[b-mxcq3sqlme] { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFE6A3; }

/* a server closed for now: the sleeping mint Poring, Coming soon, its line */
.rh-soon[b-mxcq3sqlme] {
    margin-top: 22px; padding: 26px 20px 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    border-radius: 16px; background: #0C0F21EC; border: 1.2px dashed #5A4A8A;
}
.rh-soon-art[b-mxcq3sqlme] { width: 84px; height: 86px; filter: grayscale(.55) brightness(.85) drop-shadow(0 4px 9px #0000008C); }
.rh-soon-art[b-mxcq3sqlme]  svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rh-soon-chip[b-mxcq3sqlme] {
    padding: 3px 12px 4px; border-radius: 11px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #FFE6A3; background: #1B1236E8; border: 1px solid #E7B05299;
}
.rh-soon-line[b-mxcq3sqlme] { margin: 0; font-size: 16px; line-height: 22px; color: #DCD5EE; }

/* the stat cards: Invited, Qualified, In progress, Under review */
.rh-stats[b-mxcq3sqlme] { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rh-stat[b-mxcq3sqlme] {
    --c: #C2AEFF; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
    padding: 14px 16px; border-radius: 14px; background: #0C0F21EC; border: 1px solid #343256; box-shadow: 0 12px 40px #0000004D; overflow: hidden;
}
.rh-stat[b-mxcq3sqlme]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 100% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); pointer-events: none; }
.rh-stat.qualified[b-mxcq3sqlme] { --c: #5BE39B; }
.rh-stat.in-progress[b-mxcq3sqlme] { --c: #6FB7FF; }
.rh-stat.under-review[b-mxcq3sqlme] { --c: #F5C26B; }
.rh-stat-icon[b-mxcq3sqlme] {
    grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.rh-stat-value[b-mxcq3sqlme] { position: relative; font-size: 28px; font-weight: 700; line-height: 32px; color: var(--c); font-variant-numeric: tabular-nums; }
.rh-stat-words[b-mxcq3sqlme] { position: relative; font-size: 13.5px; line-height: 18px; color: var(--brush-text-secondary, #B4C6DB); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the two columns (a wide page), else one column in the contract's order */
.rh-grid[b-mxcq3sqlme] { display: flex; flex-direction: column; }
.rh-main[b-mxcq3sqlme], .rh-side[b-mxcq3sqlme] { display: flex; flex-direction: column; min-width: 0; }
.rh-grid.refer .rh-main > * + *[b-mxcq3sqlme], .rh-grid.refer .rh-side > * + *[b-mxcq3sqlme] { margin-top: 16px; }
.rh-grid.refer[b-mxcq3sqlme] { margin-top: 16px; }
.rh-grid.refer .ip-code-box[b-mxcq3sqlme] { margin-top: 0; }

.rh-card[b-mxcq3sqlme] {
    position: relative; box-sizing: border-box; padding: 16px 20px 18px; border-radius: 16px;
    background: #0C0F21EC; border: 1px solid #343256; box-shadow: 0 12px 40px #0000004D;
}
.rh-card-title[b-mxcq3sqlme] {
    margin: 0; font-size: 17px; font-weight: 700; line-height: 22px;
    background: linear-gradient(180deg, #FFF3CF 0%, #F7CB6A 55%, #E3A443 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* your invite link: the link in a quiet box with Copy invite link, the code with Copy code, Copy invitation message */
.rh-link[b-mxcq3sqlme] { gap: 9px; }
.rh-link-row[b-mxcq3sqlme] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-link-text[b-mxcq3sqlme] {
    flex: 1 1 260px; min-width: 0; padding: 8px 12px; box-sizing: border-box; border-radius: 9px; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    font-size: 15px; line-height: 20px; color: #F3E3BE; background: #0B0820B8; border: 1px solid #E7B05259; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-copy[b-mxcq3sqlme] { flex: 0 0 auto; gap: 7px; }
.rh-code-label[b-mxcq3sqlme] { margin-top: 6px; }
.rh-code-fallback[b-mxcq3sqlme] { margin: 0; font-size: 13.5px; line-height: 18px; color: #D9CFF2; }
.rh-copy-message[b-mxcq3sqlme] { align-self: flex-start; gap: 8px; margin-top: 2px; }
.rh-signin-line[b-mxcq3sqlme] { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: #F3E3BE; }
.rh-signin[b-mxcq3sqlme] { align-self: flex-start; gap: 8px; margin-top: 4px; }

/* how it works: three numbered steps in the wheel's gold */
.rh-step-list[b-mxcq3sqlme] { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rh-step-list li[b-mxcq3sqlme] { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 21px; color: #E8E2F6; }
.rh-step-n[b-mxcq3sqlme] {
    flex: 0 0 26px; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 800; color: #3B1474; background: radial-gradient(circle at 35% 30%, #FFF1C2 0%, #E8B04E 60%, #9A6418 100%); border: 1.2px solid #5A340C;
}

/* the requirements: one line each with a mint tick; then the rewards' rule */
.rh-req-list[b-mxcq3sqlme] { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rh-req-list li[b-mxcq3sqlme] { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 20px; color: #E2DAF6; }
.rh-req-list[b-mxcq3sqlme]  .icon { flex: 0 0 15px; margin-top: 3px; color: #8EE6C0; stroke-width: 2.6; }
.rh-reward-rule[b-mxcq3sqlme] { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid #FFFFFF14; font-size: 14.5px; line-height: 20px; color: #FFE9B8; }
.rh-reward-rule + .rh-reward-rule[b-mxcq3sqlme] { margin-top: 6px; padding-top: 0; border-top: 0; }
.rh-reward-rule[b-mxcq3sqlme]  .icon { flex: 0 0 16px; margin-top: 2px; color: #FFD77A; }

/* the next milestone: the bar (bare), how far and how many left */
.rh-next[b-mxcq3sqlme]  .ms-card.bare { margin-top: 0; }
.rh-next-of[b-mxcq3sqlme] { margin: 12px 0 0; font-size: 15px; font-weight: 600; line-height: 21px; color: #F4F3F9; }
.rh-next-left[b-mxcq3sqlme] { margin: 2px 0 0; font-size: 14px; line-height: 19px; color: #FFE19A; }

/* your rewards: how many, then each spin with its chip (ready in gold, used quiet) */
.rh-rewards-count[b-mxcq3sqlme] { margin: 4px 0 0; font-size: 14px; line-height: 19px; color: var(--brush-text-secondary, #B4C6DB); }
.rh-rewards-empty[b-mxcq3sqlme] { margin: 12px 0 0; font-size: 14px; line-height: 19px; color: #CFC4F2; }
.rh-reward-list[b-mxcq3sqlme] { list-style: none; margin: 12px 0 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #7A6CC8 #FFFFFF0F; }
.rh-reward[b-mxcq3sqlme] { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 7px 10px 7px 7px; border-radius: 10px; background: var(--wheel-row, #1A1F38D2); border: 1px solid #283149; }
.rh-reward-icon[b-mxcq3sqlme] { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #FFD77A; background: #E7B0521F; }
.rh-reward-icon img[b-mxcq3sqlme] { width: 28px; height: 28px; image-rendering: pixelated; }
.rh-reward-words[b-mxcq3sqlme] { min-width: 0; display: flex; flex-direction: column; }
.rh-reward-name[b-mxcq3sqlme] { font-size: 14px; font-weight: 600; line-height: 19px; color: #F4F3F9; overflow-wrap: anywhere; }
.rh-reward-when[b-mxcq3sqlme] { font-size: 12.5px; line-height: 17px; color: var(--brush-text-muted, #8999AA); }
.rh-reward-chip[b-mxcq3sqlme] { padding: 2px 9px 3px; border-radius: 10px; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; color: #FFE19A; background: #E7B0521F; border: 1px solid #E7B05299; }
.rh-reward.used .rh-reward-chip[b-mxcq3sqlme] { color: #B8BCD8; background: #FFFFFF0D; border-color: #FFFFFF26; }
.rh-reward.used .rh-reward-icon[b-mxcq3sqlme] { color: #9C8CD8; background: #9C8CD81A; }

/* the invited friends: the filters as chips with their counts */
.rh-friends.rh-card[b-mxcq3sqlme] { padding-bottom: 16px; }
.rh-filters[b-mxcq3sqlme] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.rh-filter[b-mxcq3sqlme] {
    --c: #C2AEFF; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; box-sizing: border-box; border-radius: 16px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: #DCD5EE; background: #121332E6; border: 1px solid #343256;
}
.rh-filter.going[b-mxcq3sqlme] { --c: #6FB7FF; }
.rh-filter.review[b-mxcq3sqlme] { --c: #F5C26B; }
.rh-filter.good[b-mxcq3sqlme] { --c: #5BE39B; }
.rh-filter.quiet[b-mxcq3sqlme] { --c: #8E92B4; }
.rh-filter:hover[b-mxcq3sqlme] { border-color: color-mix(in srgb, var(--c) 60%, transparent); color: #fff; }
.rh-filter.on[b-mxcq3sqlme] { color: #fff; background: color-mix(in srgb, var(--c) 22%, #121332); border-color: var(--c); }
.rh-filter:focus-visible[b-mxcq3sqlme] { outline: 2px solid #8F85F9; outline-offset: 2px; }
.rh-filter-count[b-mxcq3sqlme] { min-width: 18px; padding: 0 6px; border-radius: 9px; font-size: 12px; line-height: 18px; text-align: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-variant-numeric: tabular-nums; }
.rh-friends .ip-list[b-mxcq3sqlme] { margin-top: 12px; }
.rh-friends .ip-empty-box[b-mxcq3sqlme] { margin-top: 12px; }
.rh-empty-art[b-mxcq3sqlme] { width: 64px; height: 65px; filter: drop-shadow(0 4px 8px #00000080); }
.rh-empty-art[b-mxcq3sqlme]  svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* the player's own use of a friend's code, a friend's card, or "Got a code from a friend?" */
.rh-own[b-mxcq3sqlme] { padding: 14px 16px 16px; }
.rh-own.with-card[b-mxcq3sqlme] { padding: 0; border: 0; background: none; box-shadow: none; }
.rh-own-title[b-mxcq3sqlme] { margin-bottom: 10px; }
.rh-used[b-mxcq3sqlme] { --c: #C2AEFF; display: flex; gap: 11px; align-items: flex-start; }
.rh-used.state-good[b-mxcq3sqlme], .rh-used.state-counted[b-mxcq3sqlme] { --c: #5BE39B; }
.rh-used.state-going[b-mxcq3sqlme] { --c: #6FB7FF; }
.rh-used.state-review[b-mxcq3sqlme] { --c: #F5C26B; }
.rh-used.state-quiet[b-mxcq3sqlme], .rh-used.state-not_counted[b-mxcq3sqlme], .rh-used.state-expired[b-mxcq3sqlme] { --c: #8E92B4; }
.rh-used-icon[b-mxcq3sqlme] { flex: 0 0 17px; margin-top: 2px; color: var(--c); }
.rh-used-words[b-mxcq3sqlme] { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rh-used-line[b-mxcq3sqlme] { font-size: 14.5px; line-height: 20px; color: #E2DAF6; }
.rh-chips[b-mxcq3sqlme] { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-chip[b-mxcq3sqlme] { padding: 2px 10px 3px; border-radius: 11px; font-size: 12.5px; font-weight: 600; line-height: 16px; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.rh-chip.reward[b-mxcq3sqlme] { color: #B8BCD8; background: #FFFFFF0D; border-color: #FFFFFF26; }
.rh-chip.reward.credited[b-mxcq3sqlme] { color: #FFE19A; background: #E7B0521F; border-color: #E7B05299; }
.rh-chip.reward.used[b-mxcq3sqlme] { color: #9DF0CC; background: #49B98D1F; border-color: #49B98D80; }
.rh-got[b-mxcq3sqlme] { display: block; font-size: 14.5px; font-weight: 600; line-height: 20px; color: #F4F3F9; }
.rh-use[b-mxcq3sqlme] { display: flex; gap: 8px; margin-top: 9px; }
.rh-field[b-mxcq3sqlme] { flex: 1 1 auto; min-width: 0; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.rh-field[b-mxcq3sqlme]::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--ui-font); }
.rh-use-button[b-mxcq3sqlme] { flex: 0 0 auto; min-width: 98px; }
.rh-use-error[b-mxcq3sqlme] { display: flex; gap: 7px; align-items: flex-start; margin: 9px 0 0; font-size: 13.5px; line-height: 18px; color: var(--brush-warning-text, #FBDFA6); }
.rh-use-error.match[b-mxcq3sqlme] { color: #F5C26B; }
.rh-use-error[b-mxcq3sqlme]  .icon { flex: 0 0 15px; margin-top: 2px; }

/* a wide page: two columns (the main one 1.55 of the side's), the parts in each in their order */
@container iphub (min-width: 1000px) {
    .rh-grid.refer[b-mxcq3sqlme] { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); column-gap: 18px; align-items: start; }
    /* the friends' rows and the code follow the main column's width (InviteFriendRow.razor.css asks the container "ip") */
    .rh-grid.refer .rh-main[b-mxcq3sqlme] { container-type: inline-size; container-name: ip; }
}
/* a narrower page: one column in the contract's order (the stats, the link, the steps, the requirements, the milestone, the
   rewards, the friends, the player's own code) */
@container iphub (max-width: 999.98px) {
    .rh-grid.refer[b-mxcq3sqlme] { gap: 16px; }
    .rh-grid.refer .rh-main[b-mxcq3sqlme], .rh-grid.refer .rh-side[b-mxcq3sqlme] { display: contents; }
    .rh-grid.refer .rh-main > * + *[b-mxcq3sqlme], .rh-grid.refer .rh-side > * + *[b-mxcq3sqlme] { margin-top: 0; }
    .rh-grid.refer .rh-link[b-mxcq3sqlme], .rh-grid.refer .ip-count[b-mxcq3sqlme] { order: 3; }
    .rh-grid.refer .rh-steps[b-mxcq3sqlme] { order: 4; }
    .rh-grid.refer .rh-reqs[b-mxcq3sqlme] { order: 5; }
    .rh-grid.refer .rh-next[b-mxcq3sqlme] { order: 6; }
    .rh-grid.refer .rh-rewards[b-mxcq3sqlme] { order: 7; }
    .rh-grid.refer .rh-friends[b-mxcq3sqlme] { order: 8; }
    .rh-grid.refer .rh-own[b-mxcq3sqlme] { order: 9; }
    .rh-grid.refer .ip-rule[b-mxcq3sqlme] { order: 10; }
}
/* a phone: the stats two by two, the cards nearer their edges */
@container iphub (max-width: 599.98px) {
    .rh-stats[b-mxcq3sqlme] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .rh-stat[b-mxcq3sqlme] { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 12px; column-gap: 10px; }
    .rh-stat-icon[b-mxcq3sqlme] { width: 34px; height: 34px; }
    .rh-stat-value[b-mxcq3sqlme] { font-size: 24px; line-height: 28px; }
    .rh-card[b-mxcq3sqlme] { padding: 14px 14px 16px; }
    .rh-link-text[b-mxcq3sqlme] { font-size: 13.5px; }
    .rh-tab[b-mxcq3sqlme] { height: 40px; padding: 0 14px; }
}
@media (pointer: coarse) {
    .rh-tab[b-mxcq3sqlme], .rh-filter[b-mxcq3sqlme] { min-height: 44px; }
    .rh-copy[b-mxcq3sqlme], .rh-copy-message[b-mxcq3sqlme], .rh-signin[b-mxcq3sqlme] { min-height: 44px; }
}

/* the wheel's own sizes in a smaller page (js\wheel.js: under 1300, under 1100) */
@container ip (max-width: 1299.98px) { .ip-title[b-mxcq3sqlme] { font-size: 54px; } }
@container ip (max-width: 1099.98px) { .ip-title[b-mxcq3sqlme] { font-size: 46px; } .ip-line[b-mxcq3sqlme] { font-size: 18.5px; } }
/* (a narrow column's rows, under 702: Chat\InviteFriendRow.razor.css) */
/* a phone: the wheel's phone sizes, the column nearer the edges, room for the drawer's button */
@container ip (max-width: 599.98px) {
    .ip-column[b-mxcq3sqlme] { padding: 12px 16px 28px; }
    .ip-back[b-mxcq3sqlme] { margin-left: -9px; }
    .ip-title[b-mxcq3sqlme] { font-size: 36px; letter-spacing: -0.3px; }
    .ip-line[b-mxcq3sqlme] { font-size: 16px; }
    .ip-code[b-mxcq3sqlme] { font-size: 25px; }
}
/* with the drawer's button (a narrow screen): the way back beside it */
.ip-menu + .ip-back[b-mxcq3sqlme] { margin-left: 40px; }
@media (pointer: coarse) {
    .ip-back[b-mxcq3sqlme] { height: 44px; padding: 0 14px 0 9px; }
    .ip-menu[b-mxcq3sqlme] { width: 44px; height: 44px; }
    .ip-menu + .ip-back[b-mxcq3sqlme] { margin-left: 48px; }
    .ip-copy[b-mxcq3sqlme] { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .ip-back[b-mxcq3sqlme] { transition: none; }
}

/* the line of how many are left, unseen while the bar celebrates (its place kept: the card never jumps) */
.rh-next-left.held[b-mxcq3sqlme] {
    visibility: hidden;
}
/* /Chat/WheelPane.razor.rz.scp.css */
/* Spin the Wheel in the browser (Chat\WheelPane.razor; docs\chat\wheel\ui.md): the Vault's page look (Wheel\WheelTheme.xaml,
   WheelView.xaml, WheelRevealView.xaml) in the browser, after the owner's second picture of 2026-10-10. Every part stands
   where js\wheel.js places it (left, top, width, height: the rules of the Vault's WheelView.Fit); this file gives each its
   look. With prefers-reduced-motion nothing moves: the reveal only fades in, shortly. */

.wheel-pane[b-gnexph3r00] {
    position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: block;
    background: #0B071C; color: var(--brush-text, #F4F3F9); font-family: var(--ui-font);
    --wheel-word: linear-gradient(180deg, #C9A6FF 0%, #9D63FF 100%);
    --wheel-card: linear-gradient(135deg, #121332F0 0%, #0C0C29F0 100%);
    --wheel-card-chosen: linear-gradient(135deg, #3A1A96F2 0%, #2C1380F0 60%, #220F68F0 100%);
    --wheel-panel: #0C0F21EC;
    --wheel-panel-edge: #343256;
    --wheel-tile: #141B2CCC;
    --wheel-tile-edge: #283149;
    --wheel-row: #1A1F38D2;
    --wheel-check: #8B5CF6;
    --wheel-spin: linear-gradient(180deg, #6533CB 0%, #5527BB 50%, #4A1BAF 100%);
    --wheel-spin-hot: linear-gradient(180deg, #7443DB 0%, #6232CB 50%, #5525BE 100%);
}

/* the night: GemstoneRO's own banner (its castle at night by the lake), a deeper purple over it, darker at the top and the
   foot, the edges falling off into the night, and small stars in its sky (wheel.js) */
.wheel-backdrop[b-gnexph3r00] {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 85% 85% at 45% 42%, #05031000 50%, #05031078 100%),
        linear-gradient(180deg, #080516B0 0%, #08051638 12%, #08051600 38%, #06041230 78%, #060410C0 100%),
        linear-gradient(#3A108A38, #3A108A38),
        url("art/games/gemstonero/banner.jpg") 0% 45% / cover no-repeat,
        #0B071C;
}
.wheel-backdrop canvas[b-gnexph3r00] { position: absolute; left: 0; top: 0; }

/* the drawer's button on a narrow screen: at the board's top left, so it scrolls away with the title (wheel-polish: fixed,
   it lay over the words that scrolled under it), on a ground of its own over the night */
.wheel-menu[b-gnexph3r00] { position: absolute; left: 8px; top: 8px; z-index: 5; background: #0E0A22CC; border: 1px solid #FFFFFF1F; }
.wheel-menu:hover[b-gnexph3r00] { background: #1A1438E6; }

.wheel-scroll[b-gnexph3r00] { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3A3460 transparent; }
.wheel-board[b-gnexph3r00] { position: relative; }
.wheel-board > *[b-gnexph3r00] { position: absolute; }

/* the way back to Mini Games at the top left (the owner's third round of 2026-10-10): a quiet link with its arrow, lighter
   under the mouse */
.wheel-back[b-gnexph3r00] {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 7px; box-sizing: border-box; border-radius: 9px;
    font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: #CDBEF5; text-decoration: none; z-index: 2;
    text-shadow: 0 1px 6px #000000A0; transition: background-color 110ms ease-out, color 110ms ease-out;
}
.wheel-back:hover[b-gnexph3r00] { color: #fff; background: #FFFFFF14; }
.wheel-back:focus-visible[b-gnexph3r00] { outline: 2px solid #8F85F9; outline-offset: 2px; }
.wheel-back[b-gnexph3r00]  .icon { flex: 0 0 17px; stroke-width: 2.2; }
.wheel-nomount .wheel-back[b-gnexph3r00] { margin: -44px 0 0 -11px; }

/* the title and the line under it */
.wheel-title[b-gnexph3r00] {
    margin: 0; font-size: 62px; font-weight: 700; line-height: 1.12; white-space: nowrap; letter-spacing: -0.6px;
    color: var(--brush-text, #F4F3F9); text-shadow: 0 2px 18px #0000008C; pointer-events: none;
}
/* the accent word comes from TextParts.Accent (i18n1), built in code without this file's scope: ::deep reaches it */
.wheel-title[b-gnexph3r00]  .word { background: var(--wheel-word); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wheel-subtitle[b-gnexph3r00] { margin: 0; font-size: 22px; line-height: 1.3; color: #DCD5EE; text-shadow: 0 1px 8px #00000099; }

/* the Sound panel (the second picture): a round purple speaker button, the word Sound, the slider (bright purple up to its
   knob, a white knob in a purple ring) and its percentage */
.wheel-sound[b-gnexph3r00] {
    display: flex; align-items: center; padding: 0 21px 0 14px; box-sizing: border-box;
    background: var(--wheel-panel); border: 1.5px solid #6C42BC; border-radius: 14px; box-shadow: 0 12px 40px #00000066;
}
.wheel-mute[b-gnexph3r00] {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; background: #3A1D78; cursor: pointer;
}
.wheel-mute:hover[b-gnexph3r00] { background: #4C2A96; }
.wheel-mute:focus-visible[b-gnexph3r00], .wheel-volume:focus-visible[b-gnexph3r00] { outline: 2px solid #8F85F9; outline-offset: 2px; }
.sound-word[b-gnexph3r00] { flex: 0 0 auto; margin: 0 20px 1px 17px; font-size: 16.5px; color: var(--brush-text, #F4F3F9); white-space: nowrap; }
.sound-value[b-gnexph3r00] { flex: 0 0 auto; min-width: 48px; margin: 0 0 1px 14px; text-align: right; font-size: 16.5px; color: var(--brush-text, #F4F3F9); white-space: nowrap; }
.wheel-volume[b-gnexph3r00] {
    -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 40px; width: auto; height: 30px; background: transparent; cursor: pointer; margin: 0;
}
.wheel-volume[b-gnexph3r00]::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px; background: linear-gradient(90deg, #A365F9 0 var(--fill, 100%), #262A4E var(--fill, 100%) 100%);
}
.wheel-volume[b-gnexph3r00]::-moz-range-track { height: 6px; border-radius: 3px; background: #262A4E; }
.wheel-volume[b-gnexph3r00]::-moz-range-progress { height: 6px; border-radius: 3px; background: #A365F9; }
.wheel-volume[b-gnexph3r00]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid #7346D0; box-sizing: border-box;
}
.wheel-volume[b-gnexph3r00]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #7346D0; box-sizing: border-box; }

/* the three server cards: dark navy glass, the game's art fading in from the right, the name and the tagline on the left
   (as tall as the words need: never cut); the chosen one purple, lit, with its bright edge and check. One under the other
   beside the wheel; side by side over it in a narrow window (.row); small, one under the other, on a phone (.stack) */
.wheel-cards[b-gnexph3r00] { display: flex; flex-direction: column; gap: 16px; }
.wheel-cards.row[b-gnexph3r00] { flex-direction: row; gap: 16px; justify-content: center; }
.wheel-cards.stack[b-gnexph3r00] { gap: 8px; }
.wheel-card[b-gnexph3r00] {
    position: relative; display: block; width: 100%; min-height: 110px; padding: 0; border-radius: 14px; text-align: left;
    background: none; color: inherit; cursor: pointer; isolation: isolate;
}
.wheel-cards.row .wheel-card[b-gnexph3r00] { flex: 1 1 0; min-width: 0; width: auto; }
.wheel-cards.stack .wheel-card[b-gnexph3r00] { min-height: 64px; }
.wc-ground[b-gnexph3r00] {
    position: absolute; inset: 0; border-radius: 14px; background: var(--wheel-card); border: 1.2px solid #414A78; z-index: -2;
    transition: border-color 160ms ease-out;
}
.wheel-card:hover:not(:disabled) .wc-ground[b-gnexph3r00] { border-color: #7E88B0; }
.wheel-card:focus-visible[b-gnexph3r00] { outline: 2px solid #8F85F9; outline-offset: 3px; }
.wc-light[b-gnexph3r00] { position: absolute; inset: -9px; border-radius: 22px; z-index: -3; opacity: 0; background: radial-gradient(closest-side, #7A3CFF80 60%, #7A3CFF00 100%); }
.wc-art[b-gnexph3r00] {
    position: absolute; right: 1.2px; top: 1.2px; bottom: 1.2px; width: 62%; height: calc(100% - 2.4px); object-fit: cover; object-position: 50% 12%;
    border-radius: 0 13px 13px 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #0000 0%, #000 42%, #000 100%); mask-image: linear-gradient(90deg, #0000 0%, #000 42%, #000 100%);
}
.wc-words[b-gnexph3r00] { position: relative; display: flex; flex-direction: column; padding: 12px 52px 14px 20px; pointer-events: none; }
.wc-name[b-gnexph3r00] {
    font-family: var(--title-font); font-size: 31px; font-weight: 700; line-height: 42px; white-space: nowrap;
    color: var(--brush-text, #F4F3F9); text-shadow: 0 1px 6px #0000008C;
}
.wc-tagline[b-gnexph3r00] { margin-top: 2px; max-width: 60%; font-size: 15.5px; line-height: 20px; color: #CFCBE6; text-shadow: 0 1px 4px #000000B0; }
/* side by side (a tablet held upright: each card about 200 wide), the tagline takes the card's width under its name, in
   two lines rather than four narrow ones (wheel-polish, 2026-10-12), over the art's darker side; the name keeps clear of
   the ring */
.wheel-cards.row .wc-words[b-gnexph3r00] { padding: 12px 14px 14px 16px; }
.wheel-cards.row .wc-name[b-gnexph3r00] { margin-right: 34px; }
.wheel-cards.row .wc-tagline[b-gnexph3r00] { max-width: none; font-size: 14px; line-height: 18px; text-shadow: 0 1px 3px #000000E0, 0 0 10px #000000B0; }
.wheel-cards.row .wc-art[b-gnexph3r00] {
    width: 66%;
    -webkit-mask-image: linear-gradient(90deg, #0000 0%, #0004 40%, #000A 72%, #000 100%); mask-image: linear-gradient(90deg, #0000 0%, #0004 40%, #000A 72%, #000 100%);
}
.wc-ring[b-gnexph3r00] {
    position: absolute; right: 13px; top: 12px; width: 27px; height: 27px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; border: 1.6px solid #C9CBE0; background: #070B1655; color: #fff; pointer-events: none;
}
.wheel-card.chosen .wc-ground[b-gnexph3r00] { background: var(--wheel-card-chosen); border: 2.5px solid #B06CF6; }
.wheel-card.chosen .wc-light[b-gnexph3r00] { opacity: 1; }
.wheel-card.chosen .wc-ring[b-gnexph3r00] { background: var(--wheel-check); border: 1.4px solid #E4D2FF; }
.wheel-card.chosen .wc-ring[b-gnexph3r00]  .icon { stroke-width: 2.6; }
.wheel-card:disabled[b-gnexph3r00] { cursor: default; opacity: .82; }
.wheel-cards.stack .wc-words[b-gnexph3r00] { padding: 8px 46px 9px 16px; }
.wheel-cards.stack .wc-name[b-gnexph3r00] { font-size: 22px; line-height: 28px; }
.wheel-cards.stack .wc-tagline[b-gnexph3r00] { max-width: 60%; font-size: 13.5px; line-height: 17px; }

/* the wheel: its canvases (wheel.js) and the pointer's probe over the gem */
.wheel-disc canvas[b-gnexph3r00] { position: absolute; display: block; pointer-events: none; }
.wheel-disc .turn[b-gnexph3r00] { transform-origin: 50% 50%; will-change: transform; transition: opacity 200ms ease-out; }
.wheel-disc .gem[b-gnexph3r00] { will-change: transform; }
.wheel-disc .pointer[b-gnexph3r00] { position: absolute; pointer-events: none; }
.poring[b-gnexph3r00] { pointer-events: none; }

/* the big button: the deep purple of the second picture, white words, a soft light around it while it can be pressed. While
   it cannot be pressed (the countdown, the wheel turning) it keeps that look, only a little muted and without its light */
.wheel-spin[b-gnexph3r00] {
    display: flex; align-items: center; justify-content: center; gap: 18px; border-radius: 13px; color: #fff;
    font-size: 20px; font-weight: 700; letter-spacing: .4px; background: var(--wheel-spin); cursor: pointer; z-index: 2;
    box-shadow: 0 1px 0 #FFFFFF3D inset, 0 0 24px #7A4CF08C;
    transition: box-shadow 160ms ease-out, filter 160ms ease-out;
}
.wheel-spin:hover:not(:disabled)[b-gnexph3r00] { background: var(--wheel-spin-hot); box-shadow: 0 1px 0 #FFFFFF4D inset, 0 0 30px #8A5AFAA6; }
.wheel-spin:active:not(:disabled)[b-gnexph3r00] { padding-top: 2px; filter: brightness(.93); }
.wheel-spin:focus-visible[b-gnexph3r00] { outline: 2px solid #E6CFFF; outline-offset: 3px; }
/* when it can be pressed, a soft light breathes around it three times, slowly, then stays lit (wheel-polish: "it is
   ready", never a rush, and nothing moves while the page rests); an outer shadow is drawn only outside the button, and
   only its opacity moves (no repaint) */
.wheel-spin[b-gnexph3r00]::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
    box-shadow: 0 0 34px 6px #8A5AFAB3, 0 0 70px 10px #7A4CF04D;
}
.wheel-spin:not(:disabled)[b-gnexph3r00]::before { opacity: .5; animation: wheel-ready-b-gnexph3r00 2800ms ease-in-out 3; }
.wheel-spin:disabled[b-gnexph3r00] { cursor: default; box-shadow: none; }
.wheel-spin:disabled[b-gnexph3r00]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #0C0620; opacity: .3; pointer-events: none; }
.wheel-spin:disabled > *[b-gnexph3r00] { opacity: .78; }
.wheel-spin[b-gnexph3r00]  .icon { width: 27px; height: 27px; }

/* an admin's free spin: a small outlined button in the bottom left corner */
.wheel-grant[b-gnexph3r00] {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border-radius: 9px; box-sizing: border-box;
    border: 1px solid #5A4A9A; background: #120F2AE0; color: var(--brush-text, #F4F3F9); font-size: 13px; font-weight: 600; cursor: pointer; z-index: 2;
}
.wheel-grant[hidden][b-gnexph3r00] { display: none; }
.wheel-grant:hover:not(:disabled)[b-gnexph3r00] { border-color: #8A74DA; background: #1D1840E8; }
.wheel-grant:focus-visible[b-gnexph3r00] { outline: 2px solid #8F85F9; outline-offset: 2px; }
.wheel-grant:disabled[b-gnexph3r00] { cursor: default; opacity: .55; }

/* the page without its script (js\wheel.js could not be loaded): the title and why, one under the other */
.wheel-nomount[b-gnexph3r00] {
    position: absolute; inset: 0; z-index: 1; overflow-y: auto; padding: 56px 40px 40px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.wheel-nomount .wheel-title[b-gnexph3r00] { font-size: clamp(34px, 7vw, 62px); white-space: normal; }
.wheel-nomount .nomount-line[b-gnexph3r00] { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.45; color: #E2DAF6; text-shadow: 0 1px 6px #000000B0; }

/* its one line */
.wheel-lines[b-gnexph3r00] { text-align: center; pointer-events: none; }
.wheel-lines .line[b-gnexph3r00] {
    margin: 0; font-size: 15.2px; line-height: 22px; color: #E2DAF6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 6px #000000B0;
}
/* the countdown's digits keep one width, so the line stands still while it counts */
.wheel-lines .countdown[b-gnexph3r00] { font-weight: 600; font-variant-numeric: tabular-nums; }
.wheel-lines .available[b-gnexph3r00] { color: #CFF7DF; font-weight: 600; }
.available-dot[b-gnexph3r00] {
    display: inline-block; width: 9px; height: 9px; margin: 0 9px 1px 0; border-radius: 50%; vertical-align: middle;
    background: #3EDE72; box-shadow: 0 0 10px #3EDE72A6;
}
.wheel-lines .error[b-gnexph3r00] { color: var(--brush-warning-text, #FBDFA6); font-size: 14px; white-space: normal; }
/* calm lines (the owner's choices of 2026-10-12): a game account that never logged in to the game (SpinPlayFirst), and the
   PC's free spin of the day had by another game account (PcCooldown, a countdown): the line's own colour, never a fault's,
   and whole on every width */
.wheel-lines .error.calm[b-gnexph3r00] { color: #E2DAF6; font-size: 15.2px; }
.wheel-lines .countdown.pc[b-gnexph3r00] { white-space: normal; text-overflow: clip; text-wrap: balance; }
/* the line of a wheel that cannot be shown (Unavailable): whole on every width, as the PC's countdown is. A long line (the
   connection gate's of 161 characters, or longer) takes two or three lines beside TRY AGAIN; before, it ended in "..."
   (found by the machine check's browser tests of 2026-10-14) */
.wheel-lines .line.whole[b-gnexph3r00] { white-space: normal; text-overflow: clip; text-wrap: balance; }

/* the panels on the right */
.wheel-rewards[b-gnexph3r00], .wheel-yours[b-gnexph3r00] { background: var(--wheel-panel); border: 1px solid var(--wheel-panel-edge); border-radius: 16px; box-shadow: 0 12px 40px #00000066; }
.wheel-rewards[b-gnexph3r00] { display: flex; flex-direction: column; padding: 13px 0 10px; box-sizing: border-box; container-type: inline-size; }
/* its two tabs as titles (the Vault's Wheel.Button.Tab): the one shown bright with its purple bar under it */
.rewards-tabs[b-gnexph3r00] { display: flex; gap: 10px; margin: 0 15px; flex: 0 0 auto; }
/* a longer language's two tabs share the row: each may give way and wrap its words (i18n1: German's were 50 px wider
   than the panel); a tab that fits keeps one line, so English is drawn as before */
.rewards-tab[b-gnexph3r00] {
    position: relative; padding: 4px 6px 9px; background: none; color: #8E8BAE; cursor: pointer;
    font-size: min(20px, 5cqi); font-weight: 700; line-height: 1.25; flex: 0 1 auto; text-align: left;
}
.rewards-tab[b-gnexph3r00]::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 3px; border-radius: 1.5px; background: #A365F9; opacity: 0; }
.rewards-tab.on[b-gnexph3r00] { color: var(--brush-text, #F4F3F9); }
.rewards-tab.on[b-gnexph3r00]::after { opacity: 1; }
.rewards-tab:hover[b-gnexph3r00] { opacity: .92; }
.rewards-tab:focus-visible[b-gnexph3r00] { outline: 2px solid #8F85F9; outline-offset: 0; border-radius: 8px; }
.wheel-rewards .note[b-gnexph3r00] { margin: 6px 21px 9px; font-size: 14.5px; color: var(--brush-text-muted, #8999AA); }
/* a short panel gives up the line under its tabs, so a whole row of rewards still shows (wheel.js) */
.wheel-rewards.short .note[b-gnexph3r00] { display: none; }
.wheel-rewards.short .tiles[b-gnexph3r00], .wheel-rewards.short .recent[b-gnexph3r00] { margin-top: 8px; }
.wheel-rewards .tiles[b-gnexph3r00] {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 0 12px 2px 18px;
    margin-right: 6px; align-content: start; scrollbar-width: thin; scrollbar-color: #3A3460 transparent;
}
.wheel-rewards .tiles.dimmed[b-gnexph3r00] { opacity: .5; }
/* each tier under its name in its colour, the rarest first (wheel-polish) */
.tier-head[b-gnexph3r00] {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin: 4px 2px -4px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; line-height: 16px; color: color-mix(in srgb, var(--tier) 82%, #fff);
}
.tier-head:first-child[b-gnexph3r00] { margin-top: 0; }
.tier-head[b-gnexph3r00]::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 45%, transparent), transparent); }
.tier-gem[b-gnexph3r00] { flex: 0 0 9px; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--tier); box-shadow: 0 0 8px var(--tier-glow, transparent); }
/* a tile in its tier's colour: its bar, its edge and a light from its top */
.tile[b-gnexph3r00] {
    position: relative; min-height: 101px; box-sizing: border-box; border-radius: 11px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 13%, transparent) 0%, transparent 58%), var(--wheel-tile);
    border: 1px solid color-mix(in srgb, var(--tier) 34%, var(--wheel-tile-edge));
    display: flex; flex-direction: column; align-items: center; padding: 9px 6px 7px;
}
.tile-bar[b-gnexph3r00] { position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 0 0 2px 2px; background: var(--tier); opacity: .95; box-shadow: 0 0 8px var(--tier-glow, transparent); }
.tile img[b-gnexph3r00] { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 6px var(--tier-glow, transparent)); }
.tile-qty[b-gnexph3r00] { position: absolute; right: 10px; top: 8px; font-size: 13px; font-weight: 600; color: var(--brush-text-secondary, #B4C6DB); }
.tile-name[b-gnexph3r00] {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin-top: 1px; font-size: 14.5px; font-weight: 600; line-height: 16px;
    text-align: center; color: var(--brush-text, #F4F3F9);
}
.tier-common[b-gnexph3r00] { --tier: #D9E2F2; }
.tier-uncommon[b-gnexph3r00] { --tier: #3DE6A3; }
.tier-rare[b-gnexph3r00] { --tier: #5E9BFF; --tier-glow: #5E9BFF90; }
.tier-epic[b-gnexph3r00] { --tier: #C07CFF; --tier-glow: #C07CFF90; }
.tier-legendary[b-gnexph3r00] { --tier: #FFC94D; --tier-glow: #FFC94D90; }

/* "Your rewards": the account's recent spins, each with its icon in its tier's colour, the item, who got it where and
   when, and its delivery as a small chip in its colour */
.recent[b-gnexph3r00] {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 2px 18px; margin-right: 6px;
    scrollbar-width: thin; scrollbar-color: #3A3460 transparent;
}
.recent-row[b-gnexph3r00] {
    display: flex; gap: 12px; align-items: center; padding: 8px 10px 9px; box-sizing: border-box; border-radius: 11px;
    background: var(--wheel-tile); border: 1px solid var(--wheel-tile-edge);
}
.recent-icon[b-gnexph3r00] {
    flex: 0 0 42px; width: 42px; height: 42px; box-sizing: border-box; border-radius: 10px; background: var(--wheel-row); border: 1.5px solid var(--tier);
    display: flex; align-items: center; justify-content: center; align-self: flex-start;
}
.recent-icon img[b-gnexph3r00] { width: 32px; height: 32px; object-fit: contain; }
.recent-words[b-gnexph3r00] { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.recent-name[b-gnexph3r00] { font-size: 14.5px; font-weight: 600; line-height: 18px; color: var(--brush-text, #F4F3F9); overflow-wrap: anywhere; }
.recent-who[b-gnexph3r00] { margin-top: 1px; font-size: 13px; line-height: 17px; color: var(--brush-text-muted, #8999AA); overflow-wrap: anywhere; }
.recent-row .delivery-chip[b-gnexph3r00] { margin-top: 5px; }
/* no spin yet: a gift and the line, in the panel's middle */
.recent-empty-box[b-gnexph3r00] {
    margin: 10px 18px 0; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    border: 1px dashed #3A3A66; border-radius: 12px; color: #9C8CD8;
}
.recent-empty[b-gnexph3r00] { margin: 0; font-size: 15px; line-height: 20px; color: var(--brush-text-secondary, #B4C6DB); }
/* the reward just shown lands in "Your rewards" (and as the last reward) with a short light in its tier's colour */
.recent-row[data-fresh][b-gnexph3r00] { animation: wheel-landed-b-gnexph3r00 1600ms cubic-bezier(.2,.8,.3,1) both; }
.recent-row[data-fresh] .recent-icon[b-gnexph3r00], .yours-last[data-fresh] .last-icon[b-gnexph3r00] { animation: wheel-landed-icon-b-gnexph3r00 900ms cubic-bezier(.2,.8,.3,1) both; }

/* a reward's delivery as a colour (the Vault's WheelDeliveryBrush): sending lavender, taking longer amber, in the mailbox
   green, not sent rose, an admin preview's dummy grey */
.look-none[b-gnexph3r00] { --look: #A3A6C4; }
.look-sending[b-gnexph3r00] { --look: #C2AEFF; }
.look-delayed[b-gnexph3r00] { --look: #F5C26B; }
.look-delivered[b-gnexph3r00] { --look: #5BE39B; }
.look-failed[b-gnexph3r00] { --look: #FF9696; }
.delivery-chip[b-gnexph3r00] {
    display: inline-block; padding: 1px 9px 2px; border-radius: 9px; font-size: 12.5px; font-weight: 600; line-height: 17px; white-space: nowrap;
    color: var(--look); background: color-mix(in srgb, var(--look) 14%, transparent); border: 1px solid var(--look);
}

/* "Your game account" */
.wheel-yours[b-gnexph3r00] { padding: 15px 22px 17px 21px; box-sizing: border-box; container-type: inline-size; }
.wheel-yours h2[b-gnexph3r00] { margin: 0; font-size: 19px; font-weight: 700; }
.yours-head[b-gnexph3r00] { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
/* the title on one line: beside Sign out in a narrow column it is drawn a little smaller */
.yours-head h2[b-gnexph3r00] { white-space: nowrap; }
.yours-head.with-out h2[b-gnexph3r00] { font-size: min(19px, calc((100cqi - 90px) / 9.4)); }
.yours-out[b-gnexph3r00] { flex: 0 0 auto; margin: -5px 0; }
.yours-row[b-gnexph3r00] {
    margin-top: 10px; min-height: 52px; display: flex; align-items: center; border-radius: 11px; background: var(--wheel-row);
    border: 1px solid var(--wheel-tile-edge); overflow: hidden; container-type: inline-size;
}
.yours-art[b-gnexph3r00] {
    width: 78px; height: 50px; align-self: stretch; object-fit: cover; object-position: 50% 10%; margin: 1px; border-radius: 10px 0 0 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, #0000 100%); mask-image: linear-gradient(90deg, #000 55%, #0000 100%);
}
.yours-words[b-gnexph3r00] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin: 6px 8px 6px 14px; }
/* the name whole on one line: a narrow panel draws it a little smaller (never broken inside the word) */
.yours-name[b-gnexph3r00] { font-size: min(18.5px, calc((100cqi - 150px) / 4.9)); font-weight: 600; white-space: nowrap; }
.yours-who[b-gnexph3r00] { margin-top: 1px; font-size: 13.5px; line-height: 17px; color: var(--brush-text-secondary, #B4C6DB); overflow-wrap: anywhere; }
.yours-offline[b-gnexph3r00] { margin: 10px 0 0; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 19px; color: var(--brush-warning-text, #FBDFA6); }
.yours-offline[b-gnexph3r00]  .icon { flex: 0 0 16px; margin: 2px 0 0 1px; }

/* signed out: the sign-in form */
.yours-login[b-gnexph3r00] { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.login-title[b-gnexph3r00] { font-size: 15.5px; font-weight: 600; line-height: 20px; color: var(--brush-text, #F4F3F9); margin-bottom: 1px; }
.yours-login .field[b-gnexph3r00] { width: 100%; box-sizing: border-box; font-size: 15px; }
.login-submit[b-gnexph3r00] { width: 100%; margin-top: 2px; }

/* signed in: the characters, one of them gets the reward (the list as tall as the column allows: wheel.js) */
.yours-account[b-gnexph3r00] { margin-top: 11px; }
.chars-title[b-gnexph3r00] { margin: 0; font-size: 15px; line-height: 20px; color: var(--brush-text, #F4F3F9); }
.chars-loading[b-gnexph3r00] { margin: 8px 0 0; font-size: 14px; color: var(--brush-text-muted, #8999AA); }
.chars-error[b-gnexph3r00] { margin-top: 8px; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 14px; line-height: 19px; color: var(--brush-warning-text, #FBDFA6); }
.chars-empty[b-gnexph3r00] { margin: 0; font-size: 14.5px; line-height: 19px; color: var(--brush-text-secondary, #B4C6DB); }
.chars[b-gnexph3r00] {
    margin-top: 9px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3A3460 transparent;
}
.char[b-gnexph3r00] {
    display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; padding: 6px 11px 6px 8px; box-sizing: border-box; border-radius: 10px; text-align: left;
    background: var(--wheel-row); border: 1.2px solid var(--wheel-tile-edge); color: inherit; cursor: pointer; transition: border-color 120ms ease-out;
}
/* the character's head (the client's default head of its gender, or a drawn silhouette): a round portrait on its own
   ground; the chosen one's in a purple ring */
.char-head[b-gnexph3r00] {
    position: relative; flex: 0 0 40px; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #3A2F6E 0%, #221A48 70%, #1A1438 100%); border: 2px solid #4A4380;
    color: #9C8FD6;
}
.char-head .head-shape[b-gnexph3r00] { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; opacity: .85; }
/* the picture over the silhouette: its own ground hides the silhouette while it shows; a picture that cannot be loaded hides
   itself (js\wheel.js) and the silhouette shows. The head is pixel art (the client's sprite twice or four times): drawn at
   32 units (36 less its 2 of padding), sharp where that is a whole number of the picture's pixels */
.char-head img[b-gnexph3r00] {
    position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 2px; object-fit: contain;
    background: radial-gradient(circle at 50% 30%, #3A2F6E 0%, #221A48 70%, #1A1438 100%);
}
@media (resolution: 1dppx), (resolution: 2dppx), (resolution: 4dppx) {
    .char-head img[b-gnexph3r00] { image-rendering: pixelated; }
}
.char.chosen .char-head[b-gnexph3r00] { border-color: #C59BFF; box-shadow: 0 0 0 2px #8B5CF655, 0 0 12px #A365F966; }
.char:hover:not(:disabled)[b-gnexph3r00] { border-color: #7E88B0; }
.char:focus-visible[b-gnexph3r00] { outline: 2px solid #8F85F9; outline-offset: 2px; }
.char:disabled[b-gnexph3r00] { cursor: default; opacity: .82; }
.char.chosen[b-gnexph3r00] { background: var(--wheel-card-chosen); border-color: #B06CF6; }
.char-words[b-gnexph3r00] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.char-name[b-gnexph3r00] { font-size: 15.5px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.char-line[b-gnexph3r00] { font-size: 13px; line-height: 17px; color: var(--brush-text-muted, #8999AA); }
.char.chosen .char-line[b-gnexph3r00] { color: #CFC6EE; }
.char-ring[b-gnexph3r00] {
    flex: 0 0 24px; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1.6px solid #C9CBE0; background: #070B1655; color: #fff;
}
.char.chosen .char-ring[b-gnexph3r00] { background: var(--wheel-check); border: 1.4px solid #E4D2FF; }
.char.chosen .char-ring[b-gnexph3r00]  .icon { stroke-width: 2.6; }

.yours-error[b-gnexph3r00] { margin: 9px 0 0; font-size: 14px; line-height: 19px; color: var(--brush-warning-text, #FBDFA6); }
.yours-last[b-gnexph3r00] { margin-top: 12px; display: flex; align-items: center; gap: 13px; }
.yours-last.folded[b-gnexph3r00] { display: none; }
/* (freespin1 and the preview's finding 1: in a low window the line about the mailbox folds away too, after the last reward) */
.yours-line.folded[b-gnexph3r00] { display: none; }
.last-icon[b-gnexph3r00] {
    flex: 0 0 42px; width: 42px; height: 42px; box-sizing: border-box; border-radius: 10px; background: var(--wheel-tile); border: 1.5px solid var(--tier);
    display: flex; align-items: center; justify-content: center;
}
.last-icon img[b-gnexph3r00] { width: 32px; height: 32px; object-fit: contain; }
.last-text[b-gnexph3r00] { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.last-words[b-gnexph3r00] { font-size: 14.5px; line-height: 19px; color: var(--brush-text-secondary, #B4C6DB); }
.yours-line[b-gnexph3r00] { margin: 11px 0 0; display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 19px; color: var(--brush-text-muted, #8999AA); }
.yours-line[b-gnexph3r00]  .icon { flex: 0 0 18px; margin: 1px 0 0 1px; color: #8FB0E8; }

/* ───────────── the reveal ───────────── */
.wheel-reveal[b-gnexph3r00] { pointer-events: none; visibility: hidden; z-index: 3; }
.wheel-reveal.on[b-gnexph3r00] { visibility: visible; }
.wheel-reveal > *[b-gnexph3r00] { position: absolute; }
.wheel-reveal .dim[b-gnexph3r00] {
    border-radius: 50%; background: #06030FB0; opacity: 0;
    -webkit-mask-image: linear-gradient(180deg, #0000 0%, #0000 14%, #000 34%); mask-image: linear-gradient(180deg, #0000 0%, #0000 14%, #000 34%);
}
.wheel-reveal.on .dim[b-gnexph3r00] { animation: wheel-fade-b-gnexph3r00 300ms ease-out both; }
.wheel-reveal .reveal-card[b-gnexph3r00] {
    pointer-events: auto; padding: 14px 24px 18px; border-radius: 20px; text-align: center; opacity: 0;
    background: linear-gradient(180deg, #1D1240F5 0%, #120B2AF8 100%); border: 1.5px solid var(--tier, #D9E2F2);
    box-shadow: 0 0 0 1px #00000066, 0 18px 60px #000000A0, 0 0 40px color-mix(in srgb, var(--tier, #D9E2F2) 26%, transparent);
}
/* the win's pop (wheel-polish, 2026-10-12), every tier: the card springs in, the icon pops in past its size and back with a
   little turn, a ring of the tier's light leaves it, a light sweeps over the item's own shape, "You won!" and the item rise
   in, the tier's name pops in in its colour; the particles are wheel.js's (more and wider for rarer tiers); rare and up keep
   their rays, epic and up their rings, the legendary its flash and a short shake of the card. All of it ends by itself
   within about two seconds */
.wheel-reveal.on .reveal-card[b-gnexph3r00] { animation: wheel-card-b-gnexph3r00 380ms cubic-bezier(.2,.9,.3,1.15) both; }
.wheel-reveal.on.tier-legendary .reveal-card[b-gnexph3r00] { animation: wheel-card-b-gnexph3r00 380ms cubic-bezier(.2,.9,.3,1.15) both, wheel-shake-b-gnexph3r00 480ms 380ms ease-out; }
.reveal-icon[b-gnexph3r00] { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; }
.reveal-glow[b-gnexph3r00] {
    position: absolute; width: 168px; height: 168px; border-radius: 50%; left: 50%; top: 50%; margin: -84px 0 0 -84px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tier, #D9E2F2) 62%, transparent) 0%, color-mix(in srgb, var(--tier, #D9E2F2) 19%, transparent) 55%, transparent 100%);
}
.wheel-reveal.on .reveal-glow[b-gnexph3r00] { animation: wheel-glow-b-gnexph3r00 1800ms ease-out both; }
/* the ring of light that leaves the icon as it pops (wider for rarer tiers) */
.reveal-halo[b-gnexph3r00] {
    position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; opacity: 0;
    box-sizing: border-box; border: 3px solid color-mix(in srgb, var(--tier, #D9E2F2) 88%, #fff); pointer-events: none;
    box-shadow: 0 0 16px color-mix(in srgb, var(--tier, #D9E2F2) 70%, transparent), inset 0 0 12px color-mix(in srgb, var(--tier, #D9E2F2) 50%, transparent);
    --halo-to: 2;
}
.tier-uncommon .reveal-halo[b-gnexph3r00] { --halo-to: 2.3; }
.tier-rare .reveal-halo[b-gnexph3r00] { --halo-to: 2.7; }
.tier-epic .reveal-halo[b-gnexph3r00], .tier-legendary .reveal-halo[b-gnexph3r00] { --halo-to: 3.1; }
.wheel-reveal.on .reveal-halo[b-gnexph3r00] { animation: wheel-halo-b-gnexph3r00 720ms 150ms cubic-bezier(.1,.7,.3,1) both; }
.reveal-icon img[b-gnexph3r00] { position: relative; width: 108px; height: 108px; object-fit: contain; image-rendering: auto; }
.wheel-reveal.on .reveal-icon img[b-gnexph3r00] { animation: wheel-pop-b-gnexph3r00 720ms 60ms both; }
/* the light that sweeps over the item: a band of light masked by the icon itself (its style names the picture) */
.reveal-shine[b-gnexph3r00] {
    position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px; pointer-events: none; opacity: 0;
    background: linear-gradient(115deg, #FFFFFF00 0%, #FFFFFF00 40%, #FFFFFFD9 50%, #FFFFFF00 60%, #FFFFFF00 100%) no-repeat;
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.wheel-reveal.on .reveal-shine[b-gnexph3r00] { animation: wheel-shine-b-gnexph3r00 760ms 560ms ease-in-out both; }
.reveal-title[b-gnexph3r00] { font-size: 30px; font-weight: 700; line-height: 1.2; }
.wheel-reveal.on .reveal-title[b-gnexph3r00] { animation: wheel-rise-b-gnexph3r00 340ms 170ms ease-out both; }
.reveal-name[b-gnexph3r00] { margin-top: 4px; font-size: 22px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; color: color-mix(in srgb, var(--tier, #D9E2F2) 45%, #fff); }
.wheel-reveal.on .reveal-name[b-gnexph3r00] { animation: wheel-rise-b-gnexph3r00 340ms 230ms ease-out both; }
.tier-rare .reveal-name[b-gnexph3r00], .tier-epic .reveal-name[b-gnexph3r00], .tier-legendary .reveal-name[b-gnexph3r00] { color: color-mix(in srgb, var(--tier) 75%, #fff); }
.reveal-server[b-gnexph3r00] { margin-top: 2px; font-size: 16px; color: var(--brush-text-secondary, #B4C6DB); }
/* the tier's name: a chip in its colour that pops in (rare and up with a light of their own) */
.reveal-chip[b-gnexph3r00] {
    display: inline-block; margin-top: 8px; padding: 3px 13px 4px; border-radius: 11px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--tier, #D9E2F2) 70%, #fff); background: color-mix(in srgb, var(--tier, #D9E2F2) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier, #D9E2F2) 56%, transparent);
}
.tier-rare .reveal-chip[b-gnexph3r00], .tier-epic .reveal-chip[b-gnexph3r00], .tier-legendary .reveal-chip[b-gnexph3r00] { box-shadow: 0 0 14px color-mix(in srgb, var(--tier) 45%, transparent); }
.wheel-reveal.on .reveal-chip[b-gnexph3r00] { animation: wheel-chip-b-gnexph3r00 460ms 360ms cubic-bezier(.2,.9,.3,1.3) both; }
.reveal-note[b-gnexph3r00] { margin: 11px auto 0; max-width: 320px; display: flex; gap: 7px; align-items: flex-start; text-align: left; font-size: 13px; line-height: 18px; color: var(--brush-text-muted, #8999AA); }
.reveal-note[b-gnexph3r00]  .icon { flex: 0 0 15px; margin-top: 1px; }
/* the reward's way to the mailbox (wheel2), live: its line in its delivery's colour */
.reveal-delivery[b-gnexph3r00] {
    margin: 11px auto 0; max-width: 330px; display: flex; gap: 8px; align-items: flex-start; text-align: left;
    font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--look);
}
.reveal-delivery[b-gnexph3r00]  .icon { flex: 0 0 16px; margin-top: 1px; }
.reveal-close[b-gnexph3r00] { margin-top: 13px; min-width: 140px; }
/* a short screen (a phone held sideways, at most 520 px high): a smaller card, so it fits whole on the screen (wheel.js
   brings it into view when it opens) */
@media (max-height: 520px) {
    .wheel-reveal .reveal-card[b-gnexph3r00] { padding: 8px 18px 12px; scroll-margin: 8px; }
    .reveal-icon[b-gnexph3r00] { height: 64px; }
    .reveal-glow[b-gnexph3r00] { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
    .reveal-halo[b-gnexph3r00] { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
    .reveal-icon img[b-gnexph3r00] { width: 56px; height: 56px; }
    .reveal-shine[b-gnexph3r00] { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
    .reveal-title[b-gnexph3r00] { font-size: 22px; }
    .reveal-name[b-gnexph3r00] { margin-top: 2px; font-size: 18px; }
    .reveal-server[b-gnexph3r00] { font-size: 14px; }
    .reveal-chip[b-gnexph3r00] { margin-top: 5px; }
    .reveal-note[b-gnexph3r00], .reveal-delivery[b-gnexph3r00] { margin-top: 6px; }
    .reveal-close[b-gnexph3r00] { margin-top: 8px; }
}

/* the tier's effects, out of the icon's middle (--icon-x, --icon-y): rays from rare up, rings from epic up, a flash for
   the legendary; the particles are wheel.js's */
.wheel-reveal .rays[b-gnexph3r00], .wheel-reveal .burst[b-gnexph3r00], .wheel-reveal .flash[b-gnexph3r00] { left: var(--icon-x, 50%); top: var(--icon-y, 40%); transform: translate(-50%, -50%); opacity: 0; }
.wheel-reveal .rays[b-gnexph3r00] {
    width: calc(var(--wheel, 500px) * 0.85 / 0.92); height: calc(var(--wheel, 500px) * 0.85 / 0.92); border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tier) 85%, transparent) 0deg 5.6deg, transparent 5.6deg 25.7deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000A 42%, #0004 78%, #0000 100%); mask-image: radial-gradient(closest-side, #000 0%, #000A 42%, #0004 78%, #0000 100%);
}
.tier-legendary .rays[b-gnexph3r00] { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tier) 85%, transparent) 0deg 4.4deg, transparent 4.4deg 20deg); }
.tier-epic .rays[b-gnexph3r00], .tier-legendary .rays[b-gnexph3r00] { width: calc(var(--wheel, 500px) / 0.92); height: calc(var(--wheel, 500px) / 0.92); }
.wheel-reveal.on.tier-rare .rays[b-gnexph3r00] { animation: wheel-rays-rare-b-gnexph3r00 2000ms ease-out both; }
.wheel-reveal.on.tier-epic .rays[b-gnexph3r00] { animation: wheel-rays-epic-b-gnexph3r00 2000ms ease-out both; }
.wheel-reveal.on.tier-legendary .rays[b-gnexph3r00] { animation: wheel-rays-legendary-b-gnexph3r00 2000ms ease-out both; }
.wheel-reveal .burst[b-gnexph3r00] { width: 120px; height: 120px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--tier) 88%, transparent); }
.wheel-reveal .burst.two[b-gnexph3r00] { border-color: #FFF2C8C0; }
.wheel-reveal.on.tier-epic .burst.one[b-gnexph3r00], .wheel-reveal.on.tier-legendary .burst.one[b-gnexph3r00] { animation: wheel-burst-b-gnexph3r00 800ms 80ms ease-out both; }
.wheel-reveal.on.tier-legendary .burst.two[b-gnexph3r00] { animation: wheel-burst-big-b-gnexph3r00 900ms 300ms ease-out both; }
.wheel-reveal .flash[b-gnexph3r00] { width: calc(var(--wheel, 500px) * 0.95); height: calc(var(--wheel, 500px) * 0.95); border-radius: 50%; background: radial-gradient(closest-side, #FFF6D8 0%, #FFE08A80 40%, transparent 100%); }
.wheel-reveal.on.tier-legendary .flash[b-gnexph3r00] { animation: wheel-flash-b-gnexph3r00 420ms ease-out both; }
.wheel-reveal .particles[b-gnexph3r00] { left: 0; top: 0; pointer-events: none; }

@keyframes wheel-fade-b-gnexph3r00 { from { opacity: 0; } to { opacity: 1; } }
@keyframes wheel-card-b-gnexph3r00 {
    from { opacity: 0; transform: translateY(16px) scale(.88); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.025); }
    to { opacity: 1; transform: none; }
}
@keyframes wheel-shake-b-gnexph3r00 {
    0% { transform: none; } 14% { transform: translateX(-5px) rotate(-.6deg); } 30% { transform: translateX(4px) rotate(.5deg); }
    46% { transform: translateX(-3px) rotate(-.3deg); } 62% { transform: translateX(2px); } 80% { transform: translateX(-1px); } 100% { transform: none; }
}
@keyframes wheel-glow-b-gnexph3r00 {
    0% { opacity: 0; transform: scale(.5); }
    28% { opacity: 1; transform: scale(1.14); }
    100% { opacity: .85; transform: scale(1); }
}
@keyframes wheel-halo-b-gnexph3r00 { from { opacity: .95; transform: scale(.45); } to { opacity: 0; transform: scale(var(--halo-to, 2)); } }
@keyframes wheel-pop-b-gnexph3r00 {
    0% { opacity: 0; transform: scale(.12) rotate(-16deg); animation-timing-function: cubic-bezier(.15,.9,.35,1); }
    14% { opacity: 1; }
    48% { transform: scale(1.26) rotate(5deg); animation-timing-function: cubic-bezier(.4,0,.6,1); }
    68% { transform: scale(.92) rotate(-2deg); animation-timing-function: cubic-bezier(.4,0,.6,1); }
    84% { transform: scale(1.05) rotate(.6deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes wheel-shine-b-gnexph3r00 { 0% { opacity: 1; background-position: 100% 0; } 92% { opacity: 1; } 100% { opacity: 0; background-position: 0% 0; } }
@keyframes wheel-rise-b-gnexph3r00 { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes wheel-chip-b-gnexph3r00 { from { opacity: 0; transform: scale(.55); } 70% { opacity: 1; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes wheel-ready-b-gnexph3r00 { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes wheel-landed-b-gnexph3r00 {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier, #D9E2F2) 0%, transparent); }
    22% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier, #D9E2F2) 85%, transparent), 0 0 24px color-mix(in srgb, var(--tier, #D9E2F2) 45%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier, #D9E2F2) 0%, transparent); }
}
@keyframes wheel-landed-icon-b-gnexph3r00 { 0% { transform: scale(.55); } 55% { transform: scale(1.16); } 100% { transform: none; } }
@keyframes wheel-rays-rare-b-gnexph3r00 {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(.82); } 22% { opacity: .75; }
    100% { opacity: .6; transform: translate(-50%, -50%) rotate(22deg) scale(1); }
}
@keyframes wheel-rays-epic-b-gnexph3r00 {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(.82); } 22% { opacity: .9; }
    100% { opacity: .72; transform: translate(-50%, -50%) rotate(22deg) scale(1); }
}
@keyframes wheel-rays-legendary-b-gnexph3r00 {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(.82); } 22% { opacity: 1; }
    100% { opacity: .85; transform: translate(-50%, -50%) rotate(22deg) scale(1); }
}
@keyframes wheel-burst-b-gnexph3r00 { from { opacity: .9; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(4); } }
@keyframes wheel-burst-big-b-gnexph3r00 { from { opacity: .9; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(5.2); } }
@keyframes wheel-flash-b-gnexph3r00 { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } }

/* ───────────── free spins and invites (freespin1, chat\WHEEL-FREESPIN-CONTRACT.md sections 9 and 10.2) ───────────── */

/* a server closed for now (Loki): its card dimmed (its art grey and dark, its words quieter), "Coming soon" in the ring's
   place in the wheel's gold, bright; it cannot be chosen */
.wheel-card.closed:disabled[b-gnexph3r00] { opacity: 1; }
.wheel-card.closed .wc-art[b-gnexph3r00] { filter: grayscale(.75) brightness(.55); }
.wheel-card.closed .wc-words[b-gnexph3r00] { opacity: .62; }
.wheel-card.closed .wc-ground[b-gnexph3r00] { border-style: dashed; border-color: #5A4A8A; }
.wc-soon[b-gnexph3r00] {
    position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 4px 8px; border-radius: 11px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; line-height: 15px; text-transform: uppercase; white-space: nowrap; pointer-events: none;
    color: #FFE6A3; background: #1B1236E8; border: 1px solid #E7B05299; box-shadow: 0 0 12px #E7B05226;
}
.wc-soon[b-gnexph3r00]  .icon { flex: 0 0 13px; }
.wheel-cards.stack .wc-soon[b-gnexph3r00] { top: 9px; right: 10px; }

/* the free spins sign: the pink Poring with its board in the Poring's place, a link to the chosen server's guide (js\wheel.js
   draws and places it). A hand under the mouse, the keyboard's ring, a small tilt and a warm light under the mouse or the
   focus; a little bob now and then while the page is new, which stops by itself (three times in its first half minute) */
.wheel-sign[b-gnexph3r00] {
    display: block; z-index: 2; cursor: pointer; border-radius: 16px; -webkit-tap-highlight-color: transparent; outline: none;
    animation: wheel-sign-bob-b-gnexph3r00 7000ms ease-in-out 1600ms 3 both;
}
.wheel-sign canvas[b-gnexph3r00] {
    display: block; transform-origin: 44% 97%; filter: drop-shadow(0 4px 9px #0000008C);
    transition: transform 180ms cubic-bezier(.2,.8,.3,1.25), filter 180ms ease-out;
}
.wheel-sign:hover canvas[b-gnexph3r00], .wheel-sign:focus-visible canvas[b-gnexph3r00] { transform: rotate(-3deg) scale(1.05); filter: drop-shadow(0 4px 9px #0000008C) drop-shadow(0 0 14px #FFD77A99); }
.wheel-sign:active canvas[b-gnexph3r00] { transform: rotate(-1deg) scale(.97); }
.wheel-sign:focus-visible[b-gnexph3r00] { outline: 2px solid #FFE19A; outline-offset: 4px; }
@keyframes wheel-sign-bob-b-gnexph3r00 {
    0%, 15%, 100% { transform: none; }
    4% { transform: translateY(-7px) rotate(-2.5deg); }
    8% { transform: translateY(0) rotate(1deg); }
    11.5% { transform: translateY(-3px) rotate(-1deg); }
}

/* the lines under the button: bonus spins ready (a gold light), and when the next ones open */
.wheel-lines .bonus[b-gnexph3r00] { color: #FFE9B8; }
.wheel-lines .bonus .available-dot[b-gnexph3r00] { background: #F5C24D; box-shadow: 0 0 10px #F5C24DA6; }
.wheel-lines .bonus-later[b-gnexph3r00] { font-weight: 500; color: #D9CFF2; }

/* a reward of a bonus spin: a small gold chip beside its delivery, and in the reveal beside its tier */
.bonus-chip[b-gnexph3r00] {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 2px 6px; border-radius: 9px; font-size: 12px; font-weight: 600; line-height: 17px;
    white-space: nowrap; color: #FFE19A; background: #E7B0521F; border: 1px solid #E7B05299;
}
.bonus-chip[b-gnexph3r00]  .icon { flex: 0 0 12px; }
.recent-chips[b-gnexph3r00] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recent-row .recent-chips[b-gnexph3r00] { margin-top: 5px; }
.recent-row .recent-chips .delivery-chip[b-gnexph3r00] { margin-top: 0; }
.reveal-bonus[b-gnexph3r00] { margin: 8px 0 0 8px; vertical-align: top; padding: 3px 11px 4px 9px; font-size: 12.5px; }

/* Invite friends in "Your game account": the panel's own button, its gift in the wheel's gold; beside it the button that opens
   "Your invites" (invprog1; the little person there is a small pink Poring since invmile1), in the same look, as high as it and
   a little wider than high (the Vault's beside its row) */
.yours-invite-row[b-gnexph3r00] { display: flex; gap: 8px; margin-top: 11px; }
.yours-invite[b-gnexph3r00] { flex: 1 1 auto; min-width: 0; gap: 9px; }
.yours-invite[b-gnexph3r00]  .icon { color: #FFD77A; }
.yours-invites-open[b-gnexph3r00] { flex: 0 0 auto; width: 44px; padding: 0; justify-content: center; }
.yours-invites-open[b-gnexph3r00]  .icon { color: #FFD77A; }
.yours-invites-open:disabled[b-gnexph3r00] { opacity: .5; cursor: default; }
/* invmile1: the milestone's compact bar in that button, in the small Poring's place (Chat\MilestoneBar.razor): the button
   grows into a pill (the Porings, the Gift Box and "2/3"); Invite friends keeps its words whole. A panel too narrow for both on
   one line puts the pill on its own line under Invite friends, the whole width (docs\chat\wheel\milestones\web.md) */
.yours-invite[b-gnexph3r00] { min-width: max-content; }
.yours-invites-open.with-milestone[b-gnexph3r00] { width: auto; padding: 0 10px; gap: 8px; justify-content: center; }
@container (max-width: 299.98px) {
    .yours-invite-row.with-milestone[b-gnexph3r00] { flex-wrap: wrap; }
    .yours-invites-open.with-milestone[b-gnexph3r00] { flex: 1 1 100%; }
}
/* the board under "Your invites": kept as it is (its size, its state, its spin), not drawn and out of reach (inert) */
.wheel-scroll.under-invites[b-gnexph3r00] { visibility: hidden; }

/* the wide layout: Sound in the line of the title (js\wheel.js), a little lower and with the speaker nearer its edge */
.wheel-sound.slim[b-gnexph3r00] { padding: 0 18px 0 8px; }

/* a phone: the reveal's dim covers the whole page, so no card stays bright around it (the preview's finding 4) */
.wheel-reveal .dim.whole[b-gnexph3r00] { border-radius: 0; -webkit-mask-image: none; mask-image: none; background: #06030FC8; }

/* a PC: the rewards' pictures larger, so a box's badge and its count read (the preview's finding 2), the tile a few units
   taller (two lines of a name keep their room) */
.wheel-pane.wide .tile[b-gnexph3r00] { min-height: 110px; padding: 7px 6px 5px; }
.wheel-pane.wide .tile img[b-gnexph3r00] { flex-basis: 60px; width: 60px; height: 60px; }
/* (and its count larger, on its own ground, as the Vault's) */
.wheel-pane.wide .tile-qty[b-gnexph3r00] { right: 7px; top: 6px; padding: 1px 6px 2px; border-radius: 8px; font-size: 14.5px; font-weight: 700; color: #F4F0FF; background: #0B0E1DD9; }

@media (prefers-reduced-motion: reduce) {
    .wheel-sign[b-gnexph3r00], .wheel-sign canvas[b-gnexph3r00] { animation: none; transition: none; }
}
@media (pointer: coarse) {
    .yours-invite[b-gnexph3r00] { height: 46px; }
    .yours-invites-open[b-gnexph3r00] { height: 46px; width: 50px; }
}

/* reduced motion (the player's system setting): nothing turns, flies or bursts; the reveal fades in shortly (wheel.js
   fades it: the app's own rule takes every CSS animation and transition away then, css\app.css) */
@media (prefers-reduced-motion: reduce) {
    .wheel-card[b-gnexph3r00], .wheel-spin[b-gnexph3r00], .wc-ground[b-gnexph3r00], .wheel-disc .turn[b-gnexph3r00] { transition: none; }
    .wheel-reveal.on .dim[b-gnexph3r00], .wheel-reveal.on .reveal-card[b-gnexph3r00] { animation: none; opacity: 1; }
    .wheel-reveal.on .reveal-glow[b-gnexph3r00] { animation: none; opacity: 1; }
    .wheel-reveal.on .reveal-icon img[b-gnexph3r00] { animation: none; }
    .wheel-reveal.on .burst[b-gnexph3r00], .wheel-reveal.on .flash[b-gnexph3r00] { animation: none !important; opacity: 0; }
    .wheel-reveal.on.tier-rare .rays[b-gnexph3r00], .wheel-reveal.on.tier-epic .rays[b-gnexph3r00], .wheel-reveal.on.tier-legendary .rays[b-gnexph3r00] { animation: none; opacity: .35; transform: translate(-50%, -50%); }
}

/* a finger (a phone or a tablet: a coarse pointer): every control at least 44 high (wheel-polish, 2026-10-12; the page's
   layout reads their real sizes, wheel.js) */
@media (pointer: coarse) {
    .wheel-menu[b-gnexph3r00] { width: 44px; height: 44px; }
    .wheel-back[b-gnexph3r00] { height: 44px; padding: 0 14px 0 9px; }
    .rewards-tab[b-gnexph3r00] { min-height: 44px; padding: 6px 8px 10px; }
    .yours-out[b-gnexph3r00] { height: 44px; margin: -10px 0; padding: 0 16px; }
    .chars-error .btn[b-gnexph3r00] { height: 44px; }
    .yours-login .field[b-gnexph3r00] { height: 46px; font-size: 16px; }
    .login-submit[b-gnexph3r00] { height: 46px; }
    .char[b-gnexph3r00] { min-height: 58px; }
    .wheel-grant[b-gnexph3r00] { height: 44px; padding: 0 16px 0 13px; font-size: 14px; }
    .wheel-volume[b-gnexph3r00] { height: 44px; }
    .reveal-close[b-gnexph3r00] { height: 46px; min-width: 160px; }
}

/* a phone: the panels under the wheel (wheel.js), smaller words */
.wheel-pane.tiny .wheel-title[b-gnexph3r00] { letter-spacing: -0.3px; }
.wheel-pane.tiny .wheel-spin[b-gnexph3r00] { font-size: 17px; gap: 12px; }
.wheel-pane.tiny .reveal-title[b-gnexph3r00] { font-size: 26px; }
.wheel-pane.tiny .reveal-name[b-gnexph3r00] { font-size: 19px; }
/* /Pages/Invite.razor.rz.scp.css */
/* The invite page (/i/<code>; Pages\Invite.razor; INV-UI, 2026-10-09) in the Vault's own look: the design tokens the
   theme generator writes from the Vault's XAML (css\tokens.g.css), the invite dialog's layout (Chat\ChatInviteOpenDialog
   in the Vault: the art, the game, who invited, the community, the room's chip, the counts, the expiry), on the
   community's own art and light, on Syphon's ground (css\app.css, .screen-ground: the page's ground, its violet and
   purple lights, the grid and the dots, the same as the sign-in's). */
.inv-page[b-o86ceqzyj6] {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 32px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--color-text, #F4F3F9);
}
/* the community's banner far behind, soft and dark, with the community's own light over it; Syphon's lights, grid and
   dots lie over both (z-index -2 and -1), so the invite page and the sign-in share one ground */
.inv-backdrop[b-o86ceqzyj6] {
  position: absolute;
  z-index: -4;
  inset: -40px;
  background-size: cover;
  background-position: center 30%;
  filter: blur(18px) saturate(1.1);
  opacity: 0.38;
  transform: scale(1.04);
  pointer-events: none;
}
/* the banner runs into Syphon's ground (Brush.Syphon.Ground) towards the foot */
.inv-shade[b-o86ceqzyj6] {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 18%, color-mix(in srgb, var(--inv-accent, #6C49F9) 22%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-syphon-ground, #080812) 50%, transparent) 0%,
                    color-mix(in srgb, var(--color-syphon-ground, #080812) 80%, transparent) 55%, var(--color-syphon-ground, #080812) 100%);
  pointer-events: none;
}
.inv-brand[b-o86ceqzyj6] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--color-text-secondary, #B4C6DB);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
}
.inv-brand:hover[b-o86ceqzyj6] { color: var(--color-text, #F4F3F9); }
/* the card: the Vault's Dialog.Card (480 wide, the edge #2C3647, Radius.Panel, 28 and 30 inside) on the dialog's ground */
.inv-card[b-o86ceqzyj6] {
  position: relative;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  border-radius: var(--radius-panel, 16.5px);
  border: 1px solid #2C3647;
  background:
    radial-gradient(ellipse 62% 50% at 10% 0%, color-mix(in srgb, var(--inv-accent, #6C49F9) 17%, transparent) 0%, transparent 100%),
    linear-gradient(180deg, #18202D 0%, #141A25 55%, #131924 100%);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.62);
  padding: 28px 30px 26px;
  text-align: center;
}
/* the community's picture as the dialog has it: 76 square, radius 18, 4 down, the picture over its whole box */
.inv-art[b-o86ceqzyj6] {
  width: 76px;
  height: 76px;
  margin: 4px auto 0;
  border-radius: 18px;
  background: var(--color-surface-raised, #141A24) center 30% / cover no-repeat;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
/* a community without a game (Syphon's own): the Vault's mark on Syphon's ground with Syphon's edge, as the dialog has it */
.inv-art.syphon[b-o86ceqzyj6] { display: flex; align-items: center; justify-content: center; background: var(--brush-syphon-ground, #080812); border: 1px solid var(--brush-syphon-edge, #7C3AED66); }
.inv-kicker[b-o86ceqzyj6] {
  margin-top: 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  /* the game's colour for text, as the Vault's AccentTextBrush: its colour with 38 % white */
  color: color-mix(in srgb, var(--inv-accent, #6C49F9) 62%, #ffffff);
}
/* who invited (Text.Small, 8 down), the community's name (Dialog.Title at 24, 4 down) */
.inv-invited[b-o86ceqzyj6] { margin-top: 8px; font-size: 14.9px; color: var(--color-text-secondary, #B4C6DB); }
.inv-name[b-o86ceqzyj6] { margin: 4px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--color-text, #F4F3F9); overflow-wrap: anywhere; }
/* the room's chip, as the Vault's invite dialog has it (Chat.Chip on Hover.Light, radius 6, 7 3 10 4, 11.5 semibold) */
.inv-chip[b-o86ceqzyj6] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 3px 10px 4px 7px;
  border-radius: var(--radius-small, 6px);
  background: var(--brush-hover-light, #FFFFFF14);
  color: var(--color-text-secondary, #B4C6DB);
  font-size: 11.5px;
  font-weight: 600;
}
/* the counts (12 down): a dot of 8, 6 to its words (13.5), 16 to the next; the description 10 under them (13.5 on 19) */
.inv-counts[b-o86ceqzyj6] { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13.5px; color: var(--color-text-muted, #8999AA); }
.inv-counts span[b-o86ceqzyj6] { display: inline-flex; align-items: center; gap: 6px; }
.inv-dot[b-o86ceqzyj6] { width: 8px; height: 8px; border-radius: 50%; background: var(--color-online, #21C246); }
.inv-dot-members[b-o86ceqzyj6] { background: var(--color-text-faint, #5C6C84); }
.inv-about[b-o86ceqzyj6] { margin: 10px auto 0; max-width: 380px; font-size: 13.5px; line-height: 19px; color: var(--color-text-muted, #8999AA); }
.inv-expiry[b-o86ceqzyj6] { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--color-text-muted, #8999AA); }
/* the app's own buttons (css\app.css: .btn primary, outline, large, small), full width and with their icon's gap */
.inv-actions[b-o86ceqzyj6] { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.inv-actions .btn[b-o86ceqzyj6] { width: 100%; gap: 9px; }
.inv-note[b-o86ceqzyj6] { margin: 14px 0 0; font-size: 13px; line-height: 18px; color: var(--color-text-muted, #8999AA); }
.inv-note a[b-o86ceqzyj6] { color: var(--color-accent-label, #978AFB); text-decoration: none; font-weight: 600; }
.inv-note a:hover[b-o86ceqzyj6] { text-decoration: underline; }
/* already a member: the success chip (9 4 11 5 inside its edge, radius 8, 14 down; the check 13 and 7 to the words) */
.inv-member[b-o86ceqzyj6] {
  display: flex; width: fit-content; max-width: 100%; box-sizing: border-box; align-items: center; gap: 7px; margin: 14px auto 0;
  padding: 4px 11px 5px 9px; border-radius: var(--radius-control, 8px);
  background: rgba(61, 230, 163, 0.10); border: 1px solid rgba(61, 230, 163, 0.32); color: var(--color-success-text, #C4F0E4); font-size: 13.5px;
}
.inv-problem[b-o86ceqzyj6] { margin: 14px 0 0; font-size: 13.5px; line-height: 19px; color: var(--color-danger-text, #FFB9C1); }
.inv-app-line[b-o86ceqzyj6] { margin: 14px 0 0; font-size: 13.5px; line-height: 19px; color: var(--color-success-text, #C4F0E4); }
.inv-app-help[b-o86ceqzyj6] { margin-top: 16px; padding: 14px 16px 16px; border-radius: var(--radius-card, 12px); background: #0E141C; border: 1px solid #232C3A; }
.inv-app-help-title[b-o86ceqzyj6] { font-size: 14.9px; font-weight: 600; }
.inv-app-help-text[b-o86ceqzyj6] { margin: 4px 0 12px; font-size: 13.5px; line-height: 19px; color: var(--color-text-muted, #8999AA); }
/* a state's screen: the kind's disc, the title, the words */
.inv-disc[b-o86ceqzyj6] {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--inv-kind, #F5B544) 16%, transparent); border: 1px solid color-mix(in srgb, var(--inv-kind, #F5B544) 40%, transparent);
  color: var(--inv-kind, #F5B544);
}
.inv-disc.warning[b-o86ceqzyj6] { --inv-kind: var(--color-warning, #F5B544); }
.inv-disc.danger[b-o86ceqzyj6] { --inv-kind: var(--color-danger, #F25A6C); }
.inv-state-title[b-o86ceqzyj6] { margin: 18px 0 0; font-size: 22px; line-height: 28px; font-weight: 600; }
.inv-state-text[b-o86ceqzyj6] { margin: 10px auto 0; max-width: 360px; font-size: 15.2px; line-height: 22px; color: var(--color-text-secondary, #B4C6DB); }
/* the outline while the invite comes, as the dialog's: the picture (76, radius 18, 4 down), then lines of 140 x 10 (22
   down), 210 x 16 (12 down) and 150 x 10 (16 down), each with round ends */
.inv-loading[b-o86ceqzyj6] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.inv-bone[b-o86ceqzyj6] { border-radius: var(--radius-small, 6px); background: rgba(255, 255, 255, 0.07); animation: inv-pulse-b-o86ceqzyj6 1.4s ease-in-out infinite; }
.inv-bone.art[b-o86ceqzyj6] { width: 76px; height: 76px; margin-top: 4px; border-radius: 18px; }
.inv-bone.line[b-o86ceqzyj6] { width: 210px; height: 16px; border-radius: 8px; }
.inv-bone.line.short[b-o86ceqzyj6] { width: 140px; height: 10px; margin-top: 10px; border-radius: 5px; }
.inv-bone.line.wide[b-o86ceqzyj6] { width: 150px; height: 10px; margin-top: 4px; border-radius: 5px; }
.inv-bone.button[b-o86ceqzyj6] { width: 100%; height: 46px; margin-top: 14px; border-radius: var(--radius-control, 8px); }
@keyframes inv-pulse-b-o86ceqzyj6 { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.inv-foot[b-o86ceqzyj6] { position: relative; margin: 22px 0 0; font-size: 12.5px; color: var(--color-text-faint, #5C6C84); text-align: center; max-width: 460px; line-height: 18px; }
@media (max-width: 520px) {
  .inv-page[b-o86ceqzyj6] { justify-content: flex-start; padding-top: 28px; }
  .inv-card[b-o86ceqzyj6] { padding: 26px 18px 20px; border-radius: 14px; }
  .inv-art[b-o86ceqzyj6], .inv-bone.art[b-o86ceqzyj6] { width: 72px; height: 72px; border-radius: 17px; }
  .inv-name[b-o86ceqzyj6] { font-size: 22px; line-height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-bone[b-o86ceqzyj6] { animation: none; }
}
/* /Pages/Poker.razor.rz.scp.css */
/* Syphon Poker's frame page (Pages\Poker.razor; PK-A1): the game fills the window under a slim bar in the chat's own look
   (weblook1's shared values), as Tower Duel's frame page. Its own file, never app.css (minigames\POKER-CONTRACT.md 9.2). */
.pk-frame-page[b-ibtrrhv1qf] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #120b06;
    font-family: var(--ui-font);
    /* PK-FIT (2026-10-27): a phone's notch, rounded corners and home bar (the chat's page has viewport-fit=cover, and a
       frame never learns the safe areas itself): the bar and the game stay inside them, the ground colour fills them */
    box-sizing: border-box;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.pk-frame-bar[b-ibtrrhv1qf] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0 12px;
    box-sizing: border-box;
    background: var(--ui-panel);
    border-bottom: 1px solid var(--ui-edge);
    box-shadow: var(--ui-sheen), 0 6px 18px #00000066;
    position: relative;
    z-index: 1;
}

.pk-frame-brand[b-ibtrrhv1qf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ui-radius-field);
}

.pk-frame-brand:focus-visible[b-ibtrrhv1qf] {
    outline: 2px solid var(--color-syphon-violet, #7C3AED);
    outline-offset: 2px;
}

/* the bar no longer cuts off what overflows it (the language menu hangs below it): the title gives way on a narrow
   phone instead, with an ellipsis */
.pk-frame-title[b-ibtrrhv1qf] {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brush-text, #F4F3F9);
    white-space: nowrap;
}

.pk-frame-title .word[b-ibtrrhv1qf] {
    background: linear-gradient(90deg, #E8C27A 0%, #B48CFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pk-frame-sub[b-ibtrrhv1qf] {
    font-size: var(--ui-type-small);
    color: var(--ui-text-lead);
    white-space: nowrap;
}

.pk-frame-state[b-ibtrrhv1qf] {
    font-size: var(--ui-type-small);
    color: var(--ui-text-lead);
}

@media (max-width: 560px) {
    .pk-frame-sub[b-ibtrrhv1qf] { display: none; }
}

/* PK-LANG-QA: a phone held upright has no room for the title beside Return to chat and the language ("Terug naar de
   chat", "Zurück zum Chat" went past the screen's edge at 360 px): the title steps aside there, the lobby under the
   bar names the game, and the brand mark still leads to the chat */
@media (max-width: 420px) {
    .pk-frame-title[b-ibtrrhv1qf] { display: none; }
}

.pk-frame[b-ibtrrhv1qf] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    display: block;
    background: #120b06;
}

/* PK-FIT (2026-10-27): a finger's targets in the bar: the brand mark, Return to chat and the language at least 40 px */
@media (pointer: coarse) {
    .pk-frame-brand[b-ibtrrhv1qf] { width: 40px; height: 40px; }
    .pk-frame-bar > .btn[b-ibtrrhv1qf] { min-height: 40px; }
    .pk-frame-bar[b-ibtrrhv1qf]  .lang-button { width: 40px; height: 40px; }
}

/* PK-FIT: a phone on its side (in the browser 250 to 400 px high under its own toolbars) needs every px of height for the
   table: the bar becomes a slim column at the left (the brand mark at the top, Return to chat as its arrow and the
   language at the bottom) and the game takes the whole height beside it. The bar's inline sizes are its fallback when
   this file is missing, so the column's own sizes win here with !important. Only from 700 px wide: the game keeps at
   least 648 px beside the column (its side layout, table\layout.ts, needs 600, and its five raise steps a finger
   each); a smaller phone keeps the bar on top. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 700px) {
    .pk-frame-page[b-ibtrrhv1qf] { flex-direction: row !important; }
    .pk-frame-bar[b-ibtrrhv1qf] {
        flex-direction: column;
        width: 52px;
        height: auto !important;
        padding: 6px 0 !important;
        gap: 6px !important;
        box-shadow: var(--ui-sheen), 6px 0 18px #00000066;
        border-bottom: 0;
        border-right: 1px solid var(--ui-edge);
    }
    .pk-frame-title[b-ibtrrhv1qf], .pk-frame-sub[b-ibtrrhv1qf], .pk-frame-state[b-ibtrrhv1qf] { display: none; }
    .pk-frame-bar > .btn[b-ibtrrhv1qf] {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        font-size: 0;
        gap: 0;
    }
    .pk-frame-bar[b-ibtrrhv1qf]  .lang-menu { top: auto; bottom: 0; left: calc(100% + 6px); right: auto; max-height: calc(100dvh - 16px); }
    .pk-frame[b-ibtrrhv1qf] { min-width: 0; height: auto; }
}
/* /Pages/Referral.razor.rz.scp.css */
/* Invite & Earn's landing page (/r/<code>; Pages\Referral.razor; refer1, chat\WHEEL-REFERRALS-CONTRACT.md section 8). The invite
   page's frame (Pages\Invite.razor.css: Syphon's ground, the server's own art far behind, soft and dark, with its colour's light
   over it) in Spin the Wheel's purple and gold: the card on the wheel's night glass with a gold edge, the mint Poring with its
   envelope on top, the game's name in the wheel's gold, the title in white, the steps with gold numbers, the code in the invite
   card's gold-edged box. 560 wide on a PC; on a phone (under 520) the card nearly the screen's width, its buttons one under the
   other at full width, every word whole. */
.ref-page[b-vkv2wuhvu4] {
    position: relative; height: 100vh; height: 100dvh; box-sizing: border-box; overflow: hidden; font-family: var(--font-ui); color: var(--color-text, #F4F3F9);
}
/* the page's own scroll box over its ground (the app's frame is one window high and never scrolls), its content in the middle
   while it is shorter than the window */
.ref-scroll[b-vkv2wuhvu4] { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3A3460 transparent; }
.ref-inner[b-vkv2wuhvu4] {
    min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 16px 32px;
}
.ref-backdrop[b-vkv2wuhvu4] {
    position: absolute; z-index: -4; inset: -40px; background-size: cover; background-position: center 30%;
    filter: blur(16px) saturate(1.15); opacity: .42; transform: scale(1.04); pointer-events: none;
}
.ref-shade[b-vkv2wuhvu4] {
    position: absolute; z-index: -3; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 16%, color-mix(in srgb, var(--ref-accent, #6C49F9) 26%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 26%, #8EE6C01F 0%, transparent 70%),
        linear-gradient(180deg, #0B071C80 0%, #0B071CCC 55%, #0B071C 100%);
}
.ref-brand[b-vkv2wuhvu4] {
    position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--color-text-secondary, #B4C6DB);
    font-size: 13.5px; font-weight: 600; letter-spacing: .4px; text-decoration: none;
}
.ref-brand:hover[b-vkv2wuhvu4] { color: var(--color-text, #F4F3F9); }

/* the card: the wheel's night glass, a gold edge, the server's light at its top */
.ref-card[b-vkv2wuhvu4] {
    position: relative; width: 100%; max-width: 560px; box-sizing: border-box; padding: 26px 32px 28px; border-radius: 20px; text-align: center;
    border: 1.5px solid #E7B05280;
    background:
        radial-gradient(ellipse 70% 42% at 50% 0%, color-mix(in srgb, var(--ref-accent, #6C49F9) 26%, transparent) 0%, transparent 100%),
        linear-gradient(180deg, #1D1544F5 0%, #140F33F5 48%, #0E0A24F5 100%);
    box-shadow: inset 0 1px 0 #FFFFFF14, 0 0 32px #8B5CF633, 0 18px 56px #000000A0;
}
.ref-art[b-vkv2wuhvu4] { width: 112px; height: 114px; margin: -6px auto 0; filter: drop-shadow(0 8px 18px #000000A6) drop-shadow(0 0 22px #8EE6C040); }
.ref-art[b-vkv2wuhvu4]  svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ref-art.asleep[b-vkv2wuhvu4] { filter: grayscale(.45) brightness(.85) drop-shadow(0 8px 18px #000000A6); }
.ref-kicker[b-vkv2wuhvu4] { margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #E8C878; }
.ref-title[b-vkv2wuhvu4] {
    text-wrap: balance;
    margin: 6px 0 0; font-size: 31px; font-weight: 700; line-height: 1.18; letter-spacing: -.2px; color: #FFFFFF; overflow-wrap: anywhere;
    text-shadow: 0 2px 16px #00000099;
}
.ref-lead[b-vkv2wuhvu4] { margin: 10px auto 0; max-width: 440px; font-size: 16px; line-height: 23px; color: #DCD5EE; }

/* the three steps: gold numbers, the words left aligned */
.ref-steps[b-vkv2wuhvu4] { list-style: none; margin: 20px 0 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; text-align: left;
    border-radius: 14px; background: #0B0820B3; border: 1px solid #343256; }
.ref-steps li[b-vkv2wuhvu4] { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 21px; color: #E8E2F6; }
.ref-step-n[b-vkv2wuhvu4] {
    flex: 0 0 26px; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 800; color: #3B1474; background: radial-gradient(circle at 35% 30%, #FFF1C2 0%, #E8B04E 60%, #9A6418 100%); border: 1.2px solid #5A340C;
}

/* the three ways on: the app's own buttons, full width, one under the other */
.ref-actions[b-vkv2wuhvu4] { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.ref-actions .btn[b-vkv2wuhvu4] { width: 100%; gap: 9px; text-decoration: none; }
/* on a phone (or a narrow window): Continue in browser first (Syphon Vault is for PCs) */
.ref-actions.handheld .ref-continue[b-vkv2wuhvu4] { order: -1; }
.ref-problem[b-vkv2wuhvu4] { margin: 14px 0 0; font-size: 14px; line-height: 20px; color: var(--color-warning-text, #FBDFA6); }
.ref-problem.info[b-vkv2wuhvu4] { color: var(--color-text-secondary, #B4C6DB); }
.ref-problem.match[b-vkv2wuhvu4] { color: #F5C26B; }
.ref-app-line[b-vkv2wuhvu4] { margin: 14px 0 0; font-size: 14px; line-height: 20px; color: var(--color-success-text, #C4F0E4); }
.ref-app-help[b-vkv2wuhvu4] { margin-top: 14px; padding: 13px 16px 14px; border-radius: 12px; background: #0E0B26; border: 1px solid #343256; }
.ref-app-help-title[b-vkv2wuhvu4] { font-size: 15px; font-weight: 600; }
.ref-app-help-text[b-vkv2wuhvu4] { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--color-text-muted, #8999AA); }
.ref-note[b-vkv2wuhvu4] { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: #9DF0CC; }

/* the code: the invite card's gold-edged box, the code large in the wheel's gold */
.ref-code-box[b-vkv2wuhvu4] {
    margin-top: 22px; padding: 14px 16px 15px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #2A1A52F0 0%, #1A1236F0 100%); border: 1.5px solid #E7B05299; box-shadow: inset 0 1px 0 #FFFFFF14, 0 0 22px #8B5CF62E;
}
.ref-code-label[b-vkv2wuhvu4] { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E8C878; }
.ref-code-row[b-vkv2wuhvu4] { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ref-code[b-vkv2wuhvu4] {
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 34px; font-weight: 700; letter-spacing: .1em; line-height: 1.15; white-space: nowrap;
    color: #FFE19A; text-shadow: 0 1px 0 #6B4010, 0 0 14px #E7B05255;
}
.ref-copy[b-vkv2wuhvu4] { gap: 7px; }
.ref-code-hint[b-vkv2wuhvu4] { margin: 0; max-width: 400px; font-size: 13.5px; line-height: 19px; color: #D9CFF2; }

/* a state's screen: the disc, the title, the words */
.ref-disc[b-vkv2wuhvu4] {
    width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--color-warning, #F5B544); background: #F5B54429; border: 1px solid #F5B54466;
}
.ref-state-title[b-vkv2wuhvu4] { margin: 18px 0 0; font-size: 22px; line-height: 28px; font-weight: 600; }
.ref-state-text[b-vkv2wuhvu4] { margin: 10px auto 0; max-width: 400px; font-size: 15.5px; line-height: 22px; color: var(--color-text-secondary, #B4C6DB); }
.ref-state-text.unknown[b-vkv2wuhvu4] { margin-top: 14px; color: #DCD5EE; }
.ref-soon[b-vkv2wuhvu4] {
    display: inline-block; margin-top: 10px; padding: 3px 12px 4px; border-radius: 11px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #FFE6A3; background: #1B1236E8; border: 1px solid #E7B05299;
}

/* the outline while the answer comes */
.ref-loading[b-vkv2wuhvu4] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ref-bone[b-vkv2wuhvu4] { border-radius: 6px; background: #FFFFFF12; animation: ref-pulse-b-vkv2wuhvu4 1.4s ease-in-out infinite; }
.ref-bone.art[b-vkv2wuhvu4] { width: 96px; height: 96px; border-radius: 50%; }
.ref-bone.line[b-vkv2wuhvu4] { width: 240px; height: 18px; border-radius: 9px; }
.ref-bone.line.short[b-vkv2wuhvu4] { width: 120px; height: 10px; margin-top: 8px; border-radius: 5px; }
.ref-bone.line.wide[b-vkv2wuhvu4] { width: 300px; max-width: 100%; height: 12px; border-radius: 6px; }
.ref-bone.button[b-vkv2wuhvu4] { width: 100%; height: 49px; margin-top: 14px; border-radius: 8px; }
@keyframes ref-pulse-b-vkv2wuhvu4 { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* a phone: the card nearly the screen's width, everything a little smaller, the code still on one line */
@media (max-width: 520px) {
    .ref-inner[b-vkv2wuhvu4] { justify-content: flex-start; padding: 22px 12px 26px; }
    .ref-card[b-vkv2wuhvu4] { padding: 20px 16px 20px; border-radius: 16px; }
    .ref-art[b-vkv2wuhvu4] { width: 92px; height: 94px; }
    .ref-title[b-vkv2wuhvu4] { font-size: 25px; }
    .ref-lead[b-vkv2wuhvu4] { font-size: 15px; line-height: 21px; }
    .ref-steps[b-vkv2wuhvu4] { padding: 13px 13px; }
    .ref-steps li[b-vkv2wuhvu4] { font-size: 14.5px; line-height: 20px; }
    .ref-code[b-vkv2wuhvu4] { font-size: 28px; }
}
@media (pointer: coarse) {
    .ref-actions .btn[b-vkv2wuhvu4] { min-height: 48px; }
    .ref-copy[b-vkv2wuhvu4] { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ref-bone[b-vkv2wuhvu4] { animation: none; }
}
/* /Pages/TowerDuel.razor.rz.scp.css */
/* Tower Duel's frame page (Pages\TowerDuel.razor; TD-CLIENT, phase 4): the game fills the window under a slim bar in the
   chat's own look (weblook1's shared values, chat\WEB-LOOK-CONTRACT.md: the Syphon panel, its edge and sheen, the type), so
   the game gets the room it is laid out for. Its own file, never app.css (minigames\TOWER-DUEL-CONTRACT.md section 3). */
.td-frame-page[b-jxzt97tqhd] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #07070F;
    font-family: var(--ui-font);
}

.td-frame-bar[b-jxzt97tqhd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 14px 0 12px;
    box-sizing: border-box;
    background: var(--ui-panel);
    border-bottom: 1px solid var(--ui-edge);
    box-shadow: var(--ui-sheen), 0 6px 18px #00000066;
    position: relative;
    z-index: 1;
}

.td-frame-brand[b-jxzt97tqhd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ui-radius-field);
}

.td-frame-brand:focus-visible[b-jxzt97tqhd] {
    outline: 2px solid var(--color-syphon-violet, #7C3AED);
    outline-offset: 2px;
}

.td-frame-title[b-jxzt97tqhd] {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brush-text, #F4F3F9);
    white-space: nowrap;
}

.td-frame-title .word[b-jxzt97tqhd] {
    background: linear-gradient(90deg, #B48CFF 0%, #E07CF5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.td-frame-sub[b-jxzt97tqhd] {
    font-size: var(--ui-type-small);
    color: var(--ui-text-lead);
    white-space: nowrap;
}

.td-frame-gap[b-jxzt97tqhd] {
    flex: 1 1 auto;
}

.td-frame-state[b-jxzt97tqhd] {
    font-size: var(--ui-type-small);
    color: var(--ui-text-quiet);
    white-space: nowrap;
}

.td-frame[b-jxzt97tqhd] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    display: block;
    background: #0C1018;
}

@media (max-width: 640px) {
    .td-frame-sub[b-jxzt97tqhd] {
        display: none;
    }
}

/* TD-UI part 30 (D180): on a touch screen (a tablet, also one that asks for the desktop site) the bar's Return to chat is a
   finger's height; the bar stays 52 px */
@media (pointer: coarse) {
    .td-frame-bar .btn[b-jxzt97tqhd] {
        min-height: 44px;
    }
}

/* TD-UI part 22: this page in full screen (Open it anyway on a phone, js\towerduel-phone.js): the bar and the phone's line
   step aside, so the game fills the screen; leaving full screen (the back gesture) brings them back. Two rules: a browser
   that does not know one of the names drops only its own rule; TD-UI part 30: !important over the bar's own style attribute
   (its sizing sits in the markup too, for a browser holding an old copy of this sheet) */
:root:fullscreen .td-frame-bar[b-jxzt97tqhd],
:root:fullscreen .td-frame-phone[b-jxzt97tqhd] {
    display: none !important;
}

:root:-webkit-full-screen .td-frame-bar[b-jxzt97tqhd],
:root:-webkit-full-screen .td-frame-phone[b-jxzt97tqhd] {
    display: none !important;
}

/* a phone (the browser says Android or iOS): one calm line under the bar, the game below it (TD-CLIENT, phase 6) */
.td-frame-phone[b-jxzt97tqhd] {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 14px;
    font-size: var(--ui-type-small);
    line-height: 1.35;
    text-align: center;
    color: #F6D77A;
    background: #120E22;
    border-bottom: 1px solid var(--ui-edge);
}
/* talk in a match (D179, TowerDuel.Talk.cs): the microphone's question, how to allow it, a phone's tap to hear; it stays
   in full screen too (a held-back sound needs its tap) */
.td-frame-talk[b-jxzt97tqhd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 6px 14px;
    font-size: var(--ui-type-small);
    line-height: 1.35;
    text-align: center;
    color: var(--ui-text-lead);
    background: #120E22;
    border-bottom: 1px solid var(--ui-edge);
}

.td-frame-talk[b-jxzt97tqhd]  .icon {
    flex: 0 0 auto;
    color: #F6D77A;
}