/* KOLOBOK: responsive Telegram Mini App, amber on graphite. */
:root {
    color-scheme: dark;
    --bg: #0b0d12;
    --surface: #151820;
    --border: rgba(255, 255, 255, .085);
    --text: #f4f2ed;
    --muted: #a4a9b6;
    --amber: #ffca68;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --shell-width: 520px;
    --gutter: clamp(12px, 4vw, 22px);
    --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--app-safe-top, 0px)) + var(--app-content-top, 0px));
    --safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--app-safe-bottom, 0px)) + var(--app-content-bottom, 0px));
    --safe-left: calc(max(env(safe-area-inset-left, 0px), var(--app-safe-left, 0px)) + var(--app-content-left, 0px));
    --safe-right: calc(max(env(safe-area-inset-right, 0px), var(--app-safe-right, 0px)) + var(--app-content-right, 0px));
    --nav-height: 72px;
    --nav-space: calc(var(--nav-height) + var(--safe-bottom) + 28px);
}
* { box-sizing: border-box; }
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 100%;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { background: radial-gradient(ellipse at 50% 0, #292015 0, var(--bg) 60%); }
button, input, textarea { font: inherit; }
button {
    touch-action: manipulation;
    line-height: 1.35;
    cursor: pointer;
    transition: background .2s, opacity .2s;
}
button:active:not(:disabled) { opacity: .8; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
img { object-fit: contain; max-width: 100%; }
::selection { background: var(--amber); color: var(--bg); }
.hidden { display: none !important; }
:is(.containerMain, .containerLeaderboard, .containerFriends, .containerWallet, .containerMainGame, .containerGame, .containerCombo, .containerTasks) {
    width: 100%;
    max-width: var(--shell-width);
    height: 100vh;
    height: var(--app-height, 100dvh);
    min-height: 0;
    margin: 0 auto;
    position: relative;
    background: radial-gradient(ellipse at 100% 0%, #ffb44610, transparent 40%), var(--bg);
    box-shadow: 0 0 80px #0004;
    overflow: hidden;
}
:is(.main-content, .containerscrolling, .tasks-content) {
    height: 100%;
    max-height: none;
    padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + var(--gutter)) var(--nav-space) calc(var(--safe-left) + var(--gutter));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #343740 transparent;
}
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 0 14px; }
.wordmark { text-decoration: none; color: var(--text); font-size: 1.1rem; font-weight: 850; letter-spacing: -.7px; white-space: nowrap; }
.wordmark > span:first-child { color: var(--amber); }
.wordmark-dot { display: inline-block; width: 5px; height: 5px; background: var(--amber); border-radius: 50%; margin-left: 3px; }
.network-badge { display: inline-flex; align-items: center; gap: 6px; color: #b0b5c1; font-size: .66rem; }
.network-badge > span { width: 5px; height: 5px; border-radius: 50%; background: #7de3b6; flex: 0 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) clamp(80px, 26vw, 142px); align-items: center; text-align: left; gap: 8px; padding: 16px 0 24px; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.eyebrow { color: var(--muted); font-size: .64rem; font-weight: 600; letter-spacing: 1.3px; line-height: 1.7; margin: 0 0 8px; overflow-wrap: anywhere; }
.hero h1 { font-size: clamp(1.45rem, 6.7vw, 2.2rem); font-weight: 800; line-height: 1.16; letter-spacing: -1px; margin: 0; white-space: normal; overflow-wrap: anywhere; }
.hero h1 span { color: var(--amber); }
.hero-copy > p:last-child { color: var(--muted); font-size: .78rem; line-height: 1.6; margin: 12px 0 0; }
.hero-orbit { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; min-width: 0; isolation: isolate; }
.hero-orbit::before { content: ''; position: absolute; inset: 2%; border: 1px solid #ffca682a; border-radius: 50%; }
.hero-orbit::after { content: ''; position: absolute; inset: 15%; background: #ffb13b30; border-radius: 50%; filter: blur(24px); z-index: -1; }
.hero .main-image { position: relative; width: 80%; height: auto; margin: 0; filter: drop-shadow(0 12px 14px #0006); animation: mascot-float 5s ease-in-out infinite; }
.orbit-label { position: absolute; bottom: -10px; inset-inline: 0; text-align: center; font-size: .6rem; letter-spacing: .8px; color: var(--amber); }
.centered-block { position: relative; margin: 0 0 26px; padding: clamp(16px, 4vw, 22px); border-radius: 24px; border: 1px solid #ffca682c; background: radial-gradient(ellipse at 90% 0, #ffca6812, transparent 70%), linear-gradient(130deg, #202126, #151820); box-shadow: 0 14px 34px #0003; min-width: 0; }
.balance-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; width: 100%; color: var(--muted); font-size: .65rem; letter-spacing: 1px; }
.balance-status { color: var(--amber); font-size: .6rem; letter-spacing: .5px; }
.user-infoMain { width: 100%; max-width: none; flex-direction: column-reverse; align-items: stretch; gap: 9px; padding: 14px 0 18px; min-width: 0; }
.usernameP { min-width: 0; text-align: left; }
#username-display { color: #bfc1ca !important; font-size: .82rem; font-weight: 400; margin: 0; overflow-wrap: anywhere; }
.coins { width: 100%; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.coins > div:first-child { min-width: 0; max-width: 100%; flex: 1 1 180px; flex-wrap: wrap; gap: 6px; margin-right: 0 !important; }
#points { color: var(--text); font-size: clamp(1.8rem, 8vw, 2.5rem) !important; line-height: 1.15; font-weight: 750 !important; letter-spacing: -1px; overflow-wrap: anywhere; max-width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.coins > div:first-child > span:last-child { font-size: .75rem !important; font-weight: 500 !important; color: var(--amber) !important; margin-left: 0 !important; }
.coins > div:last-child { max-width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 20px; background: #ffffff05; }
#ton-amount { color: #d3d6df !important; font-size: .82rem !important; overflow-wrap: anywhere; min-width: 0; }
:is(.start-button, .invite-button, .payment-button, .buttonGameCombos, .buttonCombo.active) { background: var(--amber); color: #261a08; border: 0; font-family: inherit; box-shadow: 0 5px 18px #ffb13b16; font-weight: 650; border-radius: 14px; }
:is(.start-button, .invite-button, .payment-button, .buttonGameCombos, .buttonCombo) { height: auto; min-height: 48px; padding: 12px 16px; white-space: normal; overflow-wrap: anywhere; font-size: .9rem; }
.start-button { width: 100%; margin: 0; }
.start-button:hover, .payment-button:hover { background: #ffda90; }
.payment-buttonMain { width: 100%; height: auto; min-height: 44px; margin: 8px 0 0; padding: 8px 0 0; border: 0; background: transparent; color: #c3c5ce; box-shadow: none; display: flex; gap: 12px; justify-content: space-between; font-family: inherit; font-size: .8rem; white-space: normal; text-align: left; }
.payment-buttonMain span:last-child { color: var(--amber); font-size: 1.3rem; }
.task-list { margin: 0 0 28px; padding: 0 !important; }
.section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; text-align: left; padding: 0 1px 14px; }
.section-heading > div { min-width: 0; flex: 1 1 160px; }
.section-heading .eyebrow { margin: 0 0 4px; font-size: .6rem; letter-spacing: 1px; }
.section-heading h2 { font-size: 1.12rem; letter-spacing: -.4px; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.section-tag { padding: 6px 7px; border-radius: 6px; color: var(--amber); background: #ffca680d; font-size: .6rem; letter-spacing: .5px; }
.task-item { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 12px !important; margin-bottom: 10px !important; border-radius: 17px !important; border: 1px solid var(--border) !important; background: var(--surface); box-shadow: none; min-width: 0; }
.task-content { display: grid !important; grid-template-columns: 40px minmax(0, 1fr); min-width: 0; gap: 10px; }
.task-content > img { width: 40px !important; height: 40px !important; border-radius: 12px !important; padding: 6px; background: var(--mission-accent, var(--amber)); }
.task-text { min-width: 0; max-height: none; margin-left: 0 !important; color: var(--text); overflow: visible; font-weight: 400; }
.task-text > p { color: #edeef2; font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; font-weight: 600 !important; }
.reward-section { flex-wrap: wrap; column-gap: 7px !important; row-gap: 4px !important; margin-top: 5px; min-width: 0; }
.reward-section span { color: #a5c5b5 !important; font-size: .72rem !important; margin: 0; line-height: 1.6; opacity: 1; overflow-wrap: anywhere; min-width: 0; }
.reward-section > span:nth-child(2) { gap: 3px !important; }
.reward-section img { width: 13px !important; height: 13px !important; flex: 0 0 auto; }
.task-button { width: auto; height: auto; min-height: 44px; min-width: 52px; max-width: 100%; margin: 0; padding: 10px !important; background: #ffffff0c !important; color: #eee !important; border: 1px solid #ffffff12 !important; border-radius: 10px !important; font-size: .78rem !important; white-space: normal; overflow-wrap: anywhere; }
.task-button:hover { background: #ffca681f !important; border-color: #ffca6840 !important; }
.check-button { background: transparent; color: var(--amber); min-height: 44px; padding: 8px; font-size: .75rem; border: 1px solid #ffca6838; border-radius: 8px; white-space: normal; }
.check-button:disabled { color: #8c93a2; border-color: #ffffff13; }
.task-item[hidden] { display: none !important; }
.bottom-navmain { position: fixed; inset-inline: calc(var(--safe-left) + var(--gutter)) calc(var(--safe-right) + var(--gutter)); bottom: calc(var(--app-bottom-offset, 0px) + var(--safe-bottom) + 10px); width: auto; max-width: calc(var(--shell-width) - 2 * var(--gutter)); min-height: 72px; margin-inline: auto; transform: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; border-radius: 20px; border: 1px solid #ffffff14; background: #1b1e27f5; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); padding: 6px 4px; z-index: 50; box-shadow: 0 8px 40px #0008; }
.nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 56px; padding: 6px 2px; border: 0; border-radius: 14px; background: transparent; color: #abb1bf; font-size: .65rem; font-weight: 500; cursor: pointer; }
.nav-tab > span { max-width: 100%; overflow-wrap: anywhere; }
.bottom-navmain .nav-tab img { width: 22px; height: 22px; opacity: .6; padding: 0; transition: none; flex: 0 0 auto; }
.bottom-navmain .nav-tab:hover img { transform: none; }
.nav-tab[aria-current="page"] { background: #ffca6812; color: var(--amber); }
.bottom-navmain .nav-tab[aria-current="page"] img { opacity: 1; filter: brightness(0) saturate(100%) invert(84%) sepia(50%) saturate(649%) hue-rotate(335deg) brightness(104%) contrast(101%); }
:is(#leaderboard-screen, #combogames-screen, #friends-screen) { overflow-y: auto; overflow-x: hidden; padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + var(--gutter)) var(--nav-space) calc(var(--safe-left) + var(--gutter)); overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.leaderboard-content { height: auto; max-height: none; padding: 0; overflow: visible; }
.leaderboard-h1, .header-container h1 { font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 800; letter-spacing: -.8px; text-align: left; color: var(--text); margin: 0 0 20px; overflow-wrap: anywhere; }
.user-detailsup { width: 100%; max-width: none; display: flex; flex-wrap: wrap; gap: 12px; background: linear-gradient(135deg, #28251e, #171a22); border: 1px solid #ffca6830; border-radius: 20px; padding: 16px; margin: 0; }
.user-detailsup .user-info { flex: 1 1 160px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.info-usersup, .info-users { min-width: 0; flex: 1; }
.usernameup, .pointsup, .username { color: var(--text); font-size: .9rem; min-width: 0; max-width: 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.user-rankup, .user-rank { color: var(--amber); font-size: .85rem; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.profile-photo, .profile-photoup { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px; margin: 0; }
.user-photo-points, .user-photo-pointsup { gap: 5px; min-width: 0; flex-wrap: wrap; margin-top: 4px; }
.user-photo-pointsup .user-photo, .user-photo-points .user-photo { flex: 0 0 18px; }
.payment-button { width: 100%; margin: 14px 0 22px; }
.leaderboard-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 0 0 10px; }
.total-players, .leaderboard-title { color: var(--muted); font-size: .8rem; margin: 0; overflow-wrap: anywhere; }
.scrollable-leaderboard { padding: 0; overflow: visible; }
.leaderboard-entry { display: flex; flex-wrap: wrap; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 8px; box-shadow: none; overflow: visible; }
.user-details { flex: 1 1 160px; min-width: 0; gap: 10px; }
.points { color: var(--muted); font-size: .82rem; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; margin: 0; }
.medal-icon { width: 18px; height: 18px; }
.header-container { background: transparent; border: 0; padding: 0; }
.game-selection-container { margin-top: 20px; }
.game-block { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: none; }
.game-block:hover { transform: none; }
.game-icon, .game-icon1 { width: 52px; height: 52px; padding: 0; margin: 0; transform: none; }
.game-info { margin: 0; min-width: 0; }
.game-info h2 { color: var(--text); font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.game-info p { color: var(--muted); font-size: .82rem; line-height: 1.6; overflow-wrap: anywhere; }
.buttonGameCombos { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.buttonGameCombos:hover:not(:disabled) { transform: none; background: #ffda90; }
.buttonGameCombos:disabled, .buttonCombo:disabled { color: #a1a7b5; background: #ffffff08; border: 1px solid var(--border); box-shadow: none; }
.moiref { padding: 0; max-height: none; overflow: visible; }
.friends-content > img { width: clamp(72px, 25vw, 110px) !important; height: auto !important; margin: 0 0 20px; filter: drop-shadow(0 12px 25px #ffca6818); }
.friends-count { color: var(--text); font-size: 1.1rem; margin: 0 0 16px; overflow-wrap: anywhere; }
.referrals-table { margin: 0; }
.friend-block { background: var(--surface); border-color: var(--border); box-shadow: none; padding: 14px; gap: 10px; }
.friend-block img { width: 40px !important; height: 40px !important; flex: 0 0 40px; margin: 0; }
.friend-info { display: flex; flex-wrap: wrap; width: auto; min-width: 0; flex: 1; color: var(--text); font-size: .85rem; gap: 4px 10px; text-align: left; }
.friend-info .username { flex: 1 1 120px; }
.no-referrals { padding: 24px 12px; text-align: center; color: var(--muted); line-height: 1.7; }
.invite-button { position: static; transform: none; width: 100%; margin: 18px 0 0 !important; display: flex; }
.gif-container { margin: 0 0 18px; }
.gif-container img { width: clamp(80px, 26vw, 140px); max-width: 140px; height: auto; margin: 0; }
.countdown-section, .airdrop-section { border-radius: 22px; background: var(--surface); border: 1px solid var(--border); padding: 20px 16px; }
.airdrop-title { font-size: .9rem; color: var(--muted); font-weight: 450; margin: 0 0 8px; }
#countdown-timer { color: var(--amber); font-size: 1.2rem; line-height: 1.7; overflow-wrap: anywhere; }
#ton-connect { max-width: 100%; min-width: 0; margin-bottom: 20px; }
#ton-connect > * { max-width: 100%; }
.airdrop-section { text-align: left; }
.criteria-title { font-size: 1.1rem; color: var(--text); margin: 0 0 18px; }
.airdrop-criteria li { color: #c6cad4; font-size: .9rem; margin: 14px 0; line-height: 1.5; gap: 12px; overflow-wrap: anywhere; }
.airdrop-criteria img { width: 36px; height: 36px; flex: 0 0 36px; padding: 7px; border-radius: 10px; background: #ffffff0a; margin: 0; }
.game-topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-topbar h1 { font-size: 1.2rem; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.game-back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: #ffffff08; color: var(--text); font-size: 1.1rem; }
#game-screen { padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + var(--gutter)) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + var(--gutter)); overflow-y: auto; }
#game-screen.active { display: flex !important; align-items: stretch; gap: 16px; }
.statsGameLeft { position: static; padding: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.statsGameLeft p { margin: 0; overflow-wrap: anywhere; }
.coin-container { display: grid; place-items: center; flex: 1 0 auto; }
.coinGame { position: relative; width: clamp(100px, 30vmin, 220px); height: auto; aspect-ratio: 1; margin: 6px auto; flex-shrink: 0; }
#result { position: static; transform: none; width: 100%; margin: 0; min-height: 1.5em; font-size: 1rem; overflow-wrap: anywhere; }
.buttonGame { position: static; width: 100%; transform: none; margin: auto 0 0; gap: 12px; flex: 0 0 auto; }
.buttonGame button { width: calc(50% - 6px); min-width: 0; min-height: 48px; background: var(--amber); color: #261a08; border: 0; font-size: .95rem; padding: 12px; white-space: normal; overflow-wrap: anywhere; }
.buttonGame button:disabled { background: #242832; color: var(--muted); border: 0; }
.game-containerCombo { height: 100%; min-height: 0; padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + var(--gutter)) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + var(--gutter)); gap: 20px; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; }
.game-containerCombo > * { flex-shrink: 0; }
.headerCombo { flex-wrap: wrap; gap: 12px; margin: 0; }
.dailyTitle { font-size: 1.1rem; color: var(--text); }
.selection-fieldsCombo { gap: 10px; margin: 0; }
.fieldCombo { width: calc((100% - 30px) / 4); height: auto; min-width: 0; flex-shrink: 0; background: var(--surface); border-color: #ffca6840; border-radius: 14px; }
.image-gridCombo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.image-gridCombo img { width: 100%; aspect-ratio: 1; border: 2px solid transparent; padding: 3px; border-radius: 14px; }
.image-gridCombo img.selected { box-shadow: none; border-color: var(--amber); }
.footerCombo { margin-top: auto; }
.buttonCombo { min-width: 0; }
.hint-btnCombo { background: #ffca6815; border: 1px solid #ffca6820; color: var(--amber); min-height: 44px; min-width: 44px; padding: 8px 12px; }
.overlay { position: fixed; inset: 0; width: 100%; height: var(--app-height, 100dvh); z-index: 80; background: #0009; backdrop-filter: blur(8px); }
.popupStars {
    left: var(--safe-left);
    right: var(--safe-right);
    bottom: -110vh;
    width: auto;
    max-width: var(--shell-width);
    margin-inline: auto;
    transform: none;
    display: block;
    max-height: calc(var(--app-height, 100dvh) - var(--safe-top) - 12px);
    padding-bottom: calc(var(--safe-bottom) + 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 26px 26px 0 0;
    background: #191c24;
    border: 1px solid var(--border);
    z-index: 90;
    box-shadow: 0 -20px 80px #0007;
}
.popupStars.active { bottom: var(--app-bottom-offset, 0px); }
.popup-close-row { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 8px 10px; background: #191c24f5; }
.popupStars .popup-content { width: 100%; padding: 0 clamp(14px, 4vw, 24px) 12px; gap: 10px; }
.popup-content > img { width: clamp(48px, 16vh, 86px) !important; height: auto !important; }
.popup-text { color: #b7bdca; font-size: .85rem; line-height: 1.65; font-weight: 400; padding: 0 0 10px; overflow-wrap: anywhere; }
.popup-content button { min-height: 48px; height: auto; white-space: normal; overflow-wrap: anywhere; font-size: 1rem; border-radius: 13px; padding: 12px 16px; background: #252934; border: 1px solid var(--border); }
.popup-content button.active { border-color: var(--amber); background: #ffca6810; }
.popup-content button[id^="confirmButton"] { background: var(--amber) !important; color: #261a08; text-align: center; margin-top: 10px; }
.close-button { position: static; color: #c2c8d4; width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 1.65rem; background: #ffffff08; }
.popup { bottom: var(--app-bottom-offset, 0px); left: var(--safe-left); right: var(--safe-right); transform: none; width: auto; max-width: var(--shell-width); max-height: calc(var(--app-height, 100dvh) - var(--safe-top) - 12px); margin-inline: auto; overflow-y: auto; padding: 20px 16px calc(20px + var(--safe-bottom)); background: #191c24; border: 1px solid var(--border); border-radius: 24px 24px 0 0; z-index: 90; }
.popup button { width: 100%; min-height: 48px; margin: 5px 0; font-size: .95rem; background: #282c37; color: var(--text); border-radius: 12px; padding: 12px; white-space: normal; }
.modalCombo { height: var(--app-height, 100dvh); padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px); }
.modal-contentCombo { width: 100%; max-width: 480px; padding: 18px; background: #191c24; border: 1px solid var(--border); border-radius: 24px; max-height: 100%; overflow-y: auto; }
.close-btnCombo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; top: 6px; right: 6px; color: var(--text); border: 0; background: #ffffff08; border-radius: 12px; }
#hint-text { font-size: .85rem; line-height: 1.8; margin-top: 36px; overflow-wrap: anywhere; }
#loading-screen { height: var(--app-height, 100dvh); padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px); background: radial-gradient(circle at center, #31251a, #0b0d12 65%); gap: 20px; }
.loading-image { position: static; width: min(110px, 25vh); height: auto; z-index: 0; filter: drop-shadow(0 10px 30px #ffca6820); }
.loading-wordmark { font-size: 1.65rem; font-weight: 800; letter-spacing: -1px; }
.loading-wordmark > span { display: block; color: var(--muted); font-size: .65rem; text-align: center; letter-spacing: 2px; margin-top: 8px; }
.progress-bar { height: 4px; max-width: 180px; border: 0; background: #ffffff0e; bottom: calc(var(--safe-bottom) + 24px); }
.progress-fill { background: var(--amber); }
@keyframes mascot-float { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-5px) rotate(-8deg); } }
@media (max-width: 359px) {
    .network-badge { font-size: .62rem; }
    .hero { grid-template-columns: minmax(0, 1fr) 78px; }
    .task-item { grid-template-columns: minmax(0, 1fr); padding: 12px !important; }
    .task-button { justify-self: end; min-width: 84px; }
    .section-tag { font-size: .58rem; }
}
@media (max-width: 279px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .hero-orbit { display: none; }
    .task-content { grid-template-columns: minmax(0, 1fr); }
    .task-content > img { display: none; }
    .nav-tab { font-size: .58rem; }
}
@media (min-width: 740px) and (min-height: 560px) {
    :root { --shell-width: 640px; }
    .hero { padding-top: 24px; padding-bottom: 32px; }
    .hero h1 { font-size: 2.5rem; }
    .game-selection-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .game-block { align-content: start; }
}
@media (max-height: 500px) {
    .hero { padding-top: 8px; padding-bottom: 20px; }
    .hero-orbit { max-width: 92px; justify-self: end; }
    .hero h1 { font-size: 1.6rem; }
    .game-containerCombo { gap: 14px; }
    .game-containerCombo .image-gridCombo { max-width: 360px; width: 100%; align-self: center; }
    .game-containerCombo .selection-fieldsCombo { max-width: 360px; width: 100%; align-self: center; }
    .coinGame { width: 100px; }
    .gif-container img { max-width: 90px; }
}
.compact-viewport .hero { padding: 4px 0 18px; grid-template-columns: minmax(0, 1fr) 70px; }
.compact-viewport .hero h1 { font-size: 1.45rem; }
.compact-viewport .hero .eyebrow, .compact-viewport .hero-copy > p:last-child, .compact-viewport .orbit-label { display: none; }
.short-viewport .hero { display: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    .hero .main-image { animation: none; }
}