@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('/s33-player-ui/20260921-1/assets/barlow-condensed-latin-600-normal-BN11TKSn.woff2') format('woff2');
}
/* Public registration shares the player center palette without loading its app scripts. */
body.s33-register-page {
    --s33-bg: #151916;
    --s33-panel: #1d231e;
    --s33-line: #ffffff16;
    --s33-lime: #e8f268;
    --s33-mint: #82d9bd;
    --s33-muted: #a1aea2;
    --s33-text: #f4f5ef;
    --s33-number: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    margin: 0;
    min-height: 100svh;
    background: var(--s33-bg);
    color: var(--s33-text);
    color-scheme: dark;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
}
.s33-register-page *, .s33-register-page *::before, .s33-register-page *::after { box-sizing: border-box; }
.s33-register-page a { color: var(--s33-mint); text-decoration: none; }
.s33-register-page :is(a, button, input, select):focus-visible { outline: 2px solid var(--s33-mint); outline-offset: 3px; }
.s33-register-shell { width: min(1080px, calc(100% - 48px)); margin: auto; padding: 26px 0 32px; }
.s33-register-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; }
.s33-brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.s33-brand-lockup__badge { display: flex; flex: 0 0 56px; }
.s33-brand-lockup__badge img { width: 56px; height: 48px; object-fit: contain; }
.s33-brand-lockup__text { display: grid; gap: 4px; }
.s33-brand-lockup__text strong { color: var(--s33-text); font-size: 15px; letter-spacing: .5px; }
.s33-brand-lockup__text small { color: var(--s33-muted); font: 11px var(--s33-number); letter-spacing: 1.8px; }
.s33-register-nav__links { display: flex; align-items: center; gap: 18px; font-size: 12px; }
.s33-register-nav__links a { min-height: 40px; display: inline-flex; align-items: center; }
.s33-register-nav__links .is-download { border: 1px solid var(--s33-line); border-radius: 6px; padding: 0 14px; color: var(--s33-text); }
.s33-register-layout { display: grid; grid-template-columns: .95fr 1.1fr; border: 1px solid var(--s33-line); border-radius: 10px; overflow: hidden; }
.s33-register-hero { position: relative; overflow: hidden; min-height: 660px; padding: 42px 36px; background: radial-gradient(circle at 70% 65%, #43654566, transparent 55%), linear-gradient(155deg, #28382a, #151e18); }
.s33-register-eyebrow { color: var(--s33-mint); font: 12px var(--s33-number); letter-spacing: 2px; }
.s33-register-hero h1 { position: relative; z-index: 1; font-size: clamp(32px, 3.8vw, 43px); line-height: 1.35; margin: 24px 0 16px; letter-spacing: -1px; }
.s33-register-hero h1 em { color: var(--s33-lime); font-style: normal; }
.s33-register-hero p { position: relative; z-index: 1; font-size: 13px; color: #a7b9a5; line-height: 1.9; margin: 0; }
.s33-register-character { position: absolute; width: 360px; height: 360px; right: -12px; bottom: 32px; }
.s33-register-character::before, .s33-register-character::after { content: ''; position: absolute; border: 1px solid #82d9bd20; border-radius: 50%; inset: 24px; transform: rotate(-22deg); }
.s33-register-character::after { inset: 42px; border: 1px dashed #e8f26826; }
.s33-register-character img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 35px; z-index: 1; filter: drop-shadow(0 16px 24px #0004); }
.s33-register-caption { position: absolute; left: 36px; bottom: 28px; font-size: 11px; color: #c6d4bc; }
.s33-register-caption b { margin-left: 10px; color: var(--s33-mint); font: 16px var(--s33-number); letter-spacing: 2px; }
.s33-register-card { padding: 32px 36px; background: var(--s33-panel); min-width: 0; }
.s33-register-card__head { display: grid; gap: 12px; margin-bottom: 24px; }
.s33-register-card__head h2 { font-size: 25px; line-height: 1.3; margin: 0; }
.s33-register-card__head em { display: inline-flex; justify-self: start; align-items: center; gap: 7px; max-width: 100%; color: var(--s33-mint); font-size: 12px; line-height: 1.7; font-style: normal; overflow-wrap: anywhere; }
.s33-register-card__head em::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.s33-register-opening { padding: 18px; margin: 0 0 24px; background: #e8f26808; border: 1px solid #e8f26835; border-radius: 8px; }
.s33-register-opening__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.s33-register-opening__heading strong { color: var(--s33-lime); font-size: 14px; }
.s33-register-opening__heading > span { color: var(--s33-muted); font-size: 11px; }
.s33-register-opening__clock { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 14px; }
.s33-register-opening__clock[hidden] { display: none; }
.s33-register-opening__clock > div { display: flex; align-items: baseline; gap: 6px; }
.s33-register-opening__clock b { font: 42px/1 var(--s33-number); color: var(--s33-lime); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.s33-register-opening__clock span { color: var(--s33-muted); font-size: 11px; }
.s33-register-opening__clock i { color: #e8f26870; font-style: normal; font-size: 24px; }
.s33-register-opening p { color: var(--s33-muted); margin: 10px 0 0; font-size: 11px; line-height: 1.8; }
.s33-register-opening.is-open { border-color: #82d9bd35; background: #82d9bd08; }
.s33-register-opening.is-open strong { color: var(--s33-mint); }
.s33-register-alert { margin-bottom: 18px; border: 1px solid #f5adad40; border-radius: 6px; padding: 12px 14px; background: #b6414115; color: #f4b7b0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.s33-register-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 16px; }
.s33-register-form label { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.s33-register-form label.is-full, .s33-register-captcha, .s33-register-form button[type=submit] { grid-column: 1 / -1; }
.s33-register-form label > span { color: #c5cec4; font-size: 12px; line-height: 1.5; }
.s33-register-form input, .s33-register-form select { width: 100%; min-width: 0; height: 44px; padding: 10px 12px; border: 1px solid #ffffff20; border-radius: 6px; background: #151b17; color: var(--s33-text); font: inherit; font-size: 14px; }
.s33-register-form input::placeholder { color: #778679; opacity: 1; }
.s33-register-form input[readonly] { color: var(--s33-mint); background: #82d9bd08; border-color: #82d9bd30; letter-spacing: 1.2px; }
.s33-register-form input:focus, .s33-register-form select:focus { border-color: var(--s33-mint); }
.s33-register-form input:autofill { box-shadow: 0 0 0 1000px #151b17 inset; -webkit-text-fill-color: var(--s33-text); }
.s33-register-field-note { font-size: 11px; line-height: 1.7; color: var(--s33-muted); }
.s33-register-form button[type=submit], .s33-success-actions a { min-height: 46px; border: 1px solid var(--s33-lime); border-radius: 6px; padding: 12px 18px; color: #1c2518; background: var(--s33-lime); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.s33-register-form button[type=submit]:hover:not(:disabled), .s33-success-actions .is-primary:hover { background: #f0f797; }
.s33-register-form button:disabled { opacity: .4; cursor: not-allowed; }
.s33-register-captcha__row { display: grid; grid-template-columns: minmax(0, 1fr) 136px; align-items: center; gap: 10px; }
.s33-register-captcha__image { width: 136px; height: 48px; margin: 0; padding: 0; border: 1px solid #82d9bd30; border-radius: 6px; overflow: hidden; cursor: pointer; background: #ecfdf5; }
.s33-register-captcha__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.s33-register-download { display: block; text-align: center; margin-top: 20px; font-size: 12px; line-height: 1.8; color: var(--s33-muted) !important; }
.s33-register-download strong { margin-left: 5px; font-weight: 500; color: var(--s33-mint); }
.s33-register-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 20px; color: #788b7c; font-size: 11px; line-height: 1.7; }
.s33-register-footer span:last-child { font: 12px var(--s33-number); letter-spacing: 1.2px; }
/* Success page uses the same shell and cards as registration. */
.s33-register-success-stage { min-height: calc(100svh - 190px); display: grid; align-items: center; padding: 25px 0; }
.s33-success-modal { position: relative; overflow: hidden; width: min(820px, 100%); margin: auto; border: 1px solid var(--s33-line); border-radius: 10px; background: var(--s33-panel); }
.s33-success-modal__inner { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 26px; padding: 42px; }
.s33-success-kicker { display: flex; align-items: center; gap: 8px; color: var(--s33-mint); font: 12px var(--s33-number); letter-spacing: 2px; }
.s33-success-kicker::before { content: '✓'; display: grid; place-items: center; width: 26px; height: 26px; background: #82d9bd18; border: 1px solid #82d9bd30; border-radius: 50%; font: 14px sans-serif; }
.s33-success-modal h1 { margin: 22px 0 14px; font-size: 34px; letter-spacing: -1px; }
.s33-success-modal p { margin: 0; color: var(--s33-muted); font-size: 13px; line-height: 1.9; }
.s33-success-account { display: grid; gap: 10px; padding: 18px; margin: 24px 0 0; border: 1px solid var(--s33-line); background: var(--s33-bg); border-radius: 6px; font-size: 13px; }
.s33-success-account div { display: flex; justify-content: space-between; gap: 18px; }
.s33-success-account dt { color: var(--s33-muted); white-space: nowrap; }
.s33-success-account dd { margin: 0; color: var(--s33-text); overflow-wrap: anywhere; text-align: right; }
.s33-success-countdown { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.s33-success-countdown strong { color: var(--s33-lime); font: 42px/1 var(--s33-number); min-width: 22px; }
.s33-success-countdown span { font-size: 13px; color: var(--s33-text); }
.s33-success-countdown small { display: block; color: var(--s33-muted); font-size: 11px; margin-top: 6px; line-height: 1.7; }
.s33-success-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.s33-success-actions a { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.s33-success-actions .is-secondary { background: transparent; color: var(--s33-mint); border-color: #82d9bd30; }
.s33-success-hero { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #43654566, transparent 70%); }
.s33-success-hero img { width: 100%; max-width: 260px; object-fit: contain; }
@media (max-width: 760px) {
    .s33-register-shell { width: min(580px, calc(100% - 28px)); padding: 16px 0 24px; }
    .s33-register-nav { margin-bottom: 16px; gap: 10px; }
    .s33-brand-lockup { gap: 7px; }
    .s33-brand-lockup__badge { flex-basis: 42px; }
    .s33-brand-lockup__badge img { width: 42px; height: 40px; }
    .s33-brand-lockup__text strong { font-size: 12px; }
    .s33-brand-lockup__text small { font-size: 9px; letter-spacing: 1px; }
    .s33-register-nav__links { gap: 10px; font-size: 11px; }
    .s33-register-nav__links .is-download { display: none; }
    .s33-register-layout { grid-template-columns: 1fr; }
    .s33-register-hero { min-height: 195px; padding: 24px; }
    .s33-register-eyebrow { font-size: 10px; letter-spacing: 1.4px; }
    .s33-register-hero h1 { font-size: 28px; margin: 14px 0 10px; }
    .s33-register-hero p { max-width: 68%; font-size: 11px; }
    .s33-register-character { width: 180px; height: 180px; right: -22px; bottom: -5px; opacity: .9; }
    .s33-register-character img { padding: 20px; }
    .s33-register-character::before { inset: 8px; }
    .s33-register-character::after { inset: 19px; }
    .s33-register-caption { display: none; }
    .s33-register-card { padding: 24px; }
    .s33-register-card__head h2 { font-size: 22px; }
    .s33-register-card__head { margin-bottom: 22px; }
    .s33-register-form input, .s33-register-form select { font-size: 16px; }
    .s33-success-modal__inner { grid-template-columns: 1fr; padding: 28px 24px; }
    .s33-success-hero { display: none; }
    .s33-success-modal h1 { font-size: 30px; }
    .s33-register-success-stage { padding: 16px 0; min-height: 0; }
}
@media (max-width: 420px) {
    .s33-register-opening__clock { gap: 8px; }
    .s33-register-opening__clock > div { gap: 4px; }
    .s33-register-opening__clock b { font-size: 36px; min-width: 34px; }
    .s33-register-opening__clock span { font-size: 10px; }
    .s33-register-opening__clock i { font-size: 20px; }
    .s33-register-card { padding: 24px 20px; }
    .s33-register-form { grid-template-columns: 1fr; gap: 16px; }
    .s33-register-hero { padding: 22px 20px; }
    .s33-register-character { right: -32px; width: 158px; height: 158px; }
    .s33-register-hero p { max-width: 73%; }
    .s33-register-eyebrow { font-size: 9px; }
    .s33-register-captcha__row { grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; }
    .s33-register-captcha__image { width: 120px; height: 44px; }
    .s33-success-actions { flex-direction: column; }
}