@font-face {
    font-family: Montserrat;
    src: url('./fonts/Montserrat.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
:root {
    color-scheme: dark;
    --app-width: 480px;
    --u: min(.0925926vw, .444444px);
    --surface-height: 100dvh;
    --surface-offset: 0px;
    --keyboard-inset: 0px;
    --blue: #007cff;
    --text: #fff;
    --muted: #a4a4a4;
    --panel: linear-gradient(115deg, #252525 0%, #272727 50%, #252525 100%);
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
    --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
    font-family: Montserrat, sans-serif;
    font-size: max(12px, calc(30 * var(--u)));
    font-weight: 600;
    background: #000;
    color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: #000; }
button, select, input { font: inherit; color: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid #76b8ff; outline-offset: 4px; }
a { color: #79baff; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-size: calc(60 * var(--u)); line-height: 1.219; font-weight: 600; }
.app-shell {
    width: 100%;
    max-width: var(--app-width);
    min-height: 100svh;
    margin: 0 auto;
    padding: calc(86 * var(--u) + var(--safe-top) + var(--tg-content-safe-area-inset-top, 0px)) calc(85 * var(--u)) calc(230 * var(--u) + var(--safe-bottom));
}
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(146 * var(--u)); margin-bottom: calc(42 * var(--u)); }
.app-header h1 { white-space: nowrap; }
.level-badge {
    position: relative; flex: none; display: grid; place-items: center;
    width: calc(146 * var(--u)); height: calc(146 * var(--u)); padding: 0;
    border: calc(10 * var(--u)) solid #242424; border-radius: 50%;
    background: #242424; box-shadow: inset 0 0 0 calc(12 * var(--u)) #000;
}
.level-value { font-size: calc(60 * var(--u)); font-weight: 800; }
.level-extra { position: absolute; top: calc(-10 * var(--u)); right: calc(-11 * var(--u)); width: calc(57 * var(--u)); height: calc(57 * var(--u)); }
.level-extra img { position: absolute; width: calc(59 * var(--u)); height: calc(77 * var(--u)); right: 0; bottom: 0; }
.level-extra span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #aaa7; background: linear-gradient(130deg,#ffffff66,#ffffff00); backdrop-filter: blur(6px); font-size: calc(30 * var(--u)); font-weight: 800; }
.pill { display: flex; align-items: center; justify-content: center; border: 1px solid #ffffff05; border-radius: 999px; background: var(--panel); min-height: calc(109 * var(--u)); padding: calc(20 * var(--u)) calc(34 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.22; font-weight: 600; text-align: left; transition: filter .15s; }
.pill:active { filter: brightness(1.25); }
.row-button { width: 100%; justify-content: space-between; gap: 10px; }
.arrow { display:block; width:.48em; height:.48em; border-top:.16em solid currentColor; border-right:.16em solid currentColor; transform:rotate(45deg); flex:none; margin-right:.16em; }
.ui-icon { display:block; width:1.1em; height:1.1em; flex:none; }
.status-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(52 * var(--u)); margin-bottom: calc(28 * var(--u)); }
.filter-button { color: #555; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.filter-button[aria-pressed=true] { color: #fff; }
.recent-section { display: flex; flex-direction: column; }
.recent-section > .row-button { margin-top: calc(20 * var(--u)); }
.recent-section--empty > .contest-list { order: -1; margin-bottom: calc(28 * var(--u)); }
.recent-section--empty .filter-button { color: #fff; }
.recent-section--empty .status-tabs { margin-bottom: 0; }
.empty-panel { display: grid; place-items: center; width: 100%; min-height: calc(115 * var(--u)); padding: 16px; background: var(--panel); border-radius: 999px; font-size: calc(40 * var(--u)); color: #555; text-align: center; }
.contest-list { display: grid; gap: calc(16 * var(--u)); }
.contest-card { padding: calc(20 * var(--u)) calc(24 * var(--u)); background: var(--panel); border-radius: calc(40 * var(--u)); min-width: 0; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.status { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: calc(6 * var(--u)) calc(16 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.1; background: #434343; white-space: nowrap; }
.status--processing { background: var(--blue); }
.status--finished { background: #198955; }
.status--cancelled, .status--banned { background: #a13339; }
.flame { width: .75em; height: 1em; background: #fff; mask: url('./assets/level-flame.svg') center/contain no-repeat; }
.countdown { border-radius: 999px; padding: calc(12 * var(--u)) calc(20 * var(--u)); background: #1d1d1d; font-size: max(8px, calc(20 * var(--u))); white-space: nowrap; }
.contest-card h3 { font-size: calc(40 * var(--u)); font-weight: 600; line-height: 1.22; margin-top: calc(25 * var(--u)); overflow-wrap: anywhere; }
.card-dates { font-size: max(8px, calc(20 * var(--u))); line-height: 1.22; margin-top: calc(4 * var(--u)); }
.card-actions { display: flex; gap: calc(16 * var(--u)); margin-top: calc(42 * var(--u)); }
.card-actions .pill { min-height: calc(67 * var(--u)); font-size: calc(30 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); background: #1b1b1b; }
.details-button { justify-content: space-between; gap: calc(90 * var(--u)); }
.card-actions--expanded .pill { width: 50%; background: linear-gradient(100deg,#555,#3c3c3c); border: 1px solid #8a8a8a; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: calc(60 * var(--u)); }
.catalogue { margin-top: calc(26 * var(--u)); }
.sort-dropdown { position:relative; max-width:55%; min-width:0; margin-left:auto; }
.sort-select { display:flex; align-items:center; justify-content:flex-end; gap:8px; width:100%; min-height:36px; border:0; background:transparent; color:#919191; font-size:max(10px,calc(25 * var(--u))); padding:8px 0 8px 8px; text-align:right; }
.sort-select[aria-expanded=true] { color:#fff; }
.sort-chevron { width:6px; height:6px; flex:none; margin:0 2px 3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.sort-select[aria-expanded=true] .sort-chevron { transform:rotate(225deg); margin-bottom:0; }
.sort-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:8; width:max-content; min-width:100%; max-width:min(260px,calc(100vw - 48px)); max-height:280px; overflow:auto; overscroll-behavior:contain; padding:6px; border:1px solid #ffffff26; border-radius:18px; background:linear-gradient(130deg,#353538f5,#222225f5); box-shadow:0 10px 30px #0008; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.sort-menu:not([hidden]) { display:grid; gap:3px; }
.sort-dropdown--up .sort-menu { top:auto; bottom:calc(100% + 6px); }
.sort-option { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:42px; padding:10px 12px; border:0; border-radius:12px; background:transparent; color:#d7d7d7; font-size:max(12px,calc(30 * var(--u))); font-weight:600; text-align:left; }
.sort-option::after { content:''; width:12px; flex:none; }
.sort-option[aria-selected=true] { color:#fff; background:#007cff; }
.sort-option[aria-selected=true]::after { content:'✓'; }
.sort-option:hover:not([aria-selected=true]), .sort-option:focus-visible:not([aria-selected=true]) { background:#ffffff12; color:#fff; }
.sort-option:focus-visible { outline:1px solid #a8d1ff; outline-offset:-2px; }
.poster-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: calc(30 * var(--u)); }
.poster-grid > .empty-panel { grid-column: 1 / -1; }
.poster { position: relative; aspect-ratio: 1; border: 0; border-radius: calc(60 * var(--u)); overflow: hidden; isolation: isolate; padding: calc(24 * var(--u)); display: grid; place-items: center; background: radial-gradient(at top left,#244066,#181818 80%); }
.poster img, .poster video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.poster-fallback { font-size: calc(36 * var(--u)); overflow-wrap: anywhere; text-align: center; }
.role-switch { position: fixed; z-index: 5; bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: calc(56 * var(--u)); width: min(100%,540px); padding: calc(22 * var(--u)) calc(85 * var(--u)) calc(98 * var(--u) + var(--safe-bottom) + var(--tg-content-safe-area-inset-bottom, 0px)); background: linear-gradient(transparent,#000 24%); }
.role-button { font-size: calc(50 * var(--u)); padding-left: 5px; padding-right: 5px; color: #aaa; }
.role-button[aria-pressed=true] { color: #fff; background: linear-gradient(100deg,#0075e9,#006de5); }
.creator-sections { display: grid; gap: calc(65 * var(--u)); margin-top: calc(250 * var(--u)); }
.creator-sections h2 { margin-bottom: calc(42 * var(--u)); }
.back-button { padding: 0; border: 0; background: none; color: #aaa; margin: 0 0 20px; min-height: 32px; }
.status-tabs--scroll { display: flex; max-width: 100%; gap: 8px; overflow-x: auto; margin: 0; padding: 4px 0 8px; }
.status-tabs--scroll .pill { min-height: 36px; font-size: 12px; padding: 8px 14px; }
.status-tabs--scroll + .sort-dropdown { max-width: 35%; flex: none; }
.loading-screen { display: grid; place-content: center; justify-items: center; gap: 14px; min-height: 140px; padding: 20px; text-align: center; color: var(--muted); }
.app-shell > .loading-screen { min-height: 65svh; }
.spinner { width: 24px; height: 24px; border: 2px solid #444; border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-panel { padding: 24px 16px; border-radius: 20px; background: #232020; line-height: 1.6; }
.error-panel .pill { margin-top: 16px; }
.load-more { width: 100%; margin-top: 16px; }
.collection-footer:empty { display: none; }
.channel-list { display: grid; gap: 10px; }
.channel-list .pill { font-size: 14px; min-height: 48px; overflow-wrap: anywhere; }
.sheet {
    position: fixed; inset: auto 0 max(var(--surface-offset),var(--keyboard-inset)); margin: 0 auto;
    width: min(100%,var(--app-width)); max-width: none; height: auto; min-height: 0;
    max-height: calc(var(--surface-height) - max(48px,var(--safe-top)) - var(--keyboard-inset));
    padding: max(22px,calc(64 * var(--u))) calc(60 * var(--u)) max(20px,var(--safe-bottom),var(--tg-content-safe-area-inset-bottom,0px));
    border: 1px solid #ffffff26; border-bottom: 0; border-radius: calc(75 * var(--u)) calc(75 * var(--u)) 0 0;
    background: linear-gradient(130deg,#48484bba,#222225e8); color: #fff;
    box-shadow: 0 -8px 30px #0003; backdrop-filter: blur(36px); -webkit-backdrop-filter: blur(36px);
    overflow: hidden; overscroll-behavior: contain;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-enter .18s ease-out; }
.sheet::before { content: ''; position: absolute; top: 8px; left: 43%; width: 14%; height: 3px; background: #fff4; border-radius: 8px; }
.sheet::backdrop { inset: var(--surface-offset) max(0px,calc((100vw - var(--app-width))/2)); background: #0005; }
.sheet-header { flex: none; display: grid; grid-template-columns: 32px minmax(0,1fr) 32px; align-items: center; gap: 8px; margin-bottom: max(18px,calc(48 * var(--u))); }
.sheet h2 { grid-column: 2; min-width: 0; text-align: center; font-size: max(16px,calc(40 * var(--u))); line-height: 1.25; overflow-wrap: anywhere; }
.close-button { flex: none; border: 1px solid #ffffff18; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #ffffff0d; color: #fff; font-size: 24px; line-height: 1; }
.sheet-content { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; }
.sheet-content > * { min-width: 0; }
.sheet p { line-height: 1.4; }
.sheet-content > div > .screen-note { margin-bottom: 18px; }
.sheet .row-button { margin-top: 12px; }
.sheet .item-list > .row-button { margin-top: 0; }
.sheet .pill { font-size: max(12px,calc(36 * var(--u))); min-height: 42px; border-radius: 999px; }
.sheet .empty-panel { font-size: max(12px,calc(36 * var(--u))); border-radius: 20px; line-height: 1.4; }
.sheet .screen-note { font-size: max(12px,calc(30 * var(--u))); }
.description { line-height: 1.6; font-weight: 500; overflow-wrap: anywhere; white-space: pre-wrap; }
.description pre { white-space: pre-wrap; }
.detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12px; margin: 20px 0; }
.detail-stats dt { color: var(--muted); }
.detail-stats dd { margin: 0; text-align: right; }
.muted { color: var(--muted); }
.level-info { text-align: center; }
.level-number { font-size: 64px; font-weight: 800; margin-bottom: 16px; }
progress { display: block; width: 100%; height: 8px; accent-color: var(--blue); margin: 20px 0 10px; border: 0; border-radius: 99px; overflow: hidden; }
progress::-webkit-progress-bar { background: #444; }
progress::-webkit-progress-value { background: var(--blue); }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.profile-stats strong { display: block; font-size: 24px; margin-bottom: 8px; }
.profile-stats span { font-size: 12px; color: var(--muted); }
@media (max-width: 340px) {
    .app-header { gap: 6px; }
    .card-meta { flex-wrap: wrap; }
    .section-heading:has(.status-tabs--scroll) { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; scroll-behavior: auto !important; } }