:root {
    --page-width: min(100vw, 430px);
    --u: calc(var(--page-width) / 1080);
    --blue: #071954;
    --gold: #f6e0b2;
    --white: #fff;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: #030b24;
    color: var(--white);
    font-family:
        'Source Han Sans SC', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}

button {
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

.invite-page {
    position: relative;
    width: var(--page-width);
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background: var(--blue);
}

.language-switcher {
    position: absolute;
    z-index: 20;
    top: calc(34 * var(--u));
    right: calc(34 * var(--u));
    width: calc(190 * var(--u));
    direction: ltr;
}

.language-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(156 * var(--u));
    height: calc(82 * var(--u));
    margin-left: auto;
    border: calc(2 * var(--u)) solid rgba(255, 232, 184, 0.62);
    border-radius: 999px;
    color: #ffe8b8;
    font-size: calc(34 * var(--u));
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    background: rgba(25, 9, 1, 0.58);
    box-shadow:
        inset 0 0 calc(18 * var(--u)) rgba(255, 210, 93, 0.18),
        0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.28);
}

.language-menu {
    position: absolute;
    top: calc(94 * var(--u));
    right: 0;
    width: calc(190 * var(--u));
    overflow: hidden;
    border: calc(2 * var(--u)) solid rgba(255, 232, 184, 0.56);
    border-radius: calc(18 * var(--u));
    background: rgba(25, 9, 1, 0.92);
    box-shadow: 0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.34);
}

.language-menu button {
    display: block;
    width: 100%;
    height: calc(58 * var(--u));
    color: #fff5dc;
    font-size: calc(28 * var(--u));
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.language-menu button.is-active {
    color: #ffd25d;
    background: rgba(255, 210, 93, 0.22);
}

.hero {
    position: relative;
    height: calc(1110 * var(--u));
    background-image: url('./assets/hero-bg.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

.countdown-card {
    position: absolute;
    left: calc(32 * var(--u));
    bottom: calc(0 * var(--u));
    width: calc(1016 * var(--u));
    height: calc(290 * var(--u));
    background: url('./assets/countdown-panel.webp') center / 100% 100% no-repeat;
}

.time-cell {
    position: absolute;
    top: 0;
    left: calc(var(--countdown-center) * var(--u));
    width: calc(180 * var(--u));
    height: 100%;
    transform: translateX(-50%);
    color: var(--gold);
    text-align: center;
}

.time-cell:nth-child(1) {
    --countdown-center: 172;
}

.time-cell:nth-child(2) {
    --countdown-center: 391;
}

.time-cell:nth-child(3) {
    --countdown-center: 614;
}

.time-cell:nth-child(4) {
    --countdown-center: 841;
}

.time-cell strong {
    position: absolute;
    top: calc(107 * var(--u));
    left: 0;
    display: flex;
    width: 100%;
    height: calc(46 * var(--u));
    align-items: center;
    justify-content: center;
    font-size: calc(56 * var(--u));
    line-height: 1;
    font-weight: 700;
}

.time-cell span {
    position: absolute;
    top: calc(216 * var(--u));
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    font-size: calc(32 * var(--u));
    line-height: 1.1;
    white-space: nowrap;
}

.ornate-panel {
    position: relative;
    width: calc(1016 * var(--u));
    margin: 0 auto;
    overflow: hidden;
    background-position: center;
    background-size: 100% 100%;
}

.ornate-panel > * {
    position: relative;
    z-index: 1;
}

h2,
h3,
p {
    margin: 0;
}

.ornate-panel h2,
.invite-copy h2,
.rank-panel h2 {
    color: var(--gold);
    text-align: center;
    font-weight: 800;
    text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
}

.subtle {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.reward-panel {
    height: calc(770 * var(--u));
    margin-top: calc(20 * var(--u));
    padding-top: calc(104 * var(--u));
    background-image: url('./assets/reward-panel-bg.webp');
    background-position: center;
    background-size: 100% 100%;
}

.reward-panel h2 {
    font-size: calc(60 * var(--u));
    line-height: 1;
}

.reward-panel .subtle {
    margin-top: calc(22 * var(--u));
    font-size: calc(30 * var(--u));
}

.reward-grid {
    position: relative;
    width: calc(1016 * var(--u));
    height: calc(450 * var(--u));
    margin: calc(34 * var(--u)) auto 0;
}

.reward-item {
    position: absolute;
    top: 0;
    width: calc(420 * var(--u));
    height: calc(450 * var(--u));
    color: #ffd133;
    text-align: center;
}

.reward-item-success {
    left: calc(54 * var(--u));
}

.reward-item-topup {
    left: calc(560 * var(--u));
}

.reward-visual {
    position: absolute;
    z-index: 0;
    display: block;
    left: 50%;
    top: 0;
    width: calc(370 * var(--u));
    max-width: none;
    transform: translateX(-50%);
    object-fit: contain;
}

.reward-item-topup .reward-visual {
    width: calc(382 * var(--u));
}

.reward-item strong {
    position: absolute;
    top: calc(338 * var(--u));
    left: 50%;
    display: block;
    width: calc(520 * var(--u));
    transform: translateX(-50%);
    font-size: calc(42 * var(--u));
    line-height: 1;
    white-space: nowrap;
}

.reward-item span {
    position: absolute;
    top: calc(404 * var(--u));
    left: 50%;
    display: block;
    width: calc(430 * var(--u));
    transform: translateX(-50%);
    color: var(--white);
    font-size: calc(34 * var(--u));
    font-weight: 700;
    line-height: 1.2;
}

.plus {
    position: absolute;
    top: calc(142 * var(--u));
    left: calc(472 * var(--u));
    display: block;
    width: calc(78 * var(--u));
    height: calc(78 * var(--u));
}

.invite-copy {
    width: calc(1016 * var(--u));
    margin: calc(42 * var(--u)) auto 0;
    text-align: center;
}

.invite-copy h2 {
    font-size: calc(46 * var(--u));
    line-height: 1;
}

.invite-copy .subtle {
    margin-top: calc(28 * var(--u));
    font-size: calc(30 * var(--u));
}

.invite-fields {
    display: grid;
    gap: calc(34 * var(--u));
    width: calc(1016 * var(--u));
    margin: calc(58 * var(--u)) auto 0;
}

.invite-field {
    position: relative;
    width: 100%;
    min-width: 0;
    height: calc(93 * var(--u));
    overflow: hidden;
    background: url('./assets/link-input.svg') center / 100% 100% no-repeat;
}

.link-box {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    line-height: calc(93 * var(--u));
    padding: 0 calc(112 * var(--u)) 0 calc(52 * var(--u));
    overflow: hidden;
    color: var(--gold);
    font-size: calc(30 * var(--u));
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: plaintext;
}

.invite-field.is-code .link-box {
    padding-left: calc(112 * var(--u));
    text-align: center;
}

.invite-code {
    font-weight: 700;
    letter-spacing: calc(1 * var(--u));
}

.copy-icon-button {
    position: absolute;
    top: 50%;
    right: calc(42 * var(--u));
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
    cursor: pointer;
    transform: translateY(-50%);
    background: url('./assets/generated/copy-icon.png') center / 100% 100%
        no-repeat;
}

.copy-icon-button:active {
    transform: translateY(-50%) scale(0.96);
}

.ornate-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(774 * var(--u));
    height: calc(133 * var(--u));
    margin: 0 auto;
    color: var(--gold);
    font-size: calc(50 * var(--u));
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
    background: url('./assets/button-active-wide.webp') center / 100% 100%
        no-repeat;
}

.ornate-button:active {
    transform: translateY(calc(2 * var(--u)));
}

.bind-invite-button {
    margin-top: calc(68 * var(--u));
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: calc(34 * var(--u)) calc(36 * var(--u));
    height: calc(520 * var(--u));
    margin-top: calc(62 * var(--u));
    padding: calc(108 * var(--u)) calc(92 * var(--u)) calc(92 * var(--u));
    background-image: url('./assets/generated/panel-a-stats-bg.webp');
}

.stat {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat strong {
    color: var(--gold);
    font-size: calc(56 * var(--u));
    line-height: 1;
    font-weight: 700;
}

.stat span {
    width: 100%;
    margin-top: calc(12 * var(--u));
    color: var(--gold);
    font-size: calc(30 * var(--u));
    line-height: 1.08;
}

.monthly-panel {
    min-height: calc(1530 * var(--u));
    margin-top: calc(34 * var(--u));
    margin-bottom: calc(32 * var(--u));
    padding: calc(126 * var(--u)) calc(78 * var(--u)) calc(70 * var(--u));
    background-image: url('./assets/generated/panel-a-monthly-bg.webp');
}

.monthly-panel.is-quota {
    min-height: calc(1375 * var(--u));
    background-image: url('./assets/generated/panel-a-monthly-quota-bg.webp');
}

.monthly-panel h2,
.rank-panel h2 {
    font-size: calc(60 * var(--u));
    line-height: 1;
}

.task-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(38 * var(--u));
    margin-top: calc(78 * var(--u));
}

.task-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(120 * var(--u));
    padding: 0 calc(36 * var(--u));
    color: var(--gold);
    font-size: calc(30 * var(--u));
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25);
    background: url('./assets/tab-inactive-a.webp') center / 100% 100% no-repeat;
}

.task-tab span {
    display: block;
}

.task-tab.is-active {
    background-image: url('./assets/tab-active-a.webp');
}

.monthly-panel.is-quota .task-tab {
    background-image: url('./assets/tab-inactive-b.webp');
}

.monthly-panel.is-quota .task-tab.is-active {
    background-image: url('./assets/tab-active-b.webp');
}

.task-pane {
    display: none;
}

.task-pane.is-active {
    display: block;
}

.timeline {
    position: relative;
    margin-top: calc(76 * var(--u));
    padding-left: calc(114 * var(--u));
}

.timeline::before {
    position: absolute;
    top: calc(40 * var(--u));
    bottom: calc(92 * var(--u));
    left: calc(38 * var(--u));
    width: calc(4 * var(--u));
    content: '';
    background: var(--gold);
}

.milestone {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(220 * var(--u));
    align-items: center;
    min-height: calc(139 * var(--u));
    column-gap: calc(20 * var(--u));
    margin-bottom: calc(30 * var(--u));
    padding: calc(18 * var(--u)) calc(34 * var(--u));
    background: url('./assets/milestone-row.svg') center / 100% 100% no-repeat;
}

.milestone::before {
    position: absolute;
    top: 50%;
    left: calc(-92 * var(--u));
    width: calc(41 * var(--u));
    height: calc(41 * var(--u));
    content: '';
    transform: translateY(-50%);
    background: url('./assets/timeline-node.png') center / contain no-repeat;
}

.milestone.is-current::before {
    background-image: url('./assets/timeline-node-active.png');
}

.milestone > div,
.quota-card > div {
    min-width: 0;
}

.milestone h3,
.quota-card h3 {
    color: var(--white);
    font-size: calc(36 * var(--u));
    font-weight: 700;
    line-height: 1.05;
}

.milestone p,
.quota-card p {
    margin-top: calc(14 * var(--u));
    color: var(--gold);
    font-size: calc(30 * var(--u));
    line-height: 1.2;
}

.copy-task-button {
    margin-top: calc(54 * var(--u));
}

.footnote {
    margin-top: calc(34 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: 1.25;
}

.quota-list {
    display: grid;
    gap: calc(50 * var(--u));
    margin-top: calc(76 * var(--u));
}

.quota-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(220 * var(--u));
    align-items: center;
    min-height: calc(169 * var(--u));
    padding: calc(24 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u))
        calc(36 * var(--u));
    background: url('./assets/task-row.svg') center / 100% 100% no-repeat;
}

.claim-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(220 * var(--u));
    height: calc(60 * var(--u));
    color: var(--gold);
    font-size: calc(30 * var(--u));
    font-weight: 700;
    background: url('./assets/claim-inactive.png') center / 100% 100% no-repeat;
}

.claim-button.is-ready {
    background-image: url('./assets/claim-active.webp');
}

.claim-button:disabled {
    cursor: default;
}

.task-empty {
    margin: calc(76 * var(--u)) auto calc(50 * var(--u));
    color: var(--gold);
    font-size: calc(32 * var(--u));
    line-height: 1.3;
    text-align: center;
}

.rank-panel {
    min-height: calc(5124 * var(--u));
    margin-top: calc(42 * var(--u));
    margin-bottom: calc(28 * var(--u));
    padding: calc(126 * var(--u)) calc(68 * var(--u)) calc(72 * var(--u));
    background-image: url('./assets/generated/panel-b-rank-bg.webp');
}

.rank-list {
    display: grid;
    gap: calc(10 * var(--u));
    margin-top: calc(72 * var(--u));
}

.rank-row {
    display: grid;
    grid-template-columns:
        calc(154 * var(--u)) calc(108 * var(--u)) minmax(0, 1fr)
        auto;
    align-items: center;
    min-height: calc(149 * var(--u));
    padding: 0 calc(42 * var(--u)) 0 calc(28 * var(--u));
    background: url('./assets/rank-row.svg') center / 100% 100% no-repeat;
}

.rank-no {
    grid-column: 1;
    grid-row: 1;
    color: var(--white);
    font-size: calc(36 * var(--u));
    line-height: 1;
    text-align: center;
}

.rank-medal {
    grid-column: 1;
    grid-row: 1;
    width: calc(74 * var(--u));
    height: calc(72 * var(--u));
    object-fit: contain;
    justify-self: center;
}

.rank-avatar {
    grid-column: 2;
    grid-row: 1;
    width: calc(108 * var(--u));
    height: calc(108 * var(--u));
    border: calc(2 * var(--u)) solid #ffebbb;
    border-radius: 999px;
    object-fit: cover;
}

.rank-name {
    grid-column: 3;
    grid-row: 1;
    padding-left: calc(24 * var(--u));
    overflow: hidden;
    color: var(--white);
    font-size: calc(36 * var(--u));
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-score {
    grid-column: 4;
    grid-row: 1;
    color: var(--white);
    font-size: calc(36 * var(--u));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.rank-row > span:not(.rank-no):not(.rank-score) {
    display: none;
}

.invite-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(28 * var(--u));
    background: rgba(0, 0, 0, 0.68);
}

.bind-card {
    position: relative;
    width: min(calc(1016 * var(--u)), calc(100vw - 24px));
    min-height: calc(786 * var(--u));
    padding: calc(104 * var(--u)) calc(90 * var(--u)) calc(78 * var(--u));
    overflow: hidden;
    background: url('./assets/generated/modal-bg.webp') center / 100% 100%
        no-repeat;
}

.bind-card > * {
    position: relative;
    z-index: 1;
}

.bind-card h2 {
    color: var(--gold);
    font-size: calc(60 * var(--u));
    line-height: 1;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
}

.bind-input-state,
.bind-result-state {
    width: calc(827 * var(--u));
    max-width: 100%;
    margin: calc(70 * var(--u)) auto 0;
}

.bind-input-shell {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(93 * var(--u));
    background: url('./assets/generated/invite-input-bg.png') center / 100% 100%
        no-repeat;
}

.bind-input-shell input {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 calc(124 * var(--u)) 0 calc(36 * var(--u));
    border: 0;
    outline: 0;
    color: var(--gold);
    font:
        800 calc(30 * var(--u)) / 1 'Source Han Sans SC',
        'Noto Sans',
        'Helvetica Neue',
        Arial,
        sans-serif;
    text-align: left;
    background: url('./assets/generated/search-icon.png') right
        calc(44 * var(--u)) center / calc(52 * var(--u)) calc(49 * var(--u))
        no-repeat;
}

.bind-input-shell input::placeholder {
    color: rgba(246, 224, 178, 0.55);
}

.inviter-card {
    display: grid;
    grid-template-columns: calc(122 * var(--u)) minmax(0, 1fr);
    align-items: center;
    gap: calc(28 * var(--u));
    height: calc(152 * var(--u));
    padding: 0 calc(42 * var(--u));
    background: url('./assets/generated/inviter-card-bg.png') center / 100% 100%
        no-repeat;
}

.inviter-card img {
    width: calc(104 * var(--u));
    height: calc(104 * var(--u));
    border: calc(2 * var(--u)) solid #ffebbb;
    border-radius: 999px;
    object-fit: cover;
}

.inviter-card strong,
.inviter-card span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inviter-card strong {
    color: var(--white);
    font-size: calc(36 * var(--u));
    line-height: 1.1;
    font-weight: 800;
}

.inviter-card span {
    margin-top: calc(14 * var(--u));
    color: var(--gold);
    font-size: calc(28 * var(--u));
    line-height: 1;
}

.bind-actions {
    display: grid;
    grid-template-columns: repeat(2, calc(441 * var(--u)));
    justify-content: center;
    gap: calc(38 * var(--u));
    margin-top: calc(152 * var(--u));
}

.bind-action-button {
    width: 100%;
    height: calc(120 * var(--u));
    color: #6f2d12;
    font-size: calc(34 * var(--u));
    line-height: 1;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 calc(1 * var(--u)) calc(1 * var(--u))
        rgba(255, 255, 255, 0.45);
    background: url('./assets/generated/modal-button-active.webp') center / 100%
        100% no-repeat;
    cursor: pointer;
}

.bind-cancel-button {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.28);
    background-image: url('./assets/generated/modal-button-inactive.webp');
}

.bind-action-button:disabled {
    cursor: default;
    filter: grayscale(0.25) brightness(0.86);
}

[hidden] {
    display: none !important;
}
