: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.png');
    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.png') 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-image:
        url('./assets/panel-top-a.png'), url('./assets/panel-bottom-a.png'),
        url('./assets/panel-middle-a.png');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
        top center,
        bottom center,
        center center;
    background-size:
        100% auto,
        100% auto,
        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(790 * var(--u));
    margin-top: calc(20 * var(--u));
    padding-top: calc(122 * var(--u));
    background-image: url('./assets/reward-panel-bg.png');
    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(486 * var(--u));
    margin: calc(28 * var(--u)) auto 0;
}

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

.reward-item:first-child {
    left: calc(8 * var(--u));
}

.reward-item:last-child {
    left: calc(522 * var(--u));
}

.reward-orb {
    position: absolute;
    z-index: 0;
    display: block;
    inset: 0;
    width: calc(486 * var(--u));
    height: calc(486 * var(--u));
}

.reward-gold {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: calc(178 * var(--u));
    transform: translate(-50%, -50%);
}

.reward-item strong {
    position: absolute;
    top: calc(98 * var(--u));
    left: calc(290 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: 1;
    white-space: nowrap;
}

.reward-item span {
    position: absolute;
    top: calc(421 * var(--u));
    left: 50%;
    display: block;
    width: calc(360 * var(--u));
    transform: translateX(-50%);
    color: var(--gold);
    font-size: calc(30 * var(--u));
    line-height: 1.2;
}

.plus {
    position: absolute;
    top: calc(207 * var(--u));
    left: calc(472 * var(--u));
    display: block;
    width: calc(71 * var(--u));
    height: calc(71 * 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;
    grid-template-columns: minmax(0, 1fr) calc(286 * var(--u));
    gap: calc(24 * var(--u));
    width: calc(760 * var(--u));
    margin: calc(58 * var(--u)) auto 0;
}

.link-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: calc(85 * var(--u));
    padding: 0 calc(28 * var(--u));
    overflow: hidden;
    color: var(--gold);
    font-size: calc(30 * var(--u));
    text-overflow: ellipsis;
    white-space: nowrap;
    background: url('./assets/link-input.svg') center / 100% 100% no-repeat;
}

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

.invite-actions {
    display: flex;
    width: calc(764 * var(--u));
    align-items: center;
    justify-content: center;
    gap: calc(24 * var(--u));
    margin: calc(50 * var(--u)) auto 0;
}

.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.png') center / 100% 100%
        no-repeat;
}

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

.invite-actions .ornate-button {
    flex: 0 0 calc(520 * var(--u));
    width: calc(520 * var(--u));
    height: calc(100 * var(--u));
    font-size: calc(42 * var(--u));
}

.invite-actions .small-copy-button {
    flex: 0 0 calc(220 * var(--u));
    width: calc(220 * var(--u));
    height: calc(78 * var(--u));
    font-size: calc(30 * var(--u));
    background-image: url('./assets/claim-active.png');
}

.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));
}

.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));
}

.monthly-panel.is-quota {
    min-height: calc(1375 * var(--u));
}

.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.png') center / 100% 100% no-repeat;
}

.task-tab span {
    display: block;
}

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

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

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

.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.png');
}

.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/panel-top-b.png'), url('./assets/panel-bottom-b.png'),
        url('./assets/panel-middle-b.png');
}

.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;
}

[hidden] {
    display: none !important;
}